feat(slick): add itens no slick

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

@@ -8,7 +8,8 @@ export default class Footer {
     async init() {
         await this.selectors();
         this.footerIcons();
-        // this.onUpdate();
+        this.addCarrossel();
+        this.onUpdate();
     }
 
     async selectors() {
@@ -17,10 +18,10 @@ export default class Footer {
         this.paymentIcons = await waitElement(".footerCheckout__stamps");
         this.developedByIcons = await waitElement(".footerCheckout__developedBy");
         this.checkoutVazio = await waitElement(".empty-cart-content");
+        // this.carrossel = await waitElement(".footerCheckout__prateleira");
     }
 
     footerIcons() {
-        console.log(this.paymentIcons);
         this.paymentIcons.innerHTML = `
             <li class="footerCheckout__payments">
                 <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
@@ -55,6 +56,8 @@ export default class Footer {
     }
 
     onUpdate() {
+        const title = document.querySelector("#cart-title");
+        const prateleira = document.querySelector(".footerCheckout__prateleira");
         //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
@@ -62,17 +65,93 @@ export default class Footer {
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                console.log(mutation.type);
+                if (window.vtexjs.checkout.orderForm.items.length == 0) {
+                    title.style.display = "none";
+                    prateleira.style.display = "none";
+                } else {
+                    prateleira.style.display = "block";
+                    title.style.display = "block";
+                }
             });
         });
 
         observer.observe(target, config);
     }
-    async addCarrossel() {
+
-        const elemento = await waitElement("#my-element");
+    addCarrossel() {
-        $(elemento).slick({
+        const carrossel = document.querySelector(".footerCheckout__prateleira");
+        const title = document.createElement("h2");
+        title.setAttribute("class", "prateleira-title");
+        title.innerText = "Você também pode gostar:";
+        carrossel.appendChild(title);
+        const ul = document.createElement("ul");
+        carrossel.appendChild(ul);
+
+        // const slick = document.querySelector(".slick-track");
+
+        // const ul = document.createElement("ul");
+        // carrossel.appendChild(ul);
+        fetch(
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+        )
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                data.map((item) => {
+                    const li = document.createElement("li");
+                    li.setAttribute("class", "product-card card");
+                    ul.appendChild(li);
+
+                    let categoriesValues = item.items
+                        .filter((categoryValue) => {
+                            if (categoryValue.name) {
+                                return true;
+                            }
+                            return false;
+                        })
+                        .map((categoryValue) => {
+                            return `<li class="product-category">${categoryValue.name}</li>`;
+                        })
+                        .toString()
+                        .replaceAll(",", "");
+
+                    li.innerHTML = `
+                        <img  src="${item.items[0].images[0].imageUrl}" alt="Imagem de ${item.productName}">
+                        <h4 class="product-name">${item.productName}</h4>
+                        <ul class="product-skus" id="catego">
+                            ${categoriesValues}
+                        </ul>
+                        <button class="product-btn" href="${item.link}">Ver produto</button>
+                    `;
+                    $(ul).slick({
+                        infinite: false,
                         slidesToShow: 4,
                         slidesToScroll: 1,
                     });
+                    $(ul).slick("unslick");
+                });
+                $(ul).slick({
+                    infinite: false,
+                    slidesToShow: 4,
+                    slidesToScroll: 1,
+                    responsive: [
+                        {
+                            breakpoint: 1025,
+                            settings: {
+                                slidesToShow: 3,
+                                slidesToScroll: 1,
+                            },
+                        },
+                        {
+                            breakpoint: 376,
+                            settings: {
+                                slidesToShow: 2,
+                                slidesToScroll: 1,
+                            },
+                        },
+                    ],
+                });
+            });
     }
 }

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

@@ -10,6 +10,7 @@ export default class Header {
         await this.selectors();
         this.progressBarHTML();
         await this.progressBarWorking();
+        // this.mutationOvserver();
         // await this.changeTexts();
     }
 
@@ -253,4 +254,29 @@ export default class Header {
     //     let texto = (chooseProductsBtn.innerHTML = "Continuar comprando");
     //     console.log(chooseProductsBtn);
     // }
+
+    mutationOvserver() {
+        // seleciona o nó alvo
+        var target = document.querySelector(".cart-items tbody");
+
+        // cria uma nova instância de observador
+        var observer = new MutationObserver(function (mutations) {
+            mutations.forEach(function (mutation) {
+                console.log(mutation.type);
+            });
+        });
+
+        // configuração do observador:
+        var config = {
+            childList: true,
+            attributes: true,
+            characterData: true,
+            subtree: true,
+            attributeOldValue: true,
+            characterDataOldValue: true,
+        };
+
+        // passar o nó alvo, bem como as opções de observação
+        observer.observe(target, config);
+    }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -2,4 +2,5 @@
 @import "./lib/slick";
 @import "./partials/header";
 @import "./partials/footer";
+@import "./partials/prateleira";
 @import "./checkout/checkout.scss";

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

@@ -278,7 +278,7 @@
                 display: block;
                 max-height: 38px;
                 margin: 0 !important;
-                padding: 8px 0;
+                padding: 0;
                 width: 38px;
                 color: $color-black;
                 box-shadow: none;

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

@@ -1,5 +1,6 @@
 .empty-cart {
     font-family: $font-family;
+    margin-bottom: 200px;
     &-content {
         color: $color-black2;
         text-align: center;
@@ -14,8 +15,13 @@
         font-size: 24px;
         font-weight: 700;
         line-height: 33px;
+        margin-top: 170px;
         margin-bottom: 32px;
         color: black;
+        @media (max-width: 1024px) {
+            font-size: 18px;
+            margin-bottom: 22px;
+        }
     }
 
     &-message {
@@ -38,7 +44,7 @@
             justify-content: center;
             padding: 0;
             margin: 0 auto;
-            width: 31.95%;
+            width: 327px;
             height: 48px;
             letter-spacing: 0.05em;
             color: black;
@@ -46,6 +52,10 @@
 
             transition: ease-in 0.22s all;
 
+            @media (max-width: 1024px) {
+                width: 250px;
+            }
+
             &:hover {
                 background: lighten($color-black2, 5);
             }

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

@@ -46,6 +46,9 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+        @media (max-width: 1024px) {
+            width: 96%;
+        }
     }
 }
 

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

@@ -70,7 +70,14 @@
         float: right;
     }
     img {
+        background-color: $color-gray15;
         display: block;
+        @media (max-width: 1024px) {
+            width: 94.83% !important;
+        }
+        @media (max-width: 375px) {
+            width: auto !important;
+        }
     }
     &.slick-loading img {
         display: none;
@@ -98,15 +105,20 @@
 }
 .slick-arrow {
     font-size: 0;
+    border: none;
     position: absolute;
+    bottom: 195px;
+    line-height: 30px !important;
 }
 .slick-prev {
-    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center
-        no-repeat center center;
+        center;
     z-index: 4;
     left: 10px;
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") no-repeat center
+        center;
     z-index: 4;
     right: 10px;
 }

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

@@ -14,6 +14,12 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            @media (max-width: 1024px) {
+                flex-direction: column;
+                align-items: unset;
+                margin-left: 8px;
+                width: 100%;
+            }
 
             &:before,
             &:after {

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

@@ -7,6 +7,16 @@
         width: 79.53125% !important;
         margin-top: 29.02px;
         margin-bottom: 29.86px;
+        @media (max-width: 1024px) {
+            width: auto !important;
+            margin: 16px;
+        }
+    }
+
+    #progressBar {
+        @media (max-width: 1024px) {
+            display: none;
+        }
     }
 
     &__wrapper {
@@ -46,7 +56,7 @@
                 .progress-bar-line-2 {
                     position: absolute;
                     height: 1px;
-                    background: black;
+                    background: $color-black;
                     bottom: 6px;
                 }
 
@@ -60,9 +70,11 @@
                     right: 38px;
                 }
 
-                .progress-bar-active {
+                #progress-bar-circle-1.active,
-                    background: black;
+                #progress-bar-circle-2.active,
-                    border: 1px solid black;
+                #progress-bar-circle-3.active {
+                    background: $color-black;
+                    border: 1px solid $color-black;
                 }
             }
         }
@@ -72,6 +84,11 @@
         img {
             height: 37.14px;
             width: 155.58px;
+            // @media (max-width: 1024px) {
+            //     max-width: none;
+            //     width: 122.44%;
+            //     height: auto;
+            // }
         }
     }
 

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

@@ -1 +1,87 @@
 /* _prateleira.scss */
+.footerCheckout__prateleira {
+    @media (max-width: 1024px) {
+        width: 97% !important;
+    }
+    @media (max-width: 375px) {
+        width: 92% !important;
+    }
+    .prateleira-title {
+        font-family: $font-family-secondary;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: $color-black;
+        text-align: center;
+        margin: 43px 0 20px 0;
+    }
+
+    .slick-initialized {
+        margin-bottom: 56px;
+    }
+
+    .slick-slide {
+        margin: 0 8px;
+    }
+
+    .slick-list {
+        margin: 0 -8px;
+    }
+
+    .product-name {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        color: $color-black;
+        margin: 20px 0 !important;
+    }
+
+    .product-btn {
+        height: 42px;
+        width: 100%;
+        border: none;
+        border-radius: 8px;
+        background-color: $color-blue2;
+        color: $color-white;
+        font-family: $font-family;
+        font-size: 13px;
+        font-weight: 700;
+        text-align: center;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        line-height: 18px;
+    }
+
+    .product-skus {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 20px;
+        gap: 5px;
+
+        @media (max-width: 375px) {
+            flex-wrap: wrap;
+            height: 60px;
+            margin-bottom: 37px;
+        }
+    }
+
+    .product-category {
+        background-color: $color-blue2;
+        border-radius: 8px;
+        border: none;
+        font-size: 13px;
+        font-weight: 700;
+        line-height: 18px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: $color-white;
+        font-family: $font-family;
+        padding: 5px;
+        height: fit-content;
+    }
+}

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -24,6 +24,7 @@ $color-gray11: #f4f5f7;
 $color-gray12: #b3b3b3;
 $color-gray13: #58595b;
 $color-gray14: #fbfbfb;
+$color-gray15: #eeee;
 
 $color-blue: #4267b2;
 $color-blue2: #00c8ff;