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

fix: Ajusta função da prateleira

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-22 14:10:34 -03:00
parent c9ace74e74
commit cf90b8690f
6 changed files with 204 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,16 @@ export default class Footer {
async init() { async init() {
this.list = await this.fetchPrateleira(); this.list = await this.fetchPrateleira();
await this.selectors(); await this.selectors();
// this.onUpdate();
this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.addCarrossel();
this.creditCardIconsHTML(); this.creditCardIconsHTML();
this.developedByIconsHTML(); this.developedByIconsHTML();
if (window.location.hash === "#/cart") {
await this.onUpdate();
}
// this.createPrateleira();
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
this.itensPrateleira();
this.events();
this.addCarrossel();
} }
async selectors() { async selectors() {
@ -24,25 +25,63 @@ export default class Footer {
timeout: 5000, timeout: 5000,
interval: 1000, interval: 1000,
}); });
this.checkoutVazio = await waitElement(".empty-cart-content");
this.creditCardIcons = await waitElement(".footerCheckout__stamps"); this.creditCardIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy"); this.developedByIcons = await waitElement(".footerCheckout__developedBy");
} }
onUpdate() { async onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio; let target = this.checkoutVazio;
const cartTitle = document.querySelector("#cart-title");
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
// let observer = new MutationObserver((mutations) => {
// // mutations.forEach(function (mutation) {
// // console.log("observer");
// mutations.map((mutation.target.attributes.style.nodeValue); => {
// const cartStatus = mutation.target.attributes.style.nodeValue;
// console.log("cartStatus");
// if (cartStatus == "display: none;") {
// this.createPrateleira();
// this.cartTitle.classList.remove("inactive");
// } else if (cartStatus == "display: block;") {
// this.removePrateleira();
// this.cartTitle.classList.add("inactive");
// }
// });
// // });
// });
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.map((mutation) => {
console.log(mutation.type); console.log(mutation.target.attributes.style.nodeValue);
if (mutation.target.attributes.style.nodeValue == "display: none;") {
this.createPrateleira();
// this.cartTitle.classList.remove("inactive");
} else if (mutation.target.attributes.style.nodeValue == "display: block;") {
this.removePrateleira();
// this.cartTitle.classList.add("inactive");
}
}); });
}); });
observer.observe(target, config); observer.observe(target, config);
} }
hashChange(e) {
if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
this.itensP.classList.add("desativado");
} else {
this.itensP.classList.remove("desativado");
}
}
createPrateleira() { createPrateleira() {
if (this.itensP) { if (this.itensP) {
this.itensP.innerHTML = ` this.itensP.innerHTML = `
@ -52,6 +91,10 @@ export default class Footer {
} }
} }
removePrateleira() {
this.itensP.innerHTML = ``;
}
async itensPrateleira() { async itensPrateleira() {
let structure = ""; let structure = "";
@ -86,31 +129,8 @@ export default class Footer {
}); });
} }
async addCarrossel() { events() {
const elemento = await waitElement(".footerCheckout__carrossel-itens"); window.addEventListener("hashchange", this.hashChange.bind(this));
if (window.innerWidth > 1024) {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
} else if (window.innerWidth <= 1024 && window.innerWidth > 375) {
$(elemento).slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
} else if (window.innerWidth <= 375) {
$(elemento).slick({
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
infinite: false,
});
}
} }
creditCardIconsHTML() { creditCardIconsHTML() {
@ -148,4 +168,47 @@ export default class Footer {
</li> </li>
`; `;
} }
async addCarrossel() {
const elemento = await waitElement(".footerCheckout__carrossel-itens");
// if (window.innerWidth > 1024) {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
infinite: false,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
},
},
{
breakpoint: 601,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
},
},
],
});
// } else if (window.innerWidth <= 1024 && window.innerWidth > 599) {
// $(elemento).slick({
// slidesToShow: 3,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// } else if (window.innerWidth <= 599) {
// $(elemento).slick({
// slidesToShow: 2,
// slidesToScroll: 1,
// arrows: true,
// infinite: false,
// });
// }
}
} }

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

@ -21,9 +21,10 @@
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px 29px 16px 16px; padding: 16px 29px 16px 16px;
margin-bottom: 48px; margin-bottom: 16px;
@include mq(md, max) { @include mq(md, max) {
padding: 16px;
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -132,7 +133,6 @@
td.info { td.info {
width: 100%; width: 100%;
} }
} }
#payment-data-submit { #payment-data-submit {
@ -173,6 +173,11 @@
.cart-items { .cart-items {
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
@media (max-width: 1024px) {
border-top: 0 !important;
padding-top: 0;
}
} }
th { th {
@ -184,7 +189,18 @@
line-height: 16px; line-height: 16px;
text-align: left; text-align: left;
@include mq(md, max) { &.product-price {
&:after {
content: "Unidade";
background-color: $white;
}
}
@media (max-width: 1024px) {
&.product,
&.product-price,
&.quantity,
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
display: none; display: none;
@ -206,6 +222,10 @@
margin: 0; margin: 0;
width: 20.2%; width: 20.2%;
@media (max-width: 375px) {
width: 100% !important;
}
img { img {
width: 100%; width: 100%;
@ -231,6 +251,11 @@
color: $black-500; color: $black-500;
white-space: normal; white-space: normal;
@media (max-width: 375px) {
padding: 0 !important;
// margin-left: 48px;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
@ -249,9 +274,19 @@
text-decoration: none; text-decoration: none;
} }
@media (max-width: 490px) { @media (min-width: 768px) and (max-width: 1024px) {
margin-left: 23px; width: 100%;
margin-left: 0;
} }
@media (max-width: 375px) {
width: 80% !important;
margin-left: 11px;
}
// @media (max-width: 490px) {
// margin-left: 23px;
// }
} }
.brand, .brand,
@ -295,7 +330,8 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(sm, max) {
@media (max-width: 375px) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
@ -310,29 +346,30 @@
} }
td.quantity { td.quantity {
display: flex; display: flex !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 11px 79px 0 0; margin: 11px 79px 0 0;
padding: 0; padding: 0;
height: 34px; height: 34px;
width: 99px; width: 99px !important;
// width: max-content !important; // width: max-content !important;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 8px; border-radius: 8px;
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 70px !important;
width: 80px !important;
} }
input { input {
background-color: $white; background-color: transparent;
border: 0 none; border: 0 none;
display: block; display: block;
max-height: 38px; max-height: 38px;
margin: 0 !important; margin: 0 !important;
// padding: 8px 0; padding: 0;
width: 38px; width: 38px;
color: $black-500; color: $black-500;
box-shadow: none; box-shadow: none;
@ -356,6 +393,7 @@
font-weight: 700; font-weight: 700;
line-height: 10px; line-height: 10px;
border-radius: 50%; border-radius: 50%;
margin: auto;
padding: 3px 0; padding: 3px 0;
width: 16px; width: 16px;
@ -489,9 +527,13 @@
line-height: 33px; line-height: 33px;
color: $black-500; color: $black-500;
@include mq(md, max) { @media (max-width: 375px) {
margin-top: 0; margin: 13px 0 11px;
} }
// @include mq(md, max) {
// margin-top: 0;
// }
} }
.srp-description { .srp-description {
@ -500,6 +542,10 @@
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
@media (max-width: 375px) {
font-size: 14px;
}
} }
button.shp-open-options { button.shp-open-options {

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

@ -1,5 +1,6 @@
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
&-content { &-content {
color: #292929; color: #292929;
text-align: center; text-align: center;
@ -24,11 +25,17 @@
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 35px; margin-bottom: 35px;
@media (max-width: 1024px) { @media (min-width: 376px) and (max-width: 1024px) {
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
margin: 235px 0 22px; margin: 235px 0 22px;
} }
@media (max-width: 375px) {
font-size: 18px;
line-height: 25px;
margin: 180px 0 22px;
}
} }
&-message { &-message {

11
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -81,7 +81,6 @@
img { img {
display: block; display: block;
} }
&.slick-loading img { &.slick-loading img {
display: none; display: none;
@ -117,13 +116,21 @@
z-index: 4; z-index: 4;
border: none; border: none;
left: 20px; left: 20px;
@media (max-width: 375px) {
left: 2px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
border: none; border: none;
right: 20px; right: 20px;
@media (max-width: 375px) {
right: 15px;
}
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;

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

@ -24,6 +24,11 @@
line-height: 38px; line-height: 38px;
text-align: center; text-align: center;
color: $black-500; color: $black-500;
@media (max-width: 375px) {
font-size: 14px;
line-height: 28px;
}
} }
.product-info { .product-info {
@ -81,7 +86,7 @@
background-color: $vivid-blue; background-color: $vivid-blue;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-family: "Open Sans"; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 13px;
@ -119,8 +124,8 @@
margin-top: 56px; margin-top: 56px;
@media (max-width: 1024px) { // @media (max-width: 1024px) {
} // }
.container { .container {
border-top: 1px solid #000; border-top: 1px solid #000;
@ -167,25 +172,24 @@
margin-top: 13px; margin-top: 13px;
} }
@media (max-width: 1024px) { @media (min-width: 768px) and (max-width: 1024px) {
width: 90%; width: 33.5%;
margin: 22px 0 40px 16px; margin: 22px 0 23px 16px;
}
@media (min-width: 376px) and (max-width: 767px) {
width: 87%;
margin: 22px 0 23px 8px;
} }
@media (max-width: 375px) { @media (max-width: 375px) {
width: 91.2%; width: 91.2%;
order: 1; order: 1;
gap: 4px; gap: 4px;
// margin: 23px 0; margin: 22px 0 23px 8px;
} }
@include mq(md, max) {
align-self: center;
// margin-bottom: 12px;
}
&__divider { &__divider {
content: ""; content: "";
background-color: $gray-400; background-color: $gray-400;
@ -268,4 +272,9 @@
} }
} }
} }
.desativado {
display: none !important;
}
} }

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

@ -140,12 +140,16 @@
width: 19.213%; width: 19.213%;
} }
@media screen and (min-width: 376px) and (max-width: 1024px) { @media (min-width: 768px) and (max-width: 1024px) {
width: 16.59%; width: 16.59%;
} }
@media (min-width: 376px) and (max-width: 767px) {
width: 39.283%;
}
@media (max-width: 375px) { @media (max-width: 375px) {
width: 41.49%; width: 45.4%;
} }
} }
@ -165,8 +169,8 @@
padding: 0 0 0 8px; padding: 0 0 0 8px;
color: $black-400; color: $black-400;
@media (max-width: 1024px) { // @media (max-width: 1024px) {
} // }
@media (min-width: 2500px) { @media (min-width: 2500px) {
font-size: 24px; font-size: 24px;