feat: Adiciona o Slick

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

@@ -9,15 +9,41 @@ export default class Footer {
         await this.selectors();
         this.footerCheckoutInnerHTML();
         this.footerCheckoutDevelopedInnerHTML();
+        this.events();
+        this.onUpdate();
+        this.createPaymentsIcons();
+        this.createVtexpciIcon();
+        this.createDevIcons();
         // this.onUpdate();
     }
+    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();
+        });
+    }
 
     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.list = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1000,
+        });
         this.checkoutVazio = await waitElement(".empty-cart-content");
         this.footerCheckout = document.querySelector(".footerCheckout__stamps");
         this.footerCheckoutDeveloped = document.querySelector(".footerCheckout__developedBy");
+        this.payments = await waitElement(".footerCheckout__payments");
+        this.vtexpci = await waitElement(".footerCheckout__vtexpci");
+        this.devIncons = await waitElement(".footerCheckout__developedBy");
+        this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
     }
     async footerCheckoutInnerHTML(){
         this.footerCheckout.innerHTML = `
@@ -50,22 +76,83 @@ 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);
     }
+    fetchApiData() {
+        console.log("COMEÇO FETCH");
+        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="productImg" src="${item.items[0].images[0].imageUrl}">
+                                    <p class="productName">${item.productName}</p>
+                                    <div class="itemSku">
+                                        ${colors}
+                                    </div>
+                                    <a class="productLink" type="button" href="${item.link}">VER PRODUTO</a>`;
+                    ul.appendChild(li);
+                    this.list.classList.add("fetch");
+                    ul.style.width = "100%";
+                });
+            })
+            .then(() => {
+                this.addCarrossel();
+            });
+    }
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".slick-test");
-        if($(elemento)){
+        if ($(elemento).hasClass("slick-initialized")) {
-            $(elemento).slick({
+            $(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,
+            });
         }
     }
 }