From 114965e967d298200e7fff6904adf44600aa72bf Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Sun, 18 Dec 2022 20:51:27 -0300 Subject: [PATCH] =?UTF-8?q?feat(Footer):=20novas=20fun=C3=A7=C3=B5es=20par?= =?UTF-8?q?a=20funcionamento=20do=20mutation,=20uma=20parte=20do=20css=20d?= =?UTF-8?q?o=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 94 ++++++++++++------- .../src/arquivos/sass/partials/_footer.scss | 41 ++++++++ 2 files changed, 99 insertions(+), 36 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 9911b31..844be3d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,10 +8,12 @@ export default class Footer { async init() { this.list = await this.requestApi(); await this.selectors(); - this.createShelf(); + if (window.location.hash === "#/cart") { + await this.shelfUpdate(); + } this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - await this.shelfUpdate(); + this.events(); this.addCarrossel(); this.creditCardIconsHTML(); this.developedByIconsHTML(); @@ -19,14 +21,8 @@ export default class Footer { } async selectors() { - this.itensShelf = await waitElement(".footerCheckout__prateleira", { - timeout: 5000, - interval: 1000, - }); - this.checkoutVazio = await waitElement(".empty-cart-content", { - timeout: 5000, - interval: 1000, - }); + this.itensShelf = await waitElement(".footerCheckout__prateleira"); + this.checkoutVazio = await waitElement(".empty-cart-content"); this.creditCardIcons = await waitElement(".footerCheckout__stamps"); this.developedByIcons = await waitElement(".footerCheckout__developedBy"); @@ -43,14 +39,14 @@ export default class Footer { } } - async shelfItens() { + shelfItens() { let structure = ""; this.list.forEach((response) => { const sku = response.skus.map((item) => `
  • ${item}
    • `); structure += ` -
  • +
  • ${response.name}
      ${sku}
    @@ -78,29 +74,34 @@ export default class Footer { } events() { - window.addEventListener("hashchange", () =>{}) + window.addEventListener("hashchange", this.hashChange.bind(this)) } async shelfUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - console.log("observer"); mutations.map((mutation) => { - const status = mutation.target.attributes.style.nodeValue; - console.log(status); - if(status === "display: none") { - this.renderShelf(); - this.shelfList.classList.remove("inactive"); - } else if (status === "display: block") { + console.log(mutation.target.attributes.style.nodeValue); + if(mutation.target.attributes.style.nodeValue == "display: none;") { + this.createShelf(); + } else if (mutation.target.attributes.style.nodeValue == "display: block;") { this.removeShelf(); - this.shelfList.classList.add("inactive"); } - }) - }) + }); + }); observer.observe(target, config); } + hashChange(e) { + if(e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.itensShelf.classList.add("desativado"); + } else { + this.itensShelf.classList.remove("desativado"); + } + + } + async addCarrossel() { const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ @@ -108,20 +109,43 @@ export default class Footer { slidesToScroll: 1, arrows: true, infinite: false, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + } + }, + { + breakpoint: 375, + settings: { + slidesToShow: 2, + slidesToScroll: 1 + } + }, + { + breakpoint: 290, + settings: { + slidesToShow: 1, + slidesToScroll: 1 + } + } + ] }); } creditCardIconsHTML() { this.creditCardIcons.innerHTML = ` -
  • Mastercard
    • -
    • -
  • American Express
    • -
  • Elo
    • -
  • Hipercard
    • -
  • PayPal
    • -
  • Boleto
    • +
  • Mastercard
    • +
    • +
  • American Express
    • +
  • Elo
    • +
  • Hipercard
    • +
  • PayPal
    • +
  • Boleto
    • -
  • PCI VTEX
    • +
  • PCI VTEX
    • `; } @@ -147,10 +171,8 @@ export default class Footer { `; } + removeShelf() { + this.itensShelf.innerHTML = ""; + } } - - - - - diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..5ab96c5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -3,10 +3,48 @@ border-top: none; color: $color-gray2; + &__prateleira{ + .footerCheckout__prateleira-title { + display: flex; + justify-content: center; + } + } + &__wrapper { align-items: center; display: flex; justify-content: space-between; + padding-top: 56px; + + .container { + display: flex; + justify-content: space-between; + + .footerCheckout__address{ + width: 21.02%; + left: 2.5%; + } + + .footerCheckout__stamps { + width: 31.56%; + } + + .footerCheckout__developedBy{ + display: flex; + width: 16.95%; + right: 2.5%; + + .by-vtex, .by-m3{ + display: flex; + + .vtex-logo, .m3-logo{ + width: 50% ; + } + } + + + } + } } &__address { @@ -71,4 +109,7 @@ } } } + .desativado { + display: none !important; + } }