feat: adiciona prateleira com slick

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

@@ -8,8 +8,11 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
+        window.addEventListener("hashchange", this.addPrateleira.bind(this));
-        this.addPrateleira();
+
+        $(window).on("orderFormUpdated.vtex", this.addPrateleira.bind(this));
+
+        /*  this.addPrateleira(); */
         this.addStamps();
         this.addCarrossel();
     }
@@ -21,20 +24,7 @@ export default class Footer {
         this.prateleira = await waitElement(".footerCheckout__prateleira");
     }
 
-    onUpdate() {
+    async onUpdate() {}
-        //Função qeu 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
-        // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
-        let target = this.checkoutVazio;
-        let config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
-                console.log(mutation.type);
-            });
-        });
-
-        observer.observe(target, config);
-    }
     async addCarrossel(elemento) {
         $(elemento).slick({
             slidesToShow: 4,
@@ -48,36 +38,73 @@ export default class Footer {
             .then((response) => response.json())
             .then((response) => response)
             .catch((err) => console.error(err));
-        console.log(orderForm);
+        /* console.log(orderForm); */
         orderForm.forEach((element) => {
             const containerProduto = document.createElement("div");
-            containerProduto.innerHTML = `<div> <img src=${
+            containerProduto.classList.add("container-produto");
+            containerProduto.innerHTML = `<img class="product-img"  src=${
                 element.items[0].images[0].imageUrl
-            }  > <span>${element.productName} </span> <div class="btn-tamanho"> ${element.items.map(
+            }  > <span class="span-item-name">${
-                (item) => {
+                element.productName
-                    return `<button>${item.name}</button>`;
+            } </span> <div class="btn-tamanho"> ${element.items
-                }
+                .map((item) => {
-            )} </div>
+                    const name = item.name;
+                    /* console.log(item.name); */
+                    return `<button class="btn-item-name">${name}</button>`;
+                })
+                .join("")} </div>
 
-            <a href=${element.link}>Ver produto</a>
+            <a class="btn-item-link" href=${element.link}>Ver produto</a>
 
-            </div>`;
+           `;
 
             container.appendChild(containerProduto);
             element.items.forEach((item) => {
-                console.log(item);
+                /* console.log(item); */
             });
         });
     }
     async addPrateleira() {
         const slickContainer = document.createElement("div");
+        const url = window.location.hash;
+        const orderForm = await fetch("/api/checkout/pub/orderForm/")
+            .then((response) => response.json())
+            .then((response) => response)
+            .catch((err) => console.error(err));
+        console.log(orderForm.items);
+        if (orderForm.items.length > 0 && url === "#/cart") {
+            const titlePrateleira = document.createElement("h2");
+            titlePrateleira.classList.add("title-prateleira");
+            titlePrateleira.innerText = "Você também pode gostar:";
+            this.prateleira.appendChild(titlePrateleira);
+
             this.prateleira.appendChild(slickContainer);
             await this.apiProducts(slickContainer);
             await this.addCarrossel(slickContainer);
-        console.log(this.prateleira);
+        } else {
+            slickContainer.remove();
+            console.log(slickContainer);
+            const slickInitialize = document.querySelector(".slick-initialized");
+            slickInitialize.remove();
+            const titleh2 = document.querySelector(".title-prateleira");
+            titleh2.remove();
+        }
     }
 
     async addStamps() {
+        const stampsContainer3 = await waitElement(".footerCheckout__developedBy");
+        const query3 = document.querySelectorAll(".footerCheckout__developedBy");
+        const arr3 = Array.from(query3);
+        const cardList3 = ["logoVTEXM3Academy.png", "logoM3M3Academy.png"];
+        query3[0].innerHTML = "";
+        cardList3.forEach(function (item, index) {
+            query3[0].innerHTML += `<span>${
+                index === 0 ? "Powered By" : "Developed By"
+            }</span> <img style="width: 42px; height: 16px; " src=${
+                "https://agenciamagma.vteximg.com.br/arquivos/" + item
+            } alt="">`;
+        });
+
         const stampsContainer2 = await waitElement(".footerCheckout__vtexpci");
         const query2 = document.querySelectorAll(".footerCheckout__vtexpci");
         const arr2 = Array.from(query2);
@@ -90,7 +117,6 @@ export default class Footer {
         const stampsContainer = await waitElement(".footerCheckout__payments");
         const query = document.querySelectorAll(".footerCheckout__payments");
         const arr = Array.from(query);
-        console.log(arr);
 
         const cardList = [
             "masterCardM3Academy.png",

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

@@ -40,6 +40,7 @@
 }
 
 .slick-track {
+    margin-bottom: 56px;
     position: relative;
     left: 0;
     top: 0;
@@ -101,14 +102,24 @@
     position: absolute;
 }
 .slick-prev {
+    width: 14px;
+    height: 29px;
+    border: none;
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     z-index: 4;
-    left: 10px;
+    left: 12px;
+    bottom: 228px;
 }
 .slick-next {
+    width: 14px;
+    height: 29px;
+    border: none;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
     z-index: 4;
-    right: 10px;
+    right: 12px;
+    bottom: 228px;
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -1,5 +1,7 @@
 /* _prateleira.scss */
-.prateleira-title {
+.title-prateleira {
+    color: black;
+    margin: 20px 0 20px;
     text-align: center;
     font-family: "Tenor Sans";
     font-style: normal;
@@ -7,3 +9,70 @@
     font-size: 24px;
     line-height: 38px;
 }
+
+.btn-item-name {
+    border: none;
+    color: #ffffff;
+    background: #00c8ff;
+    border-radius: 8px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    text-transform: uppercase;
+}
+
+.btn-item-link {
+    padding: 12px 75px;
+    color: #ffffff;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    border-radius: 8px;
+    background-color: #00c8ff;
+    text-transform: uppercase;
+}
+
+.btn-tamanho {
+    gap: 5px;
+    display: flex;
+    width: 242px;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.span-item-name {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+}
+
+.span-item-name {
+    margin: 20px 0 20px 0;
+    text-align: center;
+    width: 242px;
+    /* margin: 20px 28px; */
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    color: #000000;
+}
+
+/* .bora {
+    margin: 50px;
+}
+ */
+
+.product-img {
+    width: 242px;
+}
+
+.container-produto {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}