PatrickReisSantos/m3-academy-template-checkout-Patrick-Reis
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

release/checkout #4

Merged
PatrickReisSantos merged 2 commits from release/checkout into main 2022-12-27 02:41:18 +00:00
Conversation 0 Commits 2 Files Changed 8 +171 -32
8 changed files with 171 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
checkout/src/arquivos/js/components/Footer.js
View File

@ -29,6 +29,22 @@ export default class Footer {
$(elemento).slick({ $(elemento).slick({
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
responsive: [
{
breakpoint: 1026,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
],
}); });
} }
async apiProducts(container) { async apiProducts(container) {
@ -65,23 +81,24 @@ export default class Footer {
}); });
} }
async addPrateleira() { async addPrateleira() {
const checkSlick = document.querySelector(".slick-initialized");
const slickContainer = document.createElement("div"); const slickContainer = document.createElement("div");
const url = window.location.hash; const url = window.location.hash;
const orderForm = await fetch("/api/checkout/pub/orderForm/") const orderForm = await fetch("/api/checkout/pub/orderForm/")
.then((response) => response.json()) .then((response) => response.json())
.then((response) => response) .then((response) => response)
.catch((err) => console.error(err)); .catch((err) => console.error(err));
console.log(orderForm.items); /* console.log(orderForm.items); */
if (orderForm.items.length > 0 && url === "#/cart") {
if (orderForm.items.length > 0 && url === "#/cart" && checkSlick === null) {
const titlePrateleira = document.createElement("h2"); const titlePrateleira = document.createElement("h2");
titlePrateleira.classList.add("title-prateleira"); titlePrateleira.classList.add("title-prateleira");
titlePrateleira.innerText = "Você também pode gostar:"; titlePrateleira.innerText = "Você também pode gostar:";
this.prateleira.appendChild(titlePrateleira); this.prateleira.appendChild(titlePrateleira);
this.prateleira.appendChild(slickContainer); this.prateleira.appendChild(slickContainer);
await this.apiProducts(slickContainer); await this.apiProducts(slickContainer);
await this.addCarrossel(slickContainer); await this.addCarrossel(slickContainer);
} else { } else if (orderForm.items.length == 0 || url !== "#/cart") {
slickContainer.remove(); slickContainer.remove();
console.log(slickContainer); console.log(slickContainer);
const slickInitialize = document.querySelector(".slick-initialized"); const slickInitialize = document.querySelector(".slick-initialized");
@ -98,9 +115,9 @@ export default class Footer {
const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"]; const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"];
query3[0].innerHTML = ""; query3[0].innerHTML = "";
cardList3.forEach(function (item, index) { cardList3.forEach(function (item, index) {
query3[0].innerHTML += `<span>${ query3[0].innerHTML += `<div class="div-addStamps"><span>${
index === 0 ? "Powered By" : "Developed By" index === 0 ? "Powered By" : "Developed By"
}</span> <img style="width: 42px; height: 16px; " src=${ }</span></div> <img style="width: 42px; height: 16px; " src=${
"https://agenciamagma.vteximg.com.br/arquivos/" + item "https://agenciamagma.vteximg.com.br/arquivos/" + item
} alt="">`; } alt="">`;
}); });

9
checkout/src/arquivos/js/components/Header.js
View File

@ -6,10 +6,12 @@ export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.addProgressBar(); this.addProgressBar();
this.MeuCarrinhoTittle();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); console.log(this.item);
} }
@ -47,4 +49,11 @@ export default class Header {
`; `;
} }
async MeuCarrinhoTittle() {
if (orderForm.items.length < 0 && url === "#/cart") {
const MeuCarrinhoTittleCheck = (document.querySelector("#cart-title").style.display =
"none");
}
}
} }

1
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -798,7 +798,6 @@
@include mq(md, min) { @include mq(md, min) {
margin: 0; margin: 0;
padding-bottom: 50px;
} }
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {

19
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -10,7 +10,17 @@
} }
&-title { &-title {
font-size: 20px; font-family: "Open Sans";
font-style: normal;
text-transform: uppercase;
line-height: 32px;
font-size: 24px;
margin: 0;
font-weight: 700;
@media (min-width: 280px) and (max-width: 1024px) {
font-size: 18px;
}
} }
&-links { &-links {
@ -23,6 +33,13 @@
padding: 15px 62px 17px 62px; padding: 15px 62px 17px 62px;
background-color: transparent; background-color: transparent;
color: #000000; color: #000000;
border-radius: 0;
margin-top: 32px;
@media (min-width: 280px) and (max-width: 1024px) {
width: 250px;
margin-top: 22px;
padding: 14px 9px 14px 9px;
}
&:hover { &:hover {
background: #00c8ff8c; background: #00c8ff8c;

42
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -8,22 +8,44 @@ html {
min-height: 100%; min-height: 100%;
} }
footer .container { footer .container {
margin-top: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 32px 0 32px;
height: 100%;
width: 100%;
justify-content: space-between; justify-content: space-between;
gap: 65px; @media (min-width: 280px) and (max-width: 1024px) {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin: 32px 0 0 16px;
}
&::before {
display: none;
}
&::after {
display: none;
}
}
.footerCheckout__stamps {
margin: 0;
} }
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
border-top: 1px solid black; border-top: 1px solid black;
width: 100%; /* width: 100%; */
/* width: 94.9734%; */ /* width: 94.9734%; */
margin: auto auto 0 auto; margin: auto auto 0 auto;
width: 2500px;
max-width: 100%;
height: 67px;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,
header { header {
width: 79.53125%; max-width: 100%;
width: 1016px;
margin: 0 auto; margin: 0 auto;
} }
@ -58,7 +80,15 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 80%; /* width: 80%; */
/* height: 544px; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* @media (min-width: 375px) and (max-width: 1024px) {
height: 532px;
} */
} }
} }
@ -87,6 +117,8 @@ body {
margin: 40px 0 30px; margin: 40px 0 30px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
/* color: transparent;
position: absolute; */
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;

30
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,7 +1,9 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
width: 100%;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
@ -10,17 +12,22 @@
} }
&__address { &__address {
color: $color-gray2; color: #292929;
font-family: $font-family; font-family: "Open Sans";
font-style: normal; font-style: normal;
font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
font-weight: 400;
@media (min-width: 280px) and (max-width: 1024px) {
order: 2;
display: flex;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; /* margin-bottom: 24px; */
max-width: 100%; max-width: 100%;
} }
} }
@ -32,7 +39,7 @@
list-style: none; list-style: none;
@include mq(md, max) { @include mq(md, max) {
align-self: center; /* align-self: center; */
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -46,10 +53,16 @@
} }
&__developedBy { &__developedBy {
display: flex;
order: 3;
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
gap: 11px;
@media (min-width: 280px) and (max-width: 1024px) {
order: 3;
}
li:last-child { li:last-child {
margin-left: 16px; margin-left: 16px;
@ -72,3 +85,8 @@
} }
} }
} }
.div-addStamps {
@media (max-width: 375px) {
font-size: 9px;
}
}

51
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,6 +1,12 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: 2500px;
height: 96px;
max-width: 100%;
@media (min-width: 280px) and (max-width: 1024px) {
height: 65px;
}
/* width: auto !important; */ /* width: auto !important; */
} }
&__wrapper { &__wrapper {
@ -40,7 +46,11 @@
} }
.headerCheckout__wrapper { .headerCheckout__wrapper {
margin: 30px 0 30px 0; height: 100%;
margin: 0 131px 0 131px;
@media (min-width: 280px) and (max-width: 1024px) {
margin: 0 16px 0 16px;
}
} }
.headerCheckout__safeBuy { .headerCheckout__safeBuy {
@ -53,6 +63,12 @@
margin-right: 8px; margin-right: 8px;
} }
.headerCheckout__safeBuy span {
@media (min-width: 305px) {
font-size: 11px;
}
}
.checkout-li { .checkout-li {
height: 12px; height: 12px;
width: 12px; width: 12px;
@ -62,10 +78,14 @@
} }
.progress-bar { .progress-bar {
width: 439px; width: 40%;
@media (max-width: 1024px) {
display: none;
}
} }
.progress-bar-container { .progress-bar-container {
margin: 0;
display: flex; display: flex;
position: relative; position: relative;
height: fit-content; height: fit-content;
@ -82,7 +102,7 @@
position: absolute; position: absolute;
display: block; display: block;
content: ""; content: "";
width: 70%; width: 67%;
height: 1px; height: 1px;
background-color: black; background-color: black;
z-index: -1; z-index: -1;
@ -126,22 +146,31 @@
} }
.headerCheckout__logo { .headerCheckout__logo {
margin-left: 131px; /* margin-left: 131px; */
@media (min-width: 280px) and (max-width: 1024px) {
margin: 0;
}
@media (max-width: 305px) {
height: 35px;
width: 130px;
}
@media (min-width: 2500px) {
width: 382px;
height: 91px;
}
} }
.headerCheckout__safeBuy { .headerCheckout__safeBuy {
margin-right: 131px; @media (min-width: 280px) and (max-width: 1024px) {
margin: 0;
}
} }
.headerCheckout__safeBuy img { .headerCheckout__safeBuy img {
margin-bottom: 2px; margin-bottom: 2px;
} }
.empty-cart-title {
text-transform: uppercase;
font-size: 50px;
line-height: 32px;
}
.empty-cart-message { .empty-cart-message {
display: none; display: none;
} }

20
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -23,7 +23,11 @@
} }
.btn-item-link { .btn-item-link {
padding: 12px 75px; display: flex;
align-items: center;
justify-content: center;
width: 242px;
height: 42px;
color: #ffffff; color: #ffffff;
font-family: "Open Sans"; font-family: "Open Sans";
font-style: normal; font-style: normal;
@ -32,6 +36,9 @@
border-radius: 8px; border-radius: 8px;
background-color: #00c8ff; background-color: #00c8ff;
text-transform: uppercase; text-transform: uppercase;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
} }
.btn-tamanho { .btn-tamanho {
@ -40,6 +47,11 @@
width: 242px; width: 242px;
justify-content: center; justify-content: center;
margin-bottom: 20px; margin-bottom: 20px;
@media (min-width: 280px) and (max-width: 1024px) {
display: flex;
flex-wrap: wrap;
width: 94.5%;
}
} }
.span-item-name { .span-item-name {
@ -59,6 +71,9 @@
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
color: #000000; color: #000000;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
} }
/* .bora { /* .bora {
@ -68,6 +83,9 @@
.product-img { .product-img {
width: 242px; width: 242px;
@media (min-width: 280px) and (max-width: 1024px) {
width: 94.5%;
}
} }
.container-produto { .container-produto {