feat: criação do slick funcional

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

@@ -6,11 +6,14 @@ export default class Footer {
     }
 
     async init() {
+        this.API = await this.FechtAPI()
         await this.selectors();
+        this.createHtmlCarrosel();
+        this.prateleiraul = await waitElement(".prateleira_carroselul");
+        this.onUpdate();
+        this.createli()
         this.adicionaPayments();
-        //await this.removeh1checkout();
-        await this.adicionandoDevelopBy()
-        // this.onUpdate();
+        await this.adicionandoDevelopBy();
     }
 
     async selectors() {
@@ -18,6 +21,10 @@ export default class Footer {
         this.payments = await waitElement(".footerCheckout__payments");
         this.vtexpci = await waitElement(".footerCheckout__vtexpci");
         this.devolperBy = await waitElement(".footerCheckout__developedBy");
+        this.prateleira = await waitElement(".footerCheckout__prateleira", {
+            timeout: 5000,
+            interval: 1000,
+        });
     }
 
     adicionaPayments() {
@@ -67,31 +74,89 @@ export default class Footer {
         //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 config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
+        let removeClassh3 = document.getElementById("removeClassh3")
+        let removeClassul = document.getElementById("removeClassul")
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                const checkoutTarget = mutation.target.attributes.style.nodeValue;
+                console.log(checkoutTarget)
+                if(checkoutTarget === "display: none;"){
+                    removeClassh3.classList.remove("displayNone")
+                    removeClassul.classList.remove('displayNone')
+                    console.log("iou")
+                }else if(checkoutTarget === "display: block;"){
+                    removeClassh3.classList.add("displayNone")
+                    removeClassul.classList.add("displayNone")
+                }
             });
         });
 
         observer.observe(target, config);
     }
+
+    createHtmlCarrosel (){
+        if(this.prateleira){
+            this.prateleira.innerHTML = `
+            <h3 id="removeClassh3" class="prateleira-title displayNone">Você também pode gostar:</h3>
+            <ul id="removeClassul" class="prateleira_carroselul displayNone"></ul>
+            `
+        }
+
+    }
+
+    async FechtAPI(){
+        return fetch(`https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`)
+            .then((response) => response.json())
+            .then((res) => {
+                const infoLi = res.map((response) => ({
+                    name: response.productName,
+                    skus: response.items.map((item) => item.name),
+                    img: response.items[0].images[0].imageUrl,
+                    link: response.link,
+                }));
+                return infoLi
+            });
+    }
+
+    async createli() {
+
+        let structureLi = ""
+
+        this.API.forEach((response) => {
+            const sku = response.skus.map((item) => `<li>${item}</li>`);
+            structureLi += `
+            <li>
+                <figure><img src ="${response.img}"/></figure>
+                <figcaption>${response.name}</figcaption>
+                <div><ul>${sku}</ul></div>
+                <button type="button"><a href="${response.link}">Ver Produto</a></button>
+            </li>
+            `;
+        })
+        this.prateleiraul.innerHTML = structureLi;
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".prateleira_carrosel")
         if ($(elemento)) {
             $(elemento).slick({
                 slidesToShow: 4,
                 slidesToScroll: 1,
+                arrows: true,
+                Infinity: false,
             });
         }
     }
 
+
     /*async removeh1checkout() {
         const cardTitle = await waitElement('#cart-title')
 
         if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart') {
-            cardTitle.style.display = 'none';
+            cardTitle.style. = 'none';
         } else {
             cardTitle.style.display = 'block';
         }

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

@@ -3,6 +3,14 @@
     border-top: 1px solid black;
     color: $color-gray2;
 
+    .footerCheckout__prateleira{
+        display: block;
+
+        .displayNone{
+            display: none;
+        }
+    }
+
     &__wrapper {
         align-items: center;
         display: flex;