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

@@ -6,36 +6,9 @@ export default class Footer {
     }
 
     async init() {
-        this.list = [
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Azul Spike Amarração",
-                items: [34, 35, 36, 37, 38, "Rosa"],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Roxo Spike Amarração",
-                items: [34, 35, 36, 37, 38],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Verde Spike Amarração",
-                items: [34, 35, 36, 37, 38],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Jaqueta Masculina Thermoball Eco",
-                items: ["VERDE", "AZUL", "JAQUETA AZUL"],
-            },
-            {
-                image: "https://picsum.photos/242/242",
-                description: "Sandália Amarela Spike Amarração",
-                items: [34],
-            },
-        ];
-
         await this.selectors();
         // this.onUpdate();
+        this.list = await this.fetchApiData();
         this.renderPrateleira();
         this.items = document.querySelector(".footerCheckout__prateleira-container");
         this.renderItems();
@@ -64,6 +37,22 @@ export default class Footer {
         observer.observe(target, config);
     }
 
+    async fetchApiData() {
+        return fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then((resp) => resp.json())
+            .then((data) => {
+                const products = data.map((prod) => ({
+                    name: prod.productName,
+                    skus: prod.items.map((item) => item.name),
+                    image: prod.items[0].images[0].imageUrl,
+                }));
+
+                return products;
+            });
+    }
+
     renderPrateleira() {
         let itemsStructure = `
         <div class="footerCheckout__prateleira__title">
@@ -80,9 +69,8 @@ export default class Footer {
 
     renderItems() {
         let itemsCards = ``;
-
         this.list.forEach((item) => {
-            const sku = item.items.map((resp) => `<li>${resp}</li>`);
+            const sku = item.skus.map((resp) => `<li>${resp}</li>`);
             itemsCards += `
               <li class="items">
                 <figure>
@@ -92,7 +80,7 @@ export default class Footer {
                   />
                 </figure>
                 <div class="items__detail">
-                  <p>${item.description}</p>
+                  <p>${item.name}</p>
                 </div>
                 <div class="items__sku">
                   <ul>

checkout/src/arquivos/sass/lib/_slick.scss

@@ -114,14 +114,12 @@
 }
 
 .slick-prev {
-    // background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
-    //     no-repeat center center;
     z-index: 4;
     position: absolute;
     left: 1%;
     right: 0;
-    top: 40%;
-    bottom: 60%;
+    top: 44%;
+    bottom: 56%;
     width: 14px;
     height: 30px;
     color: $color-gray6;
@@ -131,8 +129,8 @@
     position: absolute;
     left: 97.5%;
     right: 0;
-    top: 40%;
-    bottom: 60%;
+    top: 44%;
+    bottom: 56%;
     width: 14px;
     height: 30px;
     color: $color-gray6;

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

@@ -98,6 +98,7 @@
                 padding: 5px;
                 background: $color-blue;
                 border-radius: 8px;
+                text-transform: uppercase;
 
                 @media (min-width: 1025px) and (max-width: 1107px) {
                     font-size: 11.5px;