checkout/src/arquivos/js/components/Footer.js

@@ -8,15 +8,14 @@ export default class Footer {
     async init() {
         this.list = await this.requestApi();
         await this.selectors();
-        this.creditCardIconsHTML();
-        this.developedByIconsHTML();
-
-        // this.onUpdate();
         this.createShelf();
         this.shelfList = await waitElement(".footerCheckout__shelfList");
         this.shelfItens();
-
+        await this.shelfUpdate();
         this.addCarrossel();
+        this.creditCardIconsHTML();
+        this.developedByIconsHTML();
+
     }
 
     async selectors() {
@@ -78,21 +77,30 @@ export default class Footer {
             });
     }
 
+    events() {
+        window.addEventListener("hashchange", () =>{})
+    }
 
-    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
+    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);
-            });
-        });
-
+            console.log("observer");
+            mutations.map((mutation) => {
+                const status = mutation.target.attributes.style.nodeValue;
+                console.log(status);
+                if(status === "display: none") {
+                    this.renderShelf();
+                    this.shelfList.classList.remove("inactive");
+                } else if (status === "display: block") {
+                    this.removeShelf();
+                    this.shelfList.classList.add("inactive");
+                }
+            })
+        })
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement(".footerCheckout__shelfList");
         $(elemento).slick({

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -8,6 +8,9 @@
 			padding: 0 16px;
 		}
 	}
+    &-message {
+        display: none;
+    }
 
 	&-title {
 		font-size: 20px;