feat: Adiciona prateleira

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

@@ -3,17 +3,55 @@ import { waitElement } from "m3-utils";
 export default class Footer {
     constructor() {
         this.init();
+        this.requestShelf();
+        this.addCarrossel();
     }
 
     async init() {
         await this.selectors();
         // this.onUpdate();
+        this.requestShelf();
+        this.addCarrossel();
     }
 
     async selectors() {
+        this.itensShelf = await waitElement(".footerCheckout__prateleira");
+        // this.itensShelf = await waitElement(".empty-cart-content")
         //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.checkoutVazio = await waitElement(".container-cart", {
+
+        // });
+    }
+
+    requestShelf() {
+        let prateleira = this.itensShelf;
+        prateleira.innerHTML = `
+        <p class="footerChekout__prateleira-title">Você também pode gostar</p>
+        <ul class="carrosel-ul"></ul>
+        `;
+        const api =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        
+        fetch(api)
+            .then((response) => response.json())
+            .then(function (data) {
+                return data.map(function (item) {
+                    let li = document.createElement("li");
+                    li.setAttribute("id", item.productId);
+                    li.innerHTML = `
+                    <img src="${item.items[0].images[0].imageUrl}" alt="${item.productName}" />
+                    <p class="product-name">${item.productName}</p>
+                    <div class="product-variation">${item.items
+                        .map((name) => {
+                            return `<a name="product-variationvariation" class="product-variationvariation">${name.name}</a>`;
+                        })
+                        .join("")}</div>
+                    <button class="show-product">Ver produto</button>
+                    `;
+                    prateleira.children[1].appendChild(li);
+                });
+            });
     }
 
     onUpdate() {
@@ -30,11 +68,15 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".carrosel-ul");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            variableWidth: true,
+            infinite: false,
         });
     }
 }

checkout/src/arquivos/js/components/Header.js

@@ -70,7 +70,9 @@ export default class Header {
                 </div>
 
             </li>
-        </ul>`;
+        </ul>
+
+        `;
         }
 
         if (this.progressBar && window.innerWidth <= 1024) {

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -4,13 +4,19 @@
 		color: $color-black;
 		text-align: center;
 
+
 		@include mq(md, max) {
 			padding: 0 16px;
 		}
 	}
 
+    &-message {
+        display: none;
+    }
+
 	&-title {
 		font-size: 20px;
+        text-transform: uppercase;
 	}
 
 	&-links {

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -49,7 +49,17 @@ body {
     }
     .container-order-form,
     .container-cart {
-        width: 80%;
+        width: 100%;
+    }
+
+    .container-cart::after, .container-cart::before {
+
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+
+        border-bottom: 1px solid #000000;
+
     }
 }
 
@@ -66,6 +76,8 @@ body {
     color: $color-black !important;
 }
 
+
+
 #cart-title,
 #orderform-title {
     color: $color-gray2;
@@ -76,6 +88,8 @@ body {
     margin: 40px 0 30px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
+    opacity: 0;
+
 
     @include mq(md, max) {
         margin-left: 30px;

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

@@ -3,7 +3,7 @@
     .container {
         width: auto !important;
         #progressBar {
-            width:439px ;
+            width: 439px;
 
             ul {
                 list-style-type: none;
@@ -49,7 +49,7 @@
                 line-height: 28px;
                 color: #000000;
                 width: 39.9103%;
-                @media (min-width: 2500px){
+                @media (min-width: 2500px) {
                     font-size: 24px;
                 }
             }
@@ -95,13 +95,15 @@
                 height: 1px;
                 border-top: 1px solid #000000;
             }
-
         }
 
         .active {
             background: #000000;
         }
+
     }
+
+
     &__wrapper {
         align-items: center;
         display: flex;
@@ -132,7 +134,5 @@
             width: 12px;
             margin-right: 8px;
         }
-
-
     }
 }