feat: Adiciona observer e hashchange na prateleira

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

@@ -8,10 +8,8 @@ export default class Footer {
     async init() {
         await this.selectors();
         await this.carrinho();
-        this.requestApi();
-        this.addCarrossel();
-
-        // this.onUpdate();
+        this.prateleira();
+        this.onUpdate();
     }
 
     async selectors() {
@@ -27,15 +25,32 @@ export default class Footer {
         this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
     }
 
+    async prateleira() {
+        if (this.checkoutVazio.style.display == "none") {
+            this.requestApi();
+            this.addCarrossel();
+            window.addEventListener("hashchange", () => {
+                if (window.location.hash !== "#/cart") {
+                    this.removePrateleira();
+                }
+                if (window.location.hash == "#/cart") {
+                    this.requestApi();
+                    this.addCarrossel();
+                }
+            });
+        }
+    }
+
+    async removePrateleira() {
+        let prateleira = this.footerPrateleira;
+        prateleira.innerHTML = ``;
+    }
+
     async requestApi() {
         let prateleira = this.footerPrateleira;
         prateleira.innerHTML = `<h2>Você também pode gostar:</h2>
         <ul class=carrosel-items></ul>`;
 
-        /*let prateleira = `<h2>TESTE</h2>
-        <ul class=carrosel-items></ul>`;
-        this.footerPrateleira.innerHTML = prateleira;*/
-
         const url = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`;
         fetch(url)
             .then((response) => {
@@ -62,7 +77,8 @@ export default class Footer {
     }
 
     async addCarrossel() {
-        const prateleira = await waitElement(".carrosel-items");
+        const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 });
+
         if (window.screen.width > 1024) {
             $(prateleira).slick({
                 slidesToShow: 4,
@@ -73,25 +89,32 @@ export default class Footer {
         }
     }
 
-    carrinho() {
-        this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
-        this.continuarCompra.innerHTML = `continuar comprando`;
-        this.frete.innerHTML = `Frete`;
-        this.unidade.innerHTML = `Unidade`;
-    }
-
-    onUpdate() {
+    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);
+            mutations.map((mutation) => {
+                const display = mutation.target.attributes.style.nodeValue;
+                console.log(mutation);
+
+                if (display == "display: none;") {
+                    this.prateleira();
+                } else if (display == "display: block;") {
+                    this.removePrateleira();
+                }
             });
         });
 
         observer.observe(target, config);
     }
+
+    carrinho() {
+        this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
+        this.continuarCompra.innerHTML = `continuar comprando`;
+        this.frete.innerHTML = `Frete`;
+        this.unidade.innerHTML = `Unidade`;
+    }
 }

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

@@ -529,7 +529,9 @@ h1#orderform-title {
         }
     }
 
+    /*PAGAMENTO*/
     .payment-data {
+        /*ICONE DE EDITAR CAIXA*/
         .payment-edit-link {
             display: flex !important;
             margin-left: auto;
@@ -551,21 +553,6 @@ h1#orderform-title {
                 }
             }
         }
-        /*position: relative;
-        .accordion-group {
-            &::before {
-                content: "";
-                display: flex;
-                width: 20.26px;
-                height: 20.89px;
-                background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png")
-                    no-repeat center center;
-                background-size: contain;
-                cursor: pointer;
-                position: absolute;
-                left: 90%;
-            }
-        }*/
     }
 
     .box-client-info-pj {