feat: cria js prateleira

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

@@ -7,10 +7,25 @@ export default class Footer {
 
     async init() {
         await this.selectors();
+        this.events();
         this.createFooter();
         this.addCarrossel();
         this.createPrateleira();
         this.onUpdate();
+        this.createMainBtn();
+    }
+    events() {
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                this.footerCheckoutPrateleira.style.display = "flex";
+            }
+            if (window.location.hash != "#/cart") {
+                this.footerCheckoutPrateleira.style.display = "none";
+            }
+        });
+        addEventListener("resize", () => {
+            this.addCarrossel();
+        });
     }
 
     async selectors() {
@@ -74,7 +89,7 @@ export default class Footer {
         `;
     }
 
-    createPrateleira() {
+    async createPrateleira() {
         const slickPrat = this.footerCheckoutPrateleira;
         slickPrat.innerHTML = `<h2>Você também pode gostar:</h2>
         <ul class="container-carrossel"></ul>`;
@@ -102,30 +117,51 @@ export default class Footer {
                                         item.link
                                     }">Ver Produto</button>`;
                     slickPrat.children[1].appendChild(li);
+                    this.footerCheckoutPrateleira.classList.add("fetch");
                 });
+            })
+            .then(() => {
+                this.addCarrossel();
             });
     }
 
+    createMainBtn() {
+        const btnMainEmpty = document.querySelector("#cart-choose-products");
+        const h2Empty = this.checkoutVazio.children[0];
+        btnMainEmpty.textContent = `CONTINUAR COMPRANDO`;
+        h2Empty.textContent = `SEU CARRINHO ESTÁ VAZIO`;
+    }
+
     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 list = this.footerCheckoutPrateleira;
+
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
+            list.style.display = "flex";
+            this.createPrateleira();
+        } else {
+            list.style.display = "none";
+        }
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
+            if (this.footerCheckoutPrateleira.classList.contains("fetch")) {
+                this.createPrateleira();
+            }
             mutations.forEach(function (mutation) {
-                if (
+                if (mutation.target.style.display != "none") {
-                    mutation.target.style.display === "none" &&
+                    list.style.display = "none";
-                    window.location.href === "https://m3academy.myvtex.com/checkout/#/cart"
-                ) {
                 } else {
-                    console.log("block");
+                    list.style.display = "flex";
                 }
             });
         });
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
         const elemento = await waitElement(".container-carrossel");
         $(elemento).slick({