Merge pull request 'feat: adiciona logica para as funcionalidades do carrinho e da prateleira' (#5) from feature/adiciona-logica-funcionalidades-carrinho-prateleira into development

Reviewed-on: #5

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

@@ -6,11 +6,15 @@ export default class Footer {
     }
 
     async init() {
-        await this.selectors();
-        // this.onUpdate();
         this.list = await this.fetchApiData();
-        this.renderPrateleira();
-        this.items = document.querySelector(".footerCheckout__prateleira-container");
+        await this.selectors();
+        this.events();
+        this.cartUpdate();
+        this.items = await waitElement(".footerCheckout__prateleira-container", {
+            timeout: 5000,
+            interval: 1,
+        });
+        console.log(this.items, "console de items");
         this.renderItems();
         await this.addCarrossel();
     }
@@ -18,23 +22,19 @@ export default class Footer {
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
-        this.checkoutVazio = await waitElement(".empty-cart-content");
-        this.prateleira = await waitElement(".footerCheckout__prateleira");
+        this.checkoutVazio = await waitElement(".empty-cart-content", {
+            timeout: 5000,
+            interval: 1,
+        });
+        this.cartTitle = await waitElement("#cart-title");
+        this.prateleira = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1,
+        });
     }
 
-    onUpdate() {
-        //Função que 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);
-            });
-        });
-
-        observer.observe(target, config);
+    events() {
+        window.addEventListener("hashchange", this.outPrateleira.bind(this));
     }
 
     async fetchApiData() {
@@ -54,6 +54,32 @@ export default class Footer {
             });
     }
 
+    cartUpdate() {
+        console.log("cartUpdate");
+        //Função que 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.map((mutation) => {
+                const cartStatus = mutation.target.attributes.style.nodeValue;
+
+                console.log(cartStatus);
+
+                if (cartStatus === "display: none;") {
+                    this.cartTitle.classList.remove("inactive");
+                    this.renderPrateleira();
+                } else if (cartStatus === "display: block;") {
+                    this.cartTitle.classList.add("inactive");
+                    this.removePrateleira();
+                }
+            });
+        });
+
+        observer.observe(target, config);
+    }
+
     renderPrateleira() {
         let itemsStructure = `
         <div class="footerCheckout__prateleira__title">
@@ -68,7 +94,7 @@ export default class Footer {
         this.prateleira.innerHTML = itemsStructure;
     }
 
-    renderItems() {
+    async renderItems() {
         let itemsCards = ``;
         this.list.forEach((item) => {
             const sku = item.skus.map((resp) => `<li>${resp}</li>`);
@@ -88,7 +114,7 @@ export default class Footer {
                     ${sku}
                   </ul>
                 </div>
-                <button>
+                <button type="button">
                   <a href="${item.link}">VER PRODUTO</a>
                 </button>
               </li>
@@ -98,6 +124,19 @@ export default class Footer {
         this.items.innerHTML = itemsCards;
     }
 
+    removePrateleira() {
+        this.prateleira.innerHTML = ``;
+    }
+
+    outPrateleira(e) {
+        console.log(e, "outPrateleira");
+        if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
+            this.prateleira.classList.add("inactive");
+        } else {
+            this.prateleira.classList.remove("inactive");
+        }
+    }
+
     async addCarrossel() {
         const elemento = await waitElement(".footerCheckout__prateleira-container");
         $(elemento).slick({

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

@@ -1,4 +1,8 @@
 .container {
+    #cart-title.inactive {
+        display: none !important;
+    }
+
     @include mq(md, max) {
         width: 100%;
     }

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

@@ -36,6 +36,10 @@
         }
     }
 
+    &__prateleira.inactive {
+        display: none;
+    }
+
     &__prateleira-container {
         display: flex;
         width: 100%;