feat(home): adicionando prateleira só quando o carrinho não está vazio

home

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

@@ -9,7 +9,6 @@ export default class Footer {
         await this.selectors();
         this.onUpdate();
         this.footerList();
-        await this.prateleiraFooterHTML();
     }
 
     async selectors() {
@@ -22,23 +21,6 @@ export default class Footer {
         this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
     }
 
-    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);
-                // console.log(mutation.target);
-            });
-
-            //monitorar display none -> target.style.display === "none"
-        });
-        observer.observe(target, config);
-    }
-
     async prateleiraFooterHTML() {
         this.footerPrateleira.innerHTML += `
         <h2 class="footerCheckout__prateleira__title"> Você também pode gostar: </h2>
@@ -158,4 +140,30 @@ export default class Footer {
 
         `;
     }
+
+    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
+
+        const footerPrateleiraList = document.querySelector(".footerCheckout__prateleira__list");
+        let target = this.checkoutVazio;
+        let observer = new MutationObserver((mutations) => {
+            mutations.forEach(() => {
+                if (target.style.display == "none") {
+                    this.footerPrateleira.classList.remove("desable");
+                    this.prateleiraFooterHTML();
+                } else {
+                    this.footerPrateleira.classList.add("desable");
+                    this.footerPrateleira.innerHTML = "";
+                    footerPrateleiraList.innerHTML = "";
+                }
+            });
+
+            //monitorar display none -> target.style.display === "none"
+        });
+        observer.observe(this.checkoutVazio, {
+            attributes: true,
+        });
+    }
 }

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

@@ -184,8 +184,15 @@
         }
     }
 
+    .desable {
+            display: none;
+        }
+
     &__prateleira {
 
+
+
+
         &__item {
             display: flex !important;
             flex-direction: column;