From 6d2904fe25e7b3af3082dea083fb44a7c8c4c970 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Thu, 15 Dec 2022 10:40:44 -0300
Subject: [PATCH] =?UTF-8?q?feat(home):=20adicionando=20prateleira=20s?=
 =?UTF-8?q?=C3=B3=20quando=20o=20carrinho=20n=C3=A3o=20est=C3=A1=20vazio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

home
---
 checkout/src/arquivos/js/components/Footer.js | 44 +++++++++++--------
 .../src/arquivos/sass/partials/_footer.scss   |  7 +++
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 0ad751e..5aeb264 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/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,
+        });
+    }
 }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 5c9484b..7f83a06 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -184,8 +184,15 @@
         }
     }
 
+    .desable {
+            display: none;
+        }
+
     &__prateleira {
 
+
+
+
         &__item {
             display: flex !important;
             flex-direction: column;