fix(footer): Slick funcionando

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

@@ -53,6 +53,7 @@ export default class Footer {
             this.onUpdate();
             if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
                 this.listaInfocards.style.display = "flex";
+                //this.slickOn();
             }
             if (window.location.hash != "#/cart") {
                 this.listaInfocards.style.display = "none";
@@ -66,12 +67,13 @@ export default class Footer {
         let target = this.checkoutVazio;
         let prateleiraItens = this.prateleiraInfoCards;
         let titulo = this.tituloCarrinho;
-        if (target.style.display == "none") {
+        if (target.style.display == "none" && window.location.hash == "#/cart") {
             titulo.style.display = "block";
             this.pegarInfo(
                 "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
             );
             prateleiraItens.style.display = "flex";
+            this.slickOn();
         } else {
             titulo.style.display = "none";
             prateleiraItens.style.display = "none";
@@ -86,10 +88,12 @@ export default class Footer {
             mutations.forEach(function (mutation) {
                 console.log("oi", mutation);
                 if (target.style.display != "none") {
+                    //this.slickOff();
                     prateleiraItens.style.display = "none";
                     titulo.style.display = "none";
                 } else {
                     prateleiraItens.style.display = "flex";
+                    //this.slickOn();
                     titulo.style.display = "block";
                 }
             });
@@ -156,6 +160,7 @@ export default class Footer {
         this.prateleiraInfoCards.innerHTML = `<h2 class="prateleira__subtitle">Você também pode gostar:</h2><ul class="infoCards">${this.estruturaInfoCard(
             Items
         )}</ul>`;
+        this.slickOn();
     }
 
     renderIconCreditCards() {
@@ -179,27 +184,40 @@ export default class Footer {
         <li><a href="https://vtex.com/br-pt/"><span>Developed By</span><img class="iconDeveLM3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/> </a></li>`;
     }
 
-    async trocaTitle() {
+    trocaTitle() {
         const tituloCart = document.querySelector(".empty-cart-title");
         tituloCart.innerHTML = `<h2>SEU CARRINHO ESTÁ VAZIO</h2>`;
         this.subTitleCart.innerHTML = `<p></p>`;
         this.buttonCart.innerHTML = `Continuar comprando`;
     }
-    async trocaFrete() {
+    trocaFrete() {
         this.freteCarrinho.innerHTML = `Frete`;
     }
-    async trocaUnidade() {
+    trocaUnidade() {
         this.unidadeCarrinho.innerHTML = `Unidade`;
     }
 
-    async trocaNotiCliente() {
+    trocaNotiCliente() {
         this.notiCliente.innerHTML = ``;
     }
     /*
     async trocaNoCep() {
         this.noCep.innerHTML = `Não sei meu código postal`;
     }*/
-    async trocaIdentificao() {
+
+    trocaIdentificao() {
         this.identificacaoUser.innerHTML = `Identificação`;
     }
+    //slick
+    slickOn() {
+        $(".infoCards").slick({
+            dots: false,
+            infinite: true,
+            slidesToShow: 3,
+            slidesToScroll: 1,
+        });
+    }
+    slickOff() {
+        $(".infoCards").slick("unslick");
+    }
 }

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

@@ -9,7 +9,7 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
 }
 footer .footerCheckout__prateleira,
@@ -74,6 +74,7 @@ body {
     font-size: 24px;
     line-height: 33px;
     margin: 40px 0 30px;
+    letter-spacing: 0.05em;
 
     text-transform: uppercase;
 

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

@@ -5,7 +5,7 @@
     width: 100% !important;
     display: flex;
     flex-direction: column;
-    border-top: 1px solid #000000;
+
     color: $color-gray2;
 
     &__wrapper {
@@ -13,14 +13,16 @@
         display: flex;
         justify-content: space-between;
         margin: 50px 0 0 0 !important;
+        border-top: 1px solid #000000;
     }
     .container {
+        padding: 27px 32px 24px 32px;
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: center;
+
-        margin: 0 !important;
+        //margin: 0 0 0 16px !important;
     }
     &__prateleira {
         //display: none;
@@ -125,7 +127,11 @@
         font-size: 10px;
         line-height: 12px;
         text-transform: capitalize;
-        max-width: 40%;
+        width: 269px;
+        margin-right: 45px;
+        &:span {
+            width: 269px;
+        }
 
         @include mq(md, max) {
             margin-bottom: 24px;
@@ -139,11 +145,16 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        margin-right: 166px;
         flex-direction: row;
-        margin: 0;
+        //margin-right: 189px;
+
+        ul {
+            margin: 0 0 0 0 !important;
+        }
         @include mq(md, max) {
             align-self: center;
-            margin-bottom: 12px;
+            //margin-bottom: 12px;
         }
 
         &__divider {
@@ -166,17 +177,18 @@
     }
 
     &__developedBy {
-        width: 18.6%;
+        width: 26.6%;
         align-items: center;
         display: flex;
         list-style-type: none;
         margin: 0;
 
         li:last-child {
-            margin-left: 16px;
+            margin-left: 5px;
         }
 
         a {
+            width: 120px;
             align-items: center;
             color: $color-gray2;
             display: flex;
@@ -191,10 +203,10 @@
                 margin-right: 8px;
             }
             .iconDevV {
-                width: 19.65%;
+                width: 30.65%;
             }
             .iconDeveLM3 {
-                width: 15.65%;
+                width: 30.65%;
             }
         }
     }

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

@@ -72,22 +72,28 @@
             }
             li .progress-bar-line-1 {
                 position: absolute;
-                left: 57%;
+                left: 58%;
                 transform: translateY(-50%);
                 bottom: 4px;
-                width: 212%;
+                width: 176px;
                 height: 1px;
                 border-top: 1px solid #000;
             }
             li .progress-bar-line-2 {
                 position: absolute;
-                right: 59%;
+                right: 60%;
                 transform: translateY(-50%);
-                bottom: 5px;
+                bottom: 4px;
-                width: 242%;
+                width: 171px;
                 height: 1px;
                 border-top: 1px solid #000;
             }
+            p {
+                font-family: $font-family-secundary;
+                font-weight: 400;
+                font-size: 12px;
+                color: $color-black-100;
+            }
         }
     }
     &__wrapper {