diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index a8867b5..c364f5b 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -19,6 +19,7 @@ export default class Footer { this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci"); this.footerCheckoutDeveloped = await waitElement(".footerCheckout__developedBy"); this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); + this.myCart = await waitElement("#cart-title"); } async prateleiraFooterHTML() { @@ -154,18 +155,21 @@ export default class Footer { // 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 myCart = document.querySelector("#cart-title"); - let target = this.checkoutVazio; + if (window.location.hash == "#/cart") { + this.myCart.classList.add("inactive"); + } + //monitorar display none -> target.style.display === "none" + let target = this.checkoutVazio; let observer = new MutationObserver((mutations) => { mutations.forEach(() => { if (target.style.display == "none") { - this.footerPrateleira.classList.remove("desable"); - myCart.classList.remove("desable"); + this.footerPrateleira.classList.remove("inactive"); + this.myCart.classList.remove("inactive"); this.prateleiraFooterHTML(); } else { - this.footerPrateleira.classList.add("desable"); - myCart.classList.add("desable"); + this.footerPrateleira.classList.add("inactive"); + this.myCart.classList.add("inactive"); this.footerPrateleira.innerHTML = ""; } }); @@ -173,20 +177,19 @@ export default class Footer { window.addEventListener("hashchange", () => { if (window.location.hash == "#/cart") { if (target.style.display == "none") { - myCart.classList.remove("desable"); - this.footerPrateleira.classList.remove("desable"); + this.myCart.classList.remove("inactive"); + this.footerPrateleira.classList.remove("inactive"); this.footerPrateleira.innerHTML = ""; this.prateleiraFooterHTML(); } else { - myCart.classList.add("desable"); + this.myCart.classList.add("inactive"); } } else { - this.footerPrateleira.classList.add("desable"); - myCart.classList.add("desable"); + this.footerPrateleira.classList.add("inactive"); + this.myCart.classList.add("inactive"); this.footerPrateleira.innerHTML = ""; } }); - //monitorar display none -> target.style.display === "none" }); observer.observe(this.checkoutVazio, { attributes: true, diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7911a8..c61975c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -222,7 +222,7 @@ } - .desable { + .inactive { display: none; } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index f2425d6..5c5f338 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -245,4 +245,4 @@ } -.desable {display: none !important;} +.inactive {display: none !important;}