feat(slick): Torna slick responsivo mobile e desktop

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

@@ -10,12 +10,16 @@ export default class Footer {
         await this.selectors();
         this.footerIcons();
         this.onUpdate();
-        this.createContainerShelf();
+        if (window.location.hash === "#/cart") {
+            await this.createContainerShelf();
+        }
+        if (window.location.hash !== "#/cart") {
+            await this.removeShelf();
+        }
         this.shelfItem = await waitElement(".footerCheckout__shelfList");
         await this.createShelf();
-        await this.addCarrossel();
+        this.addCarrossel();
         console.log(this.list);
-        // await this.createShelf();
     }
 
     async selectors() {
@@ -35,16 +39,15 @@ export default class Footer {
         let config = { childList: true, attributes: true };
         let observer = new MutationObserver((mutations) => {
             mutations.forEach(function (mutation) {
-                // console.log(mutation.type);
+                console.log(mutation.type);
-                if (
+                console.log(mutation);
-                    target.attributes.style.nodeValue == "display: none;" &&
+
-                    window.location.hash == "#/cart"
+                const footer = document.querySelector(".footerCheckout");
-                ) {
+                console.log(footer);
-                    // const shelf = document.querySelector(".footerCheckout__prateleira");
+                if (target.attributes.style.nodeValue == "display: none;") {
-                    // this.createShelf();
+                    footer.children[0].classList.remove("ativado");
-                    // console.log("Olá eu sou uma prateleira");
                 } else {
-                    console.log("Fui embora :(!");
+                    footer.children[0].classList.add("ativado");
                 }
             });
         });
@@ -52,17 +55,25 @@ export default class Footer {
         observer.observe(target, config);
     }
 
-    createContainerShelf() {
+    async createContainerShelf() {
         if (this.shelf) {
             this.shelf.innerHTML = `
                 <div class="footerCheckout__prateleira-title">
                     <h2>Você também pode gostar:</h2>
                 </div>
+
                 <ul class="footerCheckout__shelfList"></ul>
+
             `;
         }
     }
 
+    async removeShelf() {
+        if (this.shelf) {
+            this.shelf.innerHTML = "";
+        }
+    }
+
     async createShelf() {
         let structure = "";
 
@@ -74,13 +85,13 @@ export default class Footer {
                     <figure><img src="${resp.img}"/></figure>
                     <figcaption>${resp.name}</figcaption>
                     <div class="sku-list"><ul class="skus">${sku}</ul></div>
-                    <button type="button"><a href="${resp.link}">ver produtos</a></button>
+                    <button class="button-list" type="button"><a href="${resp.link}">ver produtos</a></button>
                 </li>
                 `;
         });
 
         this.shelfItem.innerHTML = structure;
-        console.log("ioaioaioiaoioa");
+        // console.log("ioaioaioiaoioa");
     }
 
     async apiRequest() {
@@ -106,6 +117,37 @@ export default class Footer {
             slidesToScroll: 1,
             infinite: false,
             arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                        infinite: false,
+                        arrows: true,
+                    },
+                },
+
+                {
+                    breakpoint: 992,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                        infinite: false,
+                        arrows: true,
+                    },
+                },
+
+                {
+                    breakpoint: 374,
+                    settings: {
+                        slidesToShow: 1,
+                        slidesToScroll: 1,
+                        infinite: false,
+                        arrows: true,
+                    },
+                },
+            ],
         });
     }
 

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

@@ -63,7 +63,10 @@
 }
 .slick-slide {
     float: left;
-    height: 100%;
+    width: 100%;
+    height: auto;
+    margin-left: 8px;
+    margin-right: 8px;
     min-height: 1px;
     outline: none;
     [dir="rtl"] & {
@@ -71,6 +74,7 @@
     }
     img {
         display: block;
+        width: 100%;
     }
     &.slick-loading img {
         display: none;
@@ -99,16 +103,41 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    outline: 0;
+    border: 0;
 }
 .slick-prev {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
         no-repeat center center;
     z-index: 4;
-    left: 10px;
+    bottom: 50%;
+    left: 20px;
+    cursor: pointer;
+
+    @include mq(xxl, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+            no-repeat center;
+        bottom: 50%;
+        left: -949px;
+        z-index: 5;
+        width: 100%;
+    }
 }
 .slick-next {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+        no-repeat center center;
     z-index: 4;
-    right: 10px;
+    bottom: 50%;
+    right: 20px;
+    cursor: pointer;
+
+    @include mq(xxl, min) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+            no-repeat center;
+        z-index: 5;
+        right: -910px;
+        width: 100%;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -3,24 +3,6 @@
     border-top: none;
     color: $color-gray2;
 
-    &__prateleira {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &__prateleira-title {
-        h2 {
-            font-family: $font-family-secundary;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 24px;
-            line-height: 38px;
-            color: $color-black2;
-        }
-    }
-
     .container {
         width: 94.9734%;
         display: flex;
@@ -41,6 +23,7 @@
     }
 
     &__wrapper {
+        margin-top: 68px !important;
         align-items: center;
         display: flex;
         flex-direction: column;
@@ -225,14 +208,143 @@
             }
         }
     }
+
+    &__prateleira {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
     }
 
-.slick-slide {
+    &__prateleira-title {
-    &__shelf-card {
+        margin-bottom: 20px;
-        height: 390px;
+    }
+
+    &__shelfList {
+        width: 1016px;
+
+        @include mq(pg, max) {
+            width: 991px;
+        }
+
+        @include mq(lg, max) {
+            width: 760px;
+        }
+
+        @include mq(md, max) {
+            width: 500px;
+        }
+
+        @include mq(sm, max) {
+            width: 344px;
+        }
+
+        @include mq(csin, max) {
+            width: 240px;
+        }
+
+        @include mq(xxl, min) {
+            width: 1994.07px;
         }
 
         ul {
+            display: flex;
+            justify-content: center;
+            margin: 0;
+            margin: 0 0 20px;
             list-style-type: none;
+            // font-size: 0;
+            #text {
+                font-size: 0;
+            }
+
+            li {
+                background: $color-blue2;
+                border-radius: 8px;
+                padding: 5px;
+                color: $color-white;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                font-family: $font-family;
+                text-transform: uppercase;
+
+                @include mq(xxl, min) {
+                    font-size: 26px;
+                    line-height: 35px;
+                }
+            }
+        }
+
+        figure {
+            margin: 0;
+        }
+
+        figcaption {
+            margin: 20px 0;
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 18px;
+            text-align: center;
+            color: $color-black2;
+            font-family: $font-family;
+
+            @include mq(xxl, min) {
+                font-weight: 400;
+                font-size: 26px;
+                line-height: 35px;
+            }
+        }
+
+        .button-list {
+            width: 100%;
+            padding: 12px 72px;
+            border-radius: 8px;
+            background: $color-blue2;
+            outline: 0;
+            border: 0;
+
+            a {
+                color: $color-white;
+                text-transform: uppercase;
+                font-weight: 700;
+                font-size: 13px;
+                line-height: 18px;
+                white-space: nowrap;
+                font-family: $font-family;
+
+                @include mq(xxl, min) {
+                    font-size: 26px;
+                    line-height: 35px;
+                }
+            }
+        }
+
+        button {
+            display: flex;
+            justify-content: center;
+            margin: 0;
+        }
+    }
+
+    &__prateleira-title {
+        h2 {
+            font-family: $font-family-secundary;
+            font-style: normal;
+            text-align: center;
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 38px;
+            color: $color-black2;
+
+            @include mq(xxl, min) {
+                font-size: 48px;
+                line-height: 76px;
+            }
+        }
+    }
+
+    .ativado {
+        display: none !important;
     }
 }

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

@@ -17,6 +17,7 @@ $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
 
 $color-blue: #4267b2;
+$color-blue2: #00c8ff;
 
 $color-green: #4caf50;
 
@@ -25,6 +26,7 @@ $grid-breakpoints: (
     xs: 0,
     csun: 285,
     csyn: 355,
+    csin: 370,
     cstm: 400,
     sm: 576px,
     md: 768px,