From 069ff9e7ce35fb0530fdd96b9dfdb35a1fe83170 Mon Sep 17 00:00:00 2001
From: Victor Souza <victorsouza11@gmail.com>
Date: Thu, 15 Dec 2022 15:09:24 -0300
Subject: [PATCH] feat(footer):Criando footer

---
 checkout/src/arquivos/js/components/Footer.js | 67 ++++++++++++++-
 checkout/src/arquivos/js/components/Header.js |  1 -
 checkout/src/arquivos/sass/checkout.scss      |  2 +
 .../arquivos/sass/partials/_prateleira.scss   | 85 +++++++++++++++++++
 .../template-checkout/checkout-footer.html    |  1 +
 5 files changed, 152 insertions(+), 4 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..d8f8193 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,11 +8,16 @@ export default class Footer {
     async init() {
         await this.selectors();
         // this.onUpdate();
+        this.addProductShelf();
+        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.footerShelf = await waitElement(".footerCheckout__prateleira");
+        this.footerAddress = await waitElement("footerCheckout__address");
+        this.footerStamps = await waitElement(".footerCheckout__stamps");
+        this.footerCheckoutPayment = await waitElement("footerCheckout__payments");
+        this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy");
         this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
@@ -30,11 +35,67 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
+    addProductShelf() {
+        const createNode = (element) => {
+            return document.createElement(element);
+        };
+
+        // let image = this.footerStamps;
+        let shelf = this.footerShelf;
+        shelf.innerHTML = `
+
+        <h2>Você também pode gostar</h2>
+        <ul class="container-carrousel-item"></ul>
+        `;
+
+        const url =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+
+        fetch(url)
+            .then((resp) => resp.json())
+            .then(function (data) {
+                console.log(data);
+                return data.map(function (product) {
+                    let li = createNode("li");
+                    li.setAttribute("id", product.productId);
+                    li.setAttribute("class", "card");
+                    li.innerHTML = `
+                    <figure>
+                    <img  class="image-card"src="${product.items[0].images[0].imageUrl}" alt=""/>
+                    <h2 class="title-card">${product.productName}</h2>
+                    </figure>
+                    <div class="footer-card">
+                    ${product.items.map((size) => {
+                        return `<label class="sku" name="size">${size.name}</label>
+                        <input name="size" type="radio" style="display:none">
+                       `;
+                    })}
+                    </div>
+                    <div class="button-div">
+                    <button class="button-card">Ver Produto</button>
+                    </div>
+
+                    `;
+
+                    shelf.children[1].appendChild(li);
+                });
+            });
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carrousel-item");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
         });
     }
 }
+
+// let img = createNode("img");
+// let span = createNode("span");
+// img.src = `${produto.items[0].images[0].images}`
+// span.innerHTML = `${product.name.first} ${product.name.last}`;
+// append(li, img);
+// append(li, span);
+// append(div, li);
diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index 0ff3caf..5a93efb 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -8,7 +8,6 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        // console.log(this.item);
         this.progressBarHtml();
         this.progressBarProgress();
         window.addEventListener("hashchange", () => {
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index 771070c..a6d143a 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -2,4 +2,6 @@
 @import "./lib/slick";
 @import "./partials/header";
 @import "./partials/footer";
+@import "./partials/prateleira.scss";
 @import "./checkout/checkout.scss";
+
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 13f8def..68e09ff 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -1 +1,86 @@
 /* _prateleira.scss */
+.container-carrousel-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.card {
+  width: 242px;
+  height: 390px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 54px;
+}
+
+.title-card {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: center;
+  color: #000000;
+  margin-bottom: 20px;
+}
+
+.footer-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center ;
+  padding: 0 20px 20px;
+}
+
+
+.button-card {
+  width:242px;
+  height:42px;
+  background: #00C8FF;
+  border-radius: 8px;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  padding: 12px 0;
+}
+
+.button-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-card {
+  width: 242px;
+  height: 242px;
+}
+
+img {
+  height: 0;
+  max-width: 242px;
+  margin-bottom: 20px;
+}
+.sku {
+  width: 26px;
+  height: 28px;
+  background: #00C8FF;
+  border-radius: 8px;
+  padding: 5px;
+  color: #FFFFFF;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: center;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+// .sku:nth-child(10) {
+//   width: 80px;
+//   height: 28px;
+// }
diff --git a/checkout/src/template-checkout/checkout-footer.html b/checkout/src/template-checkout/checkout-footer.html
index 6246210..2cf5bfa 100644
--- a/checkout/src/template-checkout/checkout-footer.html
+++ b/checkout/src/template-checkout/checkout-footer.html
@@ -36,3 +36,4 @@
         </ul>
     </div>
 </footer>
+