From 318c3efcb46387002849f9da0885738322f0d3a3 Mon Sep 17 00:00:00 2001
From: Nicolly Vieira <nicollyvscosta@gmail.com>
Date: Tue, 13 Dec 2022 15:19:17 -0300
Subject: [PATCH] feat: Cria a prateleira

---
 checkout/src/arquivos/js/components/Footer.js | 68 ++++++++++++++++++-
 .../src/arquivos/sass/checkout/_checkout.scss |  2 +-
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..7e1c59a 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -6,13 +6,17 @@ export default class Footer {
     }
 
     async init() {
+        this.productList = [];
+        this.carregaProdutos();
         await this.selectors();
         // this.onUpdate();
+        await this.criaProduto();
     }
 
     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.prateleira = await waitElement(".footerCheckout__prateleira");
         this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
@@ -30,11 +34,73 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__prateleira");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
         });
     }
+
+    async criaProduto() {
+        let estrutura = ""
+        let estruturaSkus = ""
+        if(this.prateleira) {
+            console.log(this.productList, "Cria HTMl");
+            this.productList.forEach((product) => {
+                estruturaSkus = ""
+                product.skus.forEach(name => {
+                    estruturaSkus += `<span class="prateleira__name">${name}</span>`
+                })
+
+
+                console.log(product.skus);
+
+                estrutura +=`
+                <div class="prateleira__container">
+                <figure class="prateleira__image-wrapper">
+                <img src=${product.image}>
+                <div class="prateleira__content">
+                <p class="prateleira__title">${product.productName}</p>
+                <div class="prateleira__name-wrapper">
+                ${estruturaSkus}
+                </div>
+                <a class="prateleira__button" href=${product.link}>Ver Produto</a>
+                </div>
+                </figure>
+                </div>`
+            })
+            this.prateleira.innerHTML = estrutura;
+        }
+
+        this.addCarrossel();
+
+    }
+
+    carregaProdutos() {
+        fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+            .then(response => response.json())
+            .then(data => {
+                data.forEach(item => {
+                    const arraySKU = [];
+                    item.items.forEach(sku => {
+                        arraySKU.push(sku.name);
+                    })
+
+                    const product = {
+                        image: item.items[0].images[0].imageUrl,
+                        productName: item.productName,
+                        link: item.link,
+                        skus: arraySKU
+                    };
+
+                    this.productList.push(product);
+                })
+                console.log(this.productList, "Carrega Lista");
+            })
+            .catch(err => log(err));
+    }
+
+
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..1fa3253 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -12,7 +12,7 @@ footer .footerCheckout__wrapper {
     width: 94.9734%;
     margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
+footer .prateleira,
 header {
     width: 79.53125%;
     margin: 0 auto;