diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..844be3d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,35 +6,173 @@ export default class Footer { } async init() { + this.list = await this.requestApi(); await this.selectors(); - // this.onUpdate(); + if (window.location.hash === "#/cart") { + await this.shelfUpdate(); + } + this.shelfList = await waitElement(".footerCheckout__shelfList"); + this.shelfItens(); + this.events(); + this.addCarrossel(); + this.creditCardIconsHTML(); + this.developedByIconsHTML(); + } async selectors() { - //Para verificar se o carrinho está vazio e remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement + 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"); + } - 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 + createShelf() { + if(this.itensShelf) { + this.itensShelf.innerHTML = ` +
+

Você também pode gostar:

+
+ + ` + } + } + + shelfItens() { + let structure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${response.name}
    +
    + +
    • + ` + }) + this.shelfList.innerHTML = structure + } + + async requestApi() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const prodInfo = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return prodInfo + }); + } + + events() { + window.addEventListener("hashchange", this.hashChange.bind(this)) + } + + async shelfUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; 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.createShelf(); + } else if (mutation.target.attributes.style.nodeValue == "display: block;") { + this.removeShelf(); + } }); }); - 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("#my-element"); + const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ slidesToShow: 4, 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
    • +
    • +
  • PCI VTEX
    • + `; + } + + developedByIconsHTML() { + this.developedByIcons.innerHTML = ` +
  • +
    + + Powered By + + +
    +
    • + +
  • +
    + + Developed By + + +
    +
    • + `; + } + + removeShelf() { + this.itensShelf.innerHTML = ""; + } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..498b48b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -8,6 +8,9 @@ padding: 0 16px; } } + &-message { + display: none; + } &-title { font-size: 20px; 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; + } }