feat(footer): api + slick

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

@@ -1,3 +1,4 @@
+import { data } from "jquery";
 import { waitElement } from "m3-utils";
 
 export default class Footer {
@@ -10,16 +11,79 @@ export default class Footer {
         this.createPaymentsIcons();
         this.createVtexpciIcon();
         this.createDevIcons();
+        this.onUpdate();
+        this.events();
     }
 
     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.list = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1000,
+        });
         this.payments = await waitElement(".footerCheckout__payments");
         this.vtexpci = await waitElement(".footerCheckout__vtexpci");
         this.devIncons = await waitElement(".footerCheckout__developedBy");
+
     }
+
+    fetchApiData() {
+        this.list.innerHTML = `
+        <h3>Você também pode gostar:</h3>
+        <ul class="ulProduct"></ul>
+        `;
+
+        fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then((response) => response.json())
+            .then((data) => {
+                //const list = document.querySelector(".footerCheckout__prateleira");
+                const ul = document.createElement("ul");
+                ul.classList.add("slick-test");
+                this.list.appendChild(ul);
+
+                data.map((item) => {
+                    let colors = "";
+                    for (let i = 0; i < item.items.length; i++) {
+                        console.log(colors);
+                        colors += `<p>${item.items[i].name}</p>`;
+                    }
+                    const li = document.createElement("li");
+                    li.setAttribute("name", item.itemId);
+                    li.classList.add("itemList");
+                    li.innerHTML = `<img class="imgSlick" src="${item.items[0].images[0].imageUrl}">
+                                    <p class="nameSlick">${item.productName}</p>
+                                    <div class="skuSlick">
+                                        ${colors}
+                                    </div>
+                                    <a class="LinkSlick" type="button" href="${item.link}">VER PRODUTO</a>`;
+                    ul.appendChild(li);
+                    this.list.classList.add("fetch");
+                    ul.style.width = "100%";
+                });
+            })
+            .then(() => {
+                this.addCarrossel();
+            });
+    }
+
+    events() {
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                this.list.style.display = "flex";
+            }
+            if (window.location.hash != "#/cart") {
+                this.list.style.display = "none";
+            }
+        });
+        addEventListener("resize", () => {
+            this.addCarrossel();
+        });
+    }
+
     createPaymentsIcons() {
         this.payments.innerHTML = `
             <ul class="payments-icons-wrapper">
@@ -122,20 +186,48 @@ export default class Footer {
         // 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 lista = this.list;
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
+            lista.style.display = "flex";
+            this.fetchApiData();
+        } else {
+            lista.style.display = "none";
+        }
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
+            if (!this.list.classList.contains("fetch")) {
+                this.fetchApiData();
+            }
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (target.style.display != "none") {
+                    lista.style.display = "none";
+                } else lista.style.display = "flex";
             });
         });
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
-        $(elemento).slick({
-            slidesToShow: 4,
-            slidesToScroll: 1,
-        });
+        const elemento = await waitElement(".slick-test");
+        if ($(elemento).hasClass("slick-initialized")) {
+            $(elemento).slick("unslick");
+        }
+        if (window.innerWidth > 1024) {
+            $(elemento).not(".slick-initialized").slick({
+                slidesToShow: 4,
+                slidesToScroll: 1,
+            });
+        } else if (window.innerWidth > 375) {
+            $(elemento).not(".slick-initialized").slick({
+                slidesToShow: 3,
+                slidesToScroll: 1,
+            });
+        } else if (window.innerWidth <= 375) {
+            $(elemento).not(".slick-initialized").slick({
+                slidesToShow: 2,
+                slidesToScroll: 1,
+            });
+        }
     }
 }