diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d03b99f..5c481f5 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,10 +7,25 @@ export default class Footer { async init() { await this.selectors(); + this.events(); this.createFooter(); this.addCarrossel(); this.createPrateleira(); this.onUpdate(); + this.createMainBtn(); + } + events() { + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.footerCheckoutPrateleira.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.footerCheckoutPrateleira.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } async selectors() { @@ -74,7 +89,7 @@ export default class Footer { `; } - createPrateleira() { + async createPrateleira() { const slickPrat = this.footerCheckoutPrateleira; slickPrat.innerHTML = `

Você também pode gostar:

`; @@ -102,30 +117,51 @@ export default class Footer { item.link }">Ver Produto`; slickPrat.children[1].appendChild(li); + this.footerCheckoutPrateleira.classList.add("fetch"); }); + }) + .then(() => { + this.addCarrossel(); }); } + createMainBtn() { + const btnMainEmpty = document.querySelector("#cart-choose-products"); + const h2Empty = this.checkoutVazio.children[0]; + btnMainEmpty.textContent = `CONTINUAR COMPRANDO`; + h2Empty.textContent = `SEU CARRINHO ESTÁ VAZIO`; + } + 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; + let list = this.footerCheckoutPrateleira; + + if (target.style.display == "none" && window.location.hash == "#/cart") { + list.style.display = "flex"; + this.createPrateleira(); + } else { + list.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + if (this.footerCheckoutPrateleira.classList.contains("fetch")) { + this.createPrateleira(); + } mutations.forEach(function (mutation) { - if ( - mutation.target.style.display === "none" && - window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" - ) { + if (mutation.target.style.display != "none") { + list.style.display = "none"; } else { - console.log("block"); + list.style.display = "flex"; } }); }); observer.observe(target, config); } + async addCarrossel() { const elemento = await waitElement(".container-carrossel"); $(elemento).slick({