feat(prateleira): Adição da prateleira por meio da Api

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

@@ -11,8 +11,9 @@ export default class Footer {
         // await this.hideCartTitle();
         this.addCreditCards();
         this.addCredits();
+        this.createPrateleira();
+        await this.addCarrossel();
         // this.changeButtonText();
-        console.log("Dentro do Footer");
     }
 
     async selectors() {
@@ -24,6 +25,7 @@ export default class Footer {
 
         this.creditCardSection = await waitElement(".footerCheckout__stamps");
         this.creditsSection = await waitElement(".footerCheckout__developedBy");
+        this.prateleira = await waitElement(".footerCheckout__prateleira");
         console.log(this.creditCardSection);
         this.cartChooseProducts = await waitElement("a#cart-choose-products");
     }
@@ -132,6 +134,52 @@ export default class Footer {
         </div>`;
     }
 
+    createPrateleira() {
+        fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then(function () {
+                console.log("Consumindo API");
+            })
+            .catch(function () {});
+
+        fetch(
+            `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`
+        )
+            .then((response) => response.json())
+            .then((data) => {
+                console.log(data[0].items[0].images[0].imageUrl);
+                let content = "";
+
+                for (let i = 0; i < data.length; i++) {
+                    content += `
+                <div class="card-item">
+                            <figure class="item-image">
+                                <img src="${data[i].items[0].images[0].imageUrl}" alt="" />
+                            </figure>
+
+                            <div class="item-name">
+                                <p>${data[i].productName}</p>
+                            </div>
+
+                            <div class="item-sizes">
+                                <div class="item-size-name">
+                                    <p>${data[i].items[0].name}</p>
+                                </div>
+                            </div>
+
+                            <a href="${data[i].items[0].link}" class="item-link">
+                                <div>VER PRODUTO</div>
+                            </a>
+                        </div>
+                    `;
+                }
+
+                this.prateleira.innerHTML = content;
+                console.log(content);
+            });
+    }
+
     onUpdate() {
         // Função que fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
@@ -150,9 +198,9 @@ export default class Footer {
     }
 
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__prateleira");
         $(elemento).slick({
-            slidesToShow: 4,
+            slidesToShow: 2,
             slidesToScroll: 1,
         });
     }

checkout/src/arquivos/sass/checkout.scss

@@ -2,4 +2,5 @@
 @import "./lib/slick";
 @import "./partials/header";
 @import "./partials/footer";
+@import "./partials/prateleira";
 @import "./checkout/checkout.scss";

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

@@ -1,13 +1,14 @@
 /* _footer.scss */
 
 .footerCheckout {
-    border-top: none;
     color: $color-gray2;
-    // position: absolute;
     width: 100%;
     bottom: 0;
 
     &__wrapper {
+        border-top: 1px solid black;
+        padding-top: 16px;
+        padding-bottom: 16px;
         align-items: center;
         display: flex;
         justify-content: space-between;

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

@@ -1 +1,70 @@
 /* _prateleira.scss */
+
+.footerCheckout__prateleira {
+    margin: 43px 132px;
+    display: flex;
+    justify-content: center;
+    color: #000000;
+
+    .prateleira-title {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+    }
+    .card-item {
+        margin-right: 16px;
+        width: 242px;
+
+        .item-image {
+            width: 242px;
+            height: 242px;
+            margin: 0;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .item-name {
+            margin-top: 20px;
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 18px;
+            text-align: center;
+        }
+
+        .item-sizes {
+            .item-size-name {
+                margin-top: 20px;
+                align-items: center;
+                text-align: center;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                color: white;
+                padding: 6px;
+                background-color: #00c8ff;
+                width: auto;
+            }
+        }
+
+        .item-link {
+            margin-top: 20px;
+            display: block;
+            justify-content: center;
+            background-color: #00c8ff;
+            color: white;
+            text-decoration: none;
+            width: 100%;
+            padding: 12px 0px;
+
+            display: flex;
+            align-items: center;
+            text-align: center;
+            font-weight: 700;
+            font-size: 13px;
+            line-height: 18px;
+        }
+    }
+}

checkout/src/template-checkout/checkout-header.html

@@ -20,6 +20,28 @@
                 />
                 <span>Compra segura</span>
             </div>
+
+            <div class="suggested-items">
+                <div class="card-item">
+                    <figure class="item-image">
+                        <img src="${data[i].items[0].images[0].imageUrl}" alt="" />
+                    </figure>
+
+                    <div class="item-name">
+                        <p>${data[i].productName}</p>
+                    </div>
+
+                    <div class="item-sizes">
+                        <div class="item-size-name">
+                            <p></p>
+                        </div>
+                    </div>
+
+                    <a href="" class="item-link">
+                        <div>VER PRODUTO</div>
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
 </header>