estrutura para add slick

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

@@ -1,18 +1,27 @@
+/* eslint-disable prettier/prettier */
 import { waitElement } from "m3-utils";
 
 export default class Footer {
     constructor() {
         this.init();
+        this.mostraFooter();
+        this.addCarrossel();
     }
 
     async init() {
         await this.selectors();
+        this.mostraFooter();
+        this.addCarrossel();
         // this.onUpdate();
     }
 
     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.footerAddress = await waitElement(".footerCheckout__address");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
         this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
@@ -30,8 +39,90 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    mostraFooter(){
+        let pratileira = this.footerPratileira;
+        // let adress = this.footerAddress;
+        // let developedBy = this.footerDevelopedBy;
+        // let icon = this.footerStamps;
+
+        pratileira.innerHTML = `
+
+        <h2> 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 = `
+
+                <figure>
+                <img src = " ${produto.items[0].images[0].imageUrl }" alt = Imagem "${produto.productName}" />
+                </figure>
+
+                <div class ="container-tamanho-cores">
+                <input name="tamanho" type-"radio"/>
+                ${produto.items.map((name)=> {return `<label name="tamanho"> ${name.name}
+
+                </label>` })}
+                </div>
+                <div>
+                <button></button>
+                </div>
+
+                `
+                pratileira.children[1].appendChild(li)
+                console.log(pratileira)
+
+            });
+
+        });
+
+
+        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/masterCardM3Academy.png">
+        </li>
+        <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/masterCardM3Academy.png">
+        </li>
+        <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/masterCardM3Academy.png">
+        </li>
+        <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/masterCardM3Academy.png">
+        </li>
+        <li class="footerCheckout__listImage">
+        <img src =" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
+        </li>
+
+
+        `
+    }
+
+
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carrossel-item");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,

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

@@ -2,14 +2,15 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
+    margin-top: auto;
 
     &__wrapper {
         align-items: center;
         display: flex;
         justify-content: space-between;
-        position: fixed;
+    //     position: fixed;
-    bottom: 0;
+    // bottom: 0;
-    left: 0;
+    // left: 0;
     }
 
     &__address {