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 = `
-                <div class="footerCheckout__prateleira-title">
-                    <h2>Você também pode gostar:</h2>
-                </div>
+    createContainerShelf() {
+        this.shelf.innerHTML = `
+            <div class="footerCheckout__prateleira-title">
+                <h2>Você também pode gostar:</h2>
+            </div>
 
-                <ul class="footerCheckout__shelfList"></ul>
+            <ul class="footerCheckout__shelfList"></ul>
 
-            `;
+        `;
+    }
+
+    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];

checkout/src/arquivos/sass/partials/_footer.scss

@@ -346,7 +346,7 @@
         }
     }
 
-    .ativado {
+    .desativado {
         display: none !important;
     }
 }