feat: Finalização das alterações pagina 1 cart

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

@@ -7,47 +7,100 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        await this.addImagesFooter();
+        await this.addHTMLFooter();
         await this.onUpdate();
     }
 
     async selectors() {
         //Para verificar se o carrinho está vazio e remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
-        this.checkoutVazio = await waitElement(".empty-cart-content");
+        // this.checkoutVazio = await waitElement(".empty-cart-content");
-        this.checkoutPayments = await waitElement(".footerCheckout__stamps");
+        this.checkoutVazio = document.querySelector(".empty-cart-content");
-        this.developBy = await waitElement(".footerCheckout__developedBy");
+        this.checkoutPayments = document.querySelector(".footerCheckout__stamps");
-        this.titleMyCart = await waitElement("#cart-title");
+        this.developBy = document.querySelector(".footerCheckout__developedBy");
+        this.titleMyCart = document.querySelector("#cart-title");
+        // this.pratileira = await waitElement(".footerCheckout__prateleira");
+        this.pratileira = document.querySelector(".footerCheckout__prateleira");
     }
 
     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 sliderVisible = Boolean;
         let target = this.checkoutVazio;
         let titleCart = this.titleMyCart;
+        let pratileira = this.pratileira;
         let config = { childList: true, attributes: true };
-        let observer = new MutationObserver((mutations) => {
+        let observer = new MutationObserver(mCallback);
-            mutations.forEach(function (mutation) {
+
+        function mCallback(mutations) {
+            mutations.forEach((mutation) => {
                 if (target.style.display === "block") {
-                    titleCart.classList.add("cartTitleInvisible");
+                    titleCart.classList.add("elementInvisible");
+                    pratileira.classList.add("elementInvisible");
+                    sliderVisible = false;
+                    console.log("oioioi");
                 } else {
-                    titleCart.classList.remove("cartTitleInvisible");
+                    titleCart.classList.remove("elementInvisible");
+                    pratileira.classList.remove("elementInvisible");
+                    sliderVisible = true;
                 }
             });
-        });
+        }
 
         observer.observe(target, config);
+
+        if (sliderVisible) {
+            if (target.style.display === "none") {
+                await this.api();
             }
+        }
+    }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = document.querySelector(".sliderPratileira");
+
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            infinite: true,
+            arrows: true,
         });
     }
 
-    async addImagesFooter() {
+    async api() {
+        const url =
+            "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319";
+        const dados = await fetch(url);
+        const dataApi = await dados.json();
+
+        this.pratileira.innerHTML = `
+        <p class="titlePratileira">Você também pode gostar</p>
+        <ul class="sliderPratileira">
+            ${dataApi.map((dataItem) => {
+                return `<li class="card-list-pratileira">
+                        <figure>
+                            <img class="image-card-pratileira" src="${
+                                dataItem.items[0].images[0].imageUrl
+                            }" alt="${dataItem.productName}" />
+                            <h4 class="title-item-pratileira">${dataItem.productName}</h4>
+                        </figure>
+                        <ol class="wrapper-list-variables">
+                            ${dataItem.items.map((variableItem) => {
+                                return `<li class="variable-pratileira">${variableItem.name}</li>`;
+                            })}
+                        </ol>
+                        <button class="btn-pratileira">Ver Produto</button>
+                    </li>`;
+            })}
+        </ul>
+        `;
+
+        this.addCarrossel();
+    }
+
+    async addHTMLFooter() {
         this.checkoutPayments.children[0].innerHTML = `
         <div class="footerCheckout__payments">
             <img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />

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

@@ -65,6 +65,6 @@
     margin: 0 !important;
 }
 
-.cartTitleInvisible {
+.elementInvisible {
     display: none !important;
 }

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

@@ -9,11 +9,9 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    border-top: 1px solid #000000;
-    margin: auto auto 0 auto;
-    padding: 16px 0;
 }
-footer .footerCheckout__prateleira,
+
 header {
     width: 100%;
     border-bottom: 1px solid #000000;

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

@@ -99,6 +99,9 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    border: 0;
+    width: 13.64px;
+    height: 29.47px;
 }
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
@@ -107,8 +110,10 @@
     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;
+    right: 18px;
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -1,6 +1,5 @@
 /* _footer.scss */
 .footerCheckout {
-    border-top: none;
     color: $color-gray2;
 
     &__wrapper {
@@ -13,8 +12,9 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            width: 100%;
+            width: 94.9734%;
-            margin: 0;
+            margin: auto auto 0 auto;
+            padding: 16px 0;
 
             &::before,
             &::after {
@@ -109,4 +109,116 @@
             height: 15.65px;
         }
     }
+
+    &__prateleira {
+        padding-bottom: 56px;
+        .titlePratileira {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 38px;
+            text-align: center;
+            color: $color-black-neutra;
+        }
+
+        .sliderPratileira {
+            width: 80%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+
+            .card-list-pratileira {
+                list-style-type: none;
+                min-width: 242px;
+                height: 390px;
+
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+
+                figure {
+                    width: 100%;
+                    margin: 0;
+                    .image-card-pratileira {
+                        width: 100%;
+                        height: 242px;
+                    }
+
+                    .title-item-pratileira {
+                        font-family: $font-family;
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 13px;
+                        line-height: 18px;
+
+                        text-align: center;
+                        color: $color-black-neutra;
+                        margin: 20px 0;
+                    }
+                }
+
+                .wrapper-list-variables {
+                    list-style-type: none;
+                    display: flex;
+                    justify-content: center;
+                    margin: 0;
+                    margin-bottom: 20px;
+
+                    .variable-pratileira {
+                        padding: 5px;
+                        margin-right: 5px;
+                        background: $color-blue-light;
+                        border-radius: 8px;
+                        color: $color-white;
+
+                        font-family: $font-family;
+                        font-style: normal;
+                        font-weight: 700;
+                        font-size: 13px;
+                        line-height: 18px;
+                        letter-spacing: 0.05em;
+                        text-transform: uppercase;
+                    }
+                }
+
+                .btn-pratileira {
+                    width: 100%;
+                    background: $color-blue-light;
+                    border: 0;
+                    border-radius: 8px;
+                    padding: 12px 0;
+
+                    font-family: $font-family;
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 13px;
+                    line-height: 18px;
+                    text-align: center;
+                    letter-spacing: 0.05em;
+                    text-transform: uppercase;
+                    color: $color-white;
+                }
+            }
+
+            font-size: 0;
+
+            .wrapper-list-variables {
+                .variable-pratileira {
+                    font-size: 13px;
+                }
+            }
+        }
+        .slick-track {
+            display: flex;
+            // left: 13.5%;
+            // width: 1016px;
+        }
+
+        .slick-slide {
+            margin-right: 16px;
+        }
+    }
 }

package-lock.json

@@ -45,6 +45,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -3484,6 +3485,8 @@
         },
         "checkout/node_modules/core-util-is": {
             "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
             "license": "MIT"
         },
         "checkout/node_modules/cosmiconfig": {
@@ -4844,6 +4847,8 @@
         },
         "checkout/node_modules/get-intrinsic": {
             "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+            "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
             "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.1",
@@ -6294,6 +6299,8 @@
         },
         "checkout/node_modules/micromatch": {
             "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+            "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
             "license": "MIT",
             "dependencies": {
                 "braces": "^3.0.2",
@@ -6305,6 +6312,8 @@
         },
         "checkout/node_modules/micromatch/node_modules/braces": {
             "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
             "license": "MIT",
             "dependencies": {
                 "fill-range": "^7.0.1"
@@ -19345,6 +19354,7 @@
                 "m3-utils": "^0.1.0",
                 "prettier": "^2.3.2",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4",
                 "webpack": "^5.51.1",
                 "webpack-merge": "^5.8.0"
@@ -21672,7 +21682,9 @@
                     }
                 },
                 "core-util-is": {
-                    "version": "1.0.3"
+                    "version": "1.0.3",
+                    "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+                    "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
                 },
                 "cosmiconfig": {
                     "version": "7.1.0",
@@ -22645,6 +22657,8 @@
                 },
                 "get-intrinsic": {
                     "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
+                    "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
                     "requires": {
                         "function-bind": "^1.1.1",
                         "has": "^1.0.3",
@@ -23679,6 +23693,8 @@
                 },
                 "micromatch": {
                     "version": "4.0.5",
+                    "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+                    "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
                     "requires": {
                         "braces": "^3.0.2",
                         "picomatch": "^2.3.1"
@@ -23686,6 +23702,8 @@
                     "dependencies": {
                         "braces": {
                             "version": "3.0.2",
+                            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+                            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
                             "requires": {
                                 "fill-range": "^7.0.1"
                             }