feat: adiciona prateleira no slick

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

@@ -3,17 +3,26 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
+
     }
 
+
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        this.onUpdate();
+        this.showPrateleira();
+        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.footerPratileira = await waitElement(".footerCheckout__prateleira");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerAddress = await waitElement(".footerCheckout__address");
+        this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        this.cartTitulo =  await waitElement("#cart-title");
     }
 
     onUpdate() {
@@ -30,11 +39,118 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+
+
+    showPrateleira() {
+        let pratileira = this.footerPratileira;
+        pratileira.innerHTML = `
+
+        <h2 class="text-foot"> Você Também pode gosta:</h2>
+        <ul class=" container-carrossel-item"></ul>
+
+        `
+
+        fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+
+            .then((Response) => Response.json())
+            .then(function (data) {
+                return data.map(function (produto) {
+
+                    let li = document.createElement("li")
+                    li.setAttribute("id", produto.productId)
+                    li.innerHTML = `
+
+
+                <img class="color-img" src = " ${produto.items[0].images[0].imageUrl}" alt = Imagem "${produto.productName}" />
+
+                <p class="numeProduct" >${produto.productName}</p>
+                <div class ="container-tamanho-cores">
+
+                ${produto.items.map((name) => {
+                        return `<a name="tamanho" class="tamanho"> ${name.name}
+
+                </a>` }).join(" ")}
+                </div>
+
+                <button class="bottons"> ver produto</button>
+
+
+                `
+                    pratileira.children[1].appendChild(li)
+                    // console.log(pratileira)
+
+                });
+
+            }).then(() => { this.addCarrossel();});
+
+
+        this.footerStamps.innerHTML = `
+
+        <li class="footerCheckout__listImage ">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
+        </li>
+        <li><span class=" footerCheckout__stamps__divider"></span></li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
+        </li>
+        `;
+
+
+        this.footerDevelopedBy.innerHTML = `
+
+    <li class=" list ">
+    <span>Power By</span>
+    <img class="vtex-rigth1" src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
+
+    <span>Developed By</span>
+    <img class="vtex-rigth2" src=" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
+    </li>
+    `;
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carrossel-item");
         $(elemento).slick({
+
+            infinite: false,
+            arrows: true,
+            variabreWidth: true,
             slidesToShow: 4,
             slidesToScroll: 1,
+            responsive: [
+
+                {
+                    breakpoint: 1025,
+                    settings:
+                    {slidesToShow: 3,
+                    slidesToScroll: 1,}
+                },
+                {
+                    breakpoint:376,
+                    settings:
+                    {slidesToShow: 2,
+                    slidesToScroll: 1,}
+                }
+            ]
         });
     }
 }