feat: css 1 parte

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

@@ -7,15 +7,16 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.footerFlex();
+        this.onUpdate();
-        // this.onUpdate();
+        // this.apiFetch();
+        this.footer();
     }
 
     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.checkoutVazio = await waitElement(".empty-cart-content");
-        this.divprateleira = await waitElement(".footerCheckout__prateleira");
+        this.divPrateleira = await waitElement(".footerCheckout__prateleira");
         this.divFooter = await waitElement(".footerCheckout__wrapper");
     }
     onUpdate() {
@@ -32,14 +33,56 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    // apiFetch() {
+    //     let pratileira = this.divPrateleira;
+    //     pratileira.innerHTML = `
+
+    //     <h2 class="text-foot"> Você Também pode gosta:</h2>
+    //     <ul class="ulSlick"></ul>`;
+
+    //     fetch(
+    //         "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319%22"
+    //     )
+    //         .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}"/>
+
+    //             <><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();
+    //         });
+    // }
+
     async addCarrossel() {
-        const elemento = await waitElement(".slick");
+        const elemento = await waitElement(".ulSlick");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
         });
     }
-    footerFlex() {
+    footer() {
         this.divFooter.innerHTML = `
         <hr></hr>
         <div class="conteiner_footer">
@@ -86,28 +129,4 @@ export default class Footer {
                 </div>
                 `;
     }
-    // fetch() {
-    //     this.divprateleira.innerHTML = `
-    //     <h2>Você também pode gostar </h2>
-    //     <ul class="slick"></ul>
-    //     `;
-    //     const api = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`;
-    //     this.fetch(api)
-    //         .then((responsive) => Response.json())
-    //         .then(function(data){
-    //             return data.map(function(product){
-    //                 let cadaCard = document.createElement("li")
-    //                 cadaCard.setAttribute("class", card)
-    //                 cadaCard.innerHTML = `
-    //                 <img src="${product.itens[0].images[0].imageUrl}"></img>
-    //                     <p class="nome">${product.productName}</p>
-    //                 <div clas = "tamanhos">${product.itens.map((name) => {
-    //                         return `<a name = "tamanho" class = "tamanho">$(name.name)</a>`;
-    //                 }).join(**)} </div>;
-    //                 <button class="opção">Ver produtos</button>
-    //                 `;
-    //                 divprateleira.children[1].appendChild(cadaCard);
-    //             });
-    //         });
-    // }
 }