diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d786546..c816f0e 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,17 +9,13 @@ export default class Footer { this.list = await this.apiRequest(); await this.selectors(); this.footerIcons(); - this.onUpdate(); if (window.location.hash === "#/cart") { - await this.createContainerShelf(); - } - if (window.location.hash !== "#/cart") { - await this.removeShelf(); + await this.onUpdate(); } this.shelfItem = await waitElement(".footerCheckout__shelfList"); await this.createShelf(); + this.events(); this.addCarrossel(); - console.log(this.list); } async selectors() { @@ -31,23 +27,23 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); } - onUpdate() { + events() { + window.addEventListener("hashchange", this.hashChange.bind(this)); + } + + 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; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - console.log(mutation); - - const footer = document.querySelector(".footerCheckout"); - console.log(footer); - if (target.attributes.style.nodeValue == "display: none;") { - footer.children[0].classList.remove("ativado"); - } else { - footer.children[0].classList.add("ativado"); + console.log("ndidubazsbf"); + mutations.map((mutation) => { + if (mutation.target.attributes.style.nodeValue == "display: none;") { + this.createContainerShelf(); + } else if (mutation.target.attributes.style.nodeValue == "display: block;") { + this.removeShelf(); } }); }); @@ -55,26 +51,27 @@ export default class Footer { observer.observe(target, config); } - async createContainerShelf() { - if (this.shelf) { - this.shelf.innerHTML = ` -
-

Você também pode gostar:

-
+ createContainerShelf() { + this.shelf.innerHTML = ` +
+

Você também pode gostar:

+
- + - `; + `; + } + + hashChange(e) { + console.log(e); + if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.shelf.classList.add("desativado"); + } else { + this.shelf.classList.remove("desativado"); } } - async removeShelf() { - if (this.shelf) { - this.shelf.innerHTML = ""; - } - } - - async createShelf() { + createShelf() { let structure = ""; this.list.forEach((resp) => { @@ -91,7 +88,10 @@ export default class Footer { }); this.shelfItem.innerHTML = structure; - // console.log("ioaioaioiaoioa"); + } + + removeShelf() { + this.shelf.innerHTML = ""; } async apiRequest() { @@ -171,7 +171,6 @@ export default class Footer { } const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy"); - // console.log(footerDevelopedBy); if (footerDevelopedBy) { const vtexIcon = footerDevelopedBy[0].children[0].children[0]; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 6d9e8b5..7b055d7 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -346,7 +346,7 @@ } } - .ativado { + .desativado { display: none !important; } }