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

@@ -6,9 +6,16 @@ export default class Footer {
     }
 
     async init() {
+        this.list = await this.apiRequest();
         await this.selectors();
         this.footerIcons();
-        // this.onUpdate();
+        this.onUpdate();
+        this.createContainerShelf();
+        this.shelfItem = await waitElement(".footerCheckout__shelfList");
+        await this.createShelf();
+        await this.addCarrossel();
+        console.log(this.list);
+        // await this.createShelf();
     }
 
     async selectors() {
@@ -16,6 +23,7 @@ export default class Footer {
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
         this.CredicardIcon = await waitElement(".footerCheckout__payments");
         this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci");
+        this.shelf = await waitElement(".footerCheckout__prateleira");
         this.checkoutVazio = await waitElement(".empty-cart-content");
     }
 
@@ -27,18 +35,77 @@ export default class Footer {
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                // console.log(mutation.type);
+                if (
+                    target.attributes.style.nodeValue == "display: none;" &&
+                    window.location.hash == "#/cart"
+                ) {
+                    // const shelf = document.querySelector(".footerCheckout__prateleira");
+                    // this.createShelf();
+                    // console.log("Olá eu sou uma prateleira");
+                } else {
+                    console.log("Fui embora :(!");
+                }
             });
         });
 
         observer.observe(target, config);
     }
 
+    createContainerShelf() {
+        if (this.shelf) {
+            this.shelf.innerHTML = `
+                <div class="footerCheckout__prateleira-title">
+                    <h2>Você também pode gostar:</h2>
+                </div>
+                <ul class="footerCheckout__shelfList"></ul>
+            `;
+        }
+    }
+
+    async createShelf() {
+        let structure = "";
+
+        this.list.forEach((resp) => {
+            const sku = resp.skus.map((item) => `<li>${item}</li>`);
+
+            structure += `
+                <li class="footerCheckout__shelf-card">
+                    <figure><img src="${resp.img}"/></figure>
+                    <figcaption>${resp.name}</figcaption>
+                    <div class="sku-list"><ul class="skus">${sku}</ul></div>
+                    <button type="button"><a href="${resp.link}">ver produtos</a></button>
+                </li>
+                `;
+        });
+
+        this.shelfItem.innerHTML = structure;
+        console.log("ioaioaioiaoioa");
+    }
+
+    async apiRequest() {
+        const api =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        return fetch(api)
+            .then((response) => response.json())
+            .then((data) => {
+                const objInfo = data.map((res) => ({
+                    img: res.items[0].images[0].imageUrl,
+                    name: res.productName,
+                    skus: res.items.map((item) => item.name),
+                    link: res.link,
+                }));
+                return objInfo;
+            });
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".footerCheckout__shelfList");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: false,
+            arrows: true,
         });
     }
 
@@ -62,6 +129,7 @@ export default class Footer {
         }
 
         const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy");
+        // console.log(footerDevelopedBy);
 
         if (footerDevelopedBy) {
             const vtexIcon = footerDevelopedBy[0].children[0].children[0];
@@ -76,7 +144,6 @@ export default class Footer {
                 <span>Developed By</span>
                 <figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" title="M3" /></figure>
             `;
-            console.log(m3Icon);
         }
     }
 }

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

@@ -3,6 +3,24 @@
     border-top: none;
     color: $color-gray2;
 
+    &__prateleira {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__prateleira-title {
+        h2 {
+            font-family: $font-family-secundary;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 38px;
+            color: $color-black2;
+        }
+    }
+
     .container {
         width: 94.9734%;
         display: flex;
@@ -208,3 +226,13 @@
         }
     }
 }
+
+.slick-slide {
+    &__shelf-card {
+        height: 390px;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+}