feat(checkout-cart-fill): created carousel slider using slick and get datas from api

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

@@ -25,6 +25,7 @@ export default class Footer {
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
         this.checkoutContainer = await waitElement(".container-main");
+        this.self = await waitElement(".footerCheckout__prateleira");
     }
 
     innerToPayments() {
@@ -92,6 +93,15 @@ export default class Footer {
                 this.checkoutContainer.classList.add("container-cart-fill");
             }
 
+            if (
+                window.location.href.endsWith("#/cart") &&
+                this.checkoutContainer.classList.contains("container-cart-fill")
+            ) {
+                console.log("API");
+                this.innerToSelf();
+                this.addCarrossel();
+            }
+
             let target = this.checkoutEmpty;
             let config = { childList: true, attributes: true };
             let observer = new MutationObserver((mutations) => {
@@ -103,6 +113,14 @@ export default class Footer {
                             this.checkoutContainer.classList.add("container-cart-fill");
                         }
 
+                        if (
+                            window.location.href.endsWith("#/cart") &&
+                            this.checkoutContainer.classList.contains("container-cart-fill")
+                        ) {
+                            this.innerToSelf();
+                            this.addCarrossel();
+                        }
+
                         break;
                     }
                 }
@@ -111,11 +129,70 @@ export default class Footer {
             observer.observe(target, config);
         }
     }
-    async addCarrossel() {
-        const elemento = await waitElement("#my-element");
-        $(elemento).slick({
+
+    addCarrossel() {
+        $(this.self).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
         });
     }
+
+    async getProducts() {
+        let url = (name) => {
+            let domain = "https://m3academy.myvtex.com/";
+            return domain + name;
+        };
+
+        let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
+
+        let response = await API.then((res) => res.json());
+
+        return response;
+    }
+
+    async innerToSelf() {
+        let datas = await this.getProducts();
+
+        datas.forEach(() => {
+            $(this.self).slick("unslick");
+
+            this.createdCardsProducts(datas);
+
+            this.addCarrossel();
+        });
+    }
+
+    createdCardsProducts(data) {
+        let structure = "";
+
+        data.forEach((data) => {
+            structure += `<div>
+                <div>
+                    <figure>
+                        <img src="${data.items[0].images[0].imageUrl}" alt="">
+                    </figure>
+
+                    <h3>
+                        ${data.productName}
+                    </h3>
+                </div>
+
+                <div>
+                    ${data.items.reduce((acc, item) => {
+                        return (acc += `<div>
+                            <span>${item.name}</span>
+                        </div>`);
+                    }, "")}
+                </div>
+
+                <a href="${data.link}">
+                    <span>
+                        Ver Produto
+                    </span>
+                </a>
+            </div>`;
+        });
+
+        this.self.innerHTML = structure.trim();
+    }
 }