feat(footer): adiciona logica slick e icons ao footer

.gitignore

@@ -1,5 +1,6 @@
 *node_modules
 node_modules
+yarn.lock
 
 # para arquivos sass e scss
 

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

@@ -7,34 +7,276 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.events();
+        this.onUpdate();
+        this.createPaymentsIcons();
+        this.createVtexpciIcon();
+        this.createDevIcons();
+        // await this.addCarrossel();
+    }
+
+    events() {
+        window.addEventListener("hashchange", () => {
+            this.onUpdate();
+            if (window.location.hash != "#/cart") {
+                if (document.querySelector(".footerTitle") != null) {
+                    document.querySelector(".footerTitle").style.display = "none";
+                }
+
+                this.cartTitle.style.display = "none";
+            }
+            if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                if (document.querySelector(".footerTitle") != null) {
+                    document.querySelector(".footerTitle").style.display = "block";
+                }
+                this.cartTitle.style.display = "block";
+            }
+            console.log("HASHCHANGE FOOTER");
+            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.slick = await waitElement(".slick-test");
+        // this.footerTitle = await waitElement(".footerTitle", {
+        //     timeout: 5000,
+        //     interval: 1000,
+        // });
+        this.allList = await waitElement(".footerCheckout");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.payments = await waitElement(".footerCheckout__payments");
+        this.vtexpci = await waitElement(".footerCheckout__vtexpci");
+        this.iconsFooter = await waitElement(".footerCheckout__developedBy");
+        this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
+        this.cartTitle = await waitElement("#cart-title");
     }
 
     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 lista = this.list;
+
+        let cartTitle = this.cartTitle;
+        console.log("title:", cartTitle);
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
+            lista.style.display = "flex";
+            cartTitle.style.display = "block";
+            if (!this.list.classList.contains("fetch")) {
+                console.log("PRIMEIRO NAO TEM FETCH");
+                this.fetchApiData();
+            }
+        } else {
+            lista.style.display = "none";
+            cartTitle.style.display = "none";
+        }
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            if (window.location.hash == "#/cart") {
-                console.log(mutation.type);
+                console.log("listairai", this.list.classList);
-            });
+                if (!lista.classList.contains("fetch")) {
+                    console.log("SEGUNDO NAO TEM FETCH");
+                    this.fetchApiData();
+                }
+                mutations.forEach(function (mutation) {
+                    if (target.style.display != "none") {
+                        if (document.querySelector(".footerTitle") != null) {
+                            document.querySelector(".footerTitle").style.display = "none";
+                        }
+                        cartTitle.style.display = "none";
+                        lista.style.display = "none";
+                    } else {
+                        if (document.querySelector(".footerTitle") != null) {
+                            document.querySelector(".footerTitle").style.display = "block";
+                        }
+                        lista.style.display = "flex";
+                        cartTitle.style.display = "block";
+                    }
+                    console.log(mutation.type);
+                });
+            }
         });
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        console.log("start slick");
-        $(elemento).slick({
+        const elemento = await waitElement(".slick-test");
-            slidesToShow: 4,
+        if ($(elemento).hasClass("slick-initialized")) {
-            slidesToScroll: 1,
+            $(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,
+            });
+        }
+
+        console.log("end slick");
+    }
+
+    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) => {
+                console.log(data);
+                const ul = document.createElement("ul");
+
+                ul.classList.add("slick-test");
+                this.list.appendChild(ul);
+                const footerCheckout = document.querySelector(".footerCheckout");
+                const footerTitle = document.createElement("p");
+                footerTitle.classList.add("footerTitle");
+                footerTitle.innerText = "Você também pode gostar:";
+                footerCheckout.insertBefore(footerTitle, this.list);
+                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>`;
+                    console.log(item.productName, colors);
+                    console.log("adiciona li");
+                    ul.appendChild(li);
+                    this.list.classList.add("fetch");
+                    console.log(this.list);
+                    ul.style.width = "100%";
+                });
+            })
+            .then(() => {
+                this.addCarrossel();
+            });
+        console.log("FIM FETCH");
+    }
+
+    createPaymentsIcons() {
+        this.payments.innerHTML = `
+        <ul class="payments-icons-wrapper">
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+            <li>
+                <figure>
+                    <img
+                        src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
+                        alt=""
+                    />
+                </figure>
+            </li>
+        </ul>
+        `;
+    }
+
+    createVtexpciIcon() {
+        this.vtexpci.innerHTML = `
+        <figure class="vtex-icon">
+            <img
+                src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
+                alt=""
+            />
+        </figure>
+        `;
+    }
+
+    createDevIcons() {
+        this.iconsFooter.innerHTML = `
+        <li>
+            <a href="https://vtex.com/br-pt/">
+                <span>Powered By</span>
+                <figure>
+                    <img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
+                </figure>
+            </a>
+        </li>
+
+        <li>
+            <a href="https://agenciam3.com/">
+                <span>Developed By</span>
+                <figure>
+                    <img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
+                </figure>
+            </a>
+        </li>
+        `;
     }
 }

package-lock.json

@@ -45,6 +45,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -19345,6 +19346,7 @@
                 "m3-utils": "^0.1.0",
                 "prettier": "^2.3.2",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4",
                 "webpack": "^5.51.1",
                 "webpack-merge": "^5.8.0"