From cf90b8690f41a71a869280f19f41352a60a3d155 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Thu, 22 Dec 2022 14:10:34 -0300 Subject: [PATCH] =?UTF-8?q?fix:=20Ajusta=20fun=C3=A7=C3=A3o=20da=20pratele?= =?UTF-8?q?ira?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 133 +++++++++++++----- .../sass/checkout/_checkout-carrinho.scss | 72 ++++++++-- .../sass/checkout/_checkout-vazio.scss | 9 +- checkout/src/arquivos/sass/lib/_slick.scss | 11 +- .../src/arquivos/sass/partials/_footer.scss | 35 +++-- .../src/arquivos/sass/partials/_header.scss | 12 +- 6 files changed, 204 insertions(+), 68 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ccfa2ea..2e8cc56 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,15 +8,16 @@ export default class Footer { async init() { this.list = await this.fetchPrateleira(); await this.selectors(); - // this.onUpdate(); - this.createPrateleira(); - this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); - this.itensPrateleira(); - - this.addCarrossel(); - this.creditCardIconsHTML(); 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() { @@ -24,25 +25,63 @@ export default class Footer { timeout: 5000, interval: 1000, }); + this.checkoutVazio = await waitElement(".empty-cart-content"); this.creditCardIcons = await waitElement(".footerCheckout__stamps"); 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: // 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 let target = this.checkoutVazio; + const cartTitle = document.querySelector("#cart-title"); 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) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + mutations.map((mutation) => { + 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); } + hashChange(e) { + if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.itensP.classList.add("desativado"); + } else { + this.itensP.classList.remove("desativado"); + } + } + createPrateleira() { if (this.itensP) { this.itensP.innerHTML = ` @@ -52,6 +91,10 @@ export default class Footer { } } + removePrateleira() { + this.itensP.innerHTML = ``; + } + async itensPrateleira() { let structure = ""; @@ -86,31 +129,8 @@ export default class Footer { }); } - async addCarrossel() { - const elemento = await waitElement(".footerCheckout__carrossel-itens"); - - 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, - }); - } + events() { + window.addEventListener("hashchange", this.hashChange.bind(this)); } creditCardIconsHTML() { @@ -148,4 +168,47 @@ export default class Footer { `; } + + 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, + // }); + // } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b54da06..787a45c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -21,9 +21,10 @@ box-sizing: border-box; border-radius: 5px; padding: 16px 29px 16px 16px; - margin-bottom: 48px; + margin-bottom: 16px; @include mq(md, max) { + padding: 16px; margin: 0px 0 25px 0; border-left: none; border-right: none; @@ -132,7 +133,6 @@ td.info { width: 100%; } - } #payment-data-submit { @@ -173,6 +173,11 @@ .cart-items { .product-item { padding: 16px 0; + + @media (max-width: 1024px) { + border-top: 0 !important; + padding-top: 0; + } } th { @@ -184,7 +189,18 @@ line-height: 16px; 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, &.shipping-date { display: none; @@ -206,6 +222,10 @@ margin: 0; width: 20.2%; + @media (max-width: 375px) { + width: 100% !important; + } + img { width: 100%; @@ -231,6 +251,11 @@ color: $black-500; white-space: normal; + @media (max-width: 375px) { + padding: 0 !important; + // margin-left: 48px; + } + @include mq(lg, max) { width: 250px; } @@ -249,9 +274,19 @@ text-decoration: none; } - @media (max-width: 490px) { - margin-left: 23px; + @media (min-width: 768px) and (max-width: 1024px) { + width: 100%; + margin-left: 0; } + + @media (max-width: 375px) { + width: 80% !important; + margin-left: 11px; + } + + // @media (max-width: 490px) { + // margin-left: 23px; + // } } .brand, @@ -295,7 +330,8 @@ font-size: 12px; line-height: 14px; text-decoration-line: line-through; - @include mq(sm, max) { + + @media (max-width: 375px) { font-size: 12px; line-height: 14px; } @@ -310,29 +346,30 @@ } td.quantity { - display: flex; + display: flex !important; align-items: center; justify-content: center; margin: 11px 79px 0 0; padding: 0; height: 34px; - width: 99px; + width: 99px !important; // width: max-content !important; box-sizing: border-box; border: 1px solid $gray-300; border-radius: 8px; @media (max-width: 490px) { - margin-left: 84px !important; + margin-left: 70px !important; + width: 80px !important; } input { - background-color: $white; + background-color: transparent; border: 0 none; display: block; max-height: 38px; margin: 0 !important; - // padding: 8px 0; + padding: 0; width: 38px; color: $black-500; box-shadow: none; @@ -356,6 +393,7 @@ font-weight: 700; line-height: 10px; border-radius: 50%; + margin: auto; padding: 3px 0; width: 16px; @@ -489,9 +527,13 @@ line-height: 33px; color: $black-500; - @include mq(md, max) { - margin-top: 0; + @media (max-width: 375px) { + margin: 13px 0 11px; } + + // @include mq(md, max) { + // margin-top: 0; + // } } .srp-description { @@ -500,6 +542,10 @@ font-size: 12px; line-height: 18px; margin: 0 0 12px; + + @media (max-width: 375px) { + font-size: 14px; + } } button.shp-open-options { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index f8f7cf0..deb6186 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,5 +1,6 @@ .empty-cart { font-family: $font-family; + &-content { color: #292929; text-align: center; @@ -24,11 +25,17 @@ text-transform: uppercase; margin-bottom: 35px; - @media (max-width: 1024px) { + @media (min-width: 376px) and (max-width: 1024px) { font-size: 18px; line-height: 25px; margin: 235px 0 22px; } + + @media (max-width: 375px) { + font-size: 18px; + line-height: 25px; + margin: 180px 0 22px; + } } &-message { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index b2d70a8..82fe2a6 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -81,7 +81,6 @@ img { display: block; - } &.slick-loading img { display: none; @@ -117,13 +116,21 @@ z-index: 4; border: none; left: 20px; + + @media (max-width: 375px) { + left: 2px; + } } .slick-next { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") - no-repeat center center; + no-repeat center center; z-index: 4; border: none; right: 20px; + + @media (max-width: 375px) { + right: 15px; + } } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 7b64295..602c27e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -24,6 +24,11 @@ line-height: 38px; text-align: center; color: $black-500; + + @media (max-width: 375px) { + font-size: 14px; + line-height: 28px; + } } .product-info { @@ -81,7 +86,7 @@ background-color: $vivid-blue; border: none; border-radius: 8px; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; font-weight: 700; font-size: 13px; @@ -119,8 +124,8 @@ margin-top: 56px; - @media (max-width: 1024px) { - } + // @media (max-width: 1024px) { + // } .container { border-top: 1px solid #000; @@ -167,25 +172,24 @@ margin-top: 13px; } - @media (max-width: 1024px) { - width: 90%; - margin: 22px 0 40px 16px; + @media (min-width: 768px) and (max-width: 1024px) { + width: 33.5%; + margin: 22px 0 23px 16px; + } + + @media (min-width: 376px) and (max-width: 767px) { + width: 87%; + margin: 22px 0 23px 8px; } @media (max-width: 375px) { width: 91.2%; order: 1; gap: 4px; - // margin: 23px 0; + margin: 22px 0 23px 8px; } - - @include mq(md, max) { - align-self: center; - // margin-bottom: 12px; - } - &__divider { content: ""; background-color: $gray-400; @@ -268,4 +272,9 @@ } } } + + + .desativado { + display: none !important; + } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index b1c41f5..f00c8e5 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -140,12 +140,16 @@ width: 19.213%; } - @media screen and (min-width: 376px) and (max-width: 1024px) { + @media (min-width: 768px) and (max-width: 1024px) { width: 16.59%; } + @media (min-width: 376px) and (max-width: 767px) { + width: 39.283%; + } + @media (max-width: 375px) { - width: 41.49%; + width: 45.4%; } } @@ -165,8 +169,8 @@ padding: 0 0 0 8px; color: $black-400; - @media (max-width: 1024px) { - } + // @media (max-width: 1024px) { + // } @media (min-width: 2500px) { font-size: 24px;