feat: Cria e estiliza o footer para todos os tamanhos

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

@@ -11,9 +11,9 @@ export default class Footer {
         await this.selectors();
         await this.criaStamps();
         await this.criaDevelopedBy();
-
+        // this.verificaListaDeProdutos();
-        // this.onUpdate();
+        this.verificaListaDeProdutos();
-        // await this.criaProduto();
+        this.onUpdate();
     }
 
     async selectors() {
@@ -32,26 +32,55 @@ export default class Footer {
         // 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 config = { attributes: true, attributeOldValue: true, attributeFilter: ["style"] };
+
+        let changeAttrName;
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            console.log(mutations);
-                console.log(mutation.type);
+            mutations.forEach((mutation) => {
+                changeAttrName = mutation.target.style;
+                if (changeAttrName.display == "block") {
+                    this.prateleira.style.display = "none";
+                } else if (changeAttrName.display == "none") {
+                    this.prateleira.style.display = "block";
+                }
             });
         });
 
+        window.addEventListener("hashchange", () => {
+            if (window.location.hash == "#/cart") {
+                this.prateleira.style.display = "block";
+            } else {
+                this.prateleira.style.display = "none";
+            }
+        });
+
         observer.observe(target, config);
     }
 
     async addCarrossel() {
-        const elemento = await waitElement(".footerCheckout__prateleira");
+        const prateleiraSlick = await waitElement(".prateleira");
-        $(elemento).slick({
+        $(prateleiraSlick).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
-            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2
+                    }
+                }
+            ],
         });
     }
 
-    async criaProduto() {
+    async criaPrateleira() {
         let estrutura = "";
         let estruturaSkus = "";
         if (this.prateleira) {
@@ -62,23 +91,39 @@ export default class Footer {
                 });
 
                 estrutura += `
+
                 <div class="prateleira__container">
                 <figure class="prateleira__image-wrapper">
                 <img src=${product.image}>
+                </figure>
                 <div class="prateleira__content">
                 <p class="prateleira__title">${product.productName}</p>
                 <div class="prateleira__name-wrapper">
                 ${estruturaSkus}
                 </div>
-                <a class="prateleira__button" href=${product.link}>Ver Produto</a>
+                <button class="prateleira__button">
+                <a href=${product.link}>Ver Produto</a>
+                </button>
                 </div>
-                </figure>
+
-                </div>`;
+                </div>
+                `;
             });
-            this.prateleira.innerHTML = estrutura;
+            this.prateleira.innerHTML = `<h2 class="footerCheckout__prateleira-title">Você também pode gostar:</h2><div class="prateleira">${estrutura}</div>`;
+            this.addCarrossel();
+        }
     }
 
-        this.addCarrossel();
+    verificaListaDeProdutos() {
+        if (
+            window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" &&
+            (this.checkoutVazio.style.display = "none")
+        ) {
+            this.criaPrateleira();
+        }
+        if (this.checkoutVazio.style.display === "block") {
+            this.prateleira.syle.displat = "none";
+        }
     }
 
     carregaProdutos() {
@@ -138,7 +183,6 @@ export default class Footer {
     }
 
     async criaDevelopedBy() {
-
         if (this.developedBy) {
             this.developedBy.innerHTML = `
             <li>
@@ -154,7 +198,6 @@ export default class Footer {
                 </a>
                 </li>
             `;
-
         }
     }
 }

checkout/src/arquivos/sass/checkout.scss

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

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

@@ -26,7 +26,7 @@ footer .footerCheckout__wrapper {
     }
 }
 
-footer .prateleira,
+
 header {
     width: 79.53125%;
     margin: 0 auto;

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

@@ -40,6 +40,7 @@
 }
 
 .slick-track {
+    display: flex !important;
     position: relative;
     left: 0;
     top: 0;
@@ -63,9 +64,14 @@
 }
 .slick-slide {
     float: left;
-    height: 100%;
+    height: auto;
     min-height: 1px;
     outline: none;
+
+    & > div,
+    li {
+        height: 100%;
+    }
     [dir="rtl"] & {
         float: right;
     }
@@ -99,17 +105,54 @@
 .slick-arrow {
     font-size: 0;
     position: absolute;
+    border: none;
+    top: 50%;
+    width: 30px;
+    height: 30px;
+    transform: translateY(-50%);
+    z-index: 4;
+
+    padding: 0;
+    cursor: pointer;
+
+    @include mq(tablet, max) {
+        width: 13.64px;
+        height: 29.47px;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 26px;
+        height: 58px;
+    }
 }
 .slick-prev {
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
+        no-repeat center center;
+    left: 20px;
+
+    @include mq(tablet, max) {
         background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
             no-repeat center center;
-    z-index: 4;
+    }
+
+    @include mq(celular, max) {
         left: 10px;
     }
+}
 .slick-next {
-    z-index: 4;
+    right: 20px;
+    background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
+        no-repeat center center;
+
+    @include mq(tablet, max) {
+        background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
+            no-repeat center center;
+    }
+
+    @include mq(celular, max) {
         right: 10px;
     }
+}
 .slick-arrow.slick-hidden {
     display: none;
 }

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

@@ -1,7 +1,34 @@
 /* _footer.scss */
 .footerCheckout {
     &__prateleira {
-        display: none;
+        box-sizing: border-box;
+        margin: 0 8px;
+
+        @include mq(celular, max) {
+            margin: 0 8px 0 7px;
+        }
+    }
+
+    &__prateleira-title {
+        font-family: "Tenor Sans";
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        text-align: center;
+        margin: 0;
+        margin-bottom: 20px;
+
+        color: $black-500;
+
+        @include mq(celular, max) {
+            font-size: 14px;
+            line-height: 28px;
+        }
+
+        @include mq(desktop4K, min) {
+            font-size: 48px;
+            line-height: 76px;
+        }
     }
 
     &__wrapper {
@@ -83,7 +110,7 @@
             }
 
             @include mq(celular, max) {
-                width: 9.930%;
+                width: 9.93%;
             }
 
             @include mq(desktop4K, min) {
@@ -160,7 +187,7 @@
                 width: 3.536%;
             }
             @include mq(celular, max) {
-                width: 9.930%;
+                width: 9.93%;
             }
 
             @include mq(desktop4K, min) {
@@ -175,7 +202,7 @@
                 width: 3.536%;
             }
             @include mq(celular, max) {
-                width: 9.930%;
+                width: 9.93%;
             }
 
             @include mq(desktop4K, min) {
@@ -221,6 +248,11 @@
 
             color: $black-300;
 
+            @include mq(desktop4K, min) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
             .vtex {
                 width: 44.92px;
                 margin-left: 10.12px;

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

@@ -1 +1,130 @@
-/* _prateleira.scss */
+.prateleira {
+    box-sizing: border-box;
+    margin: 0 auto 56px auto;
+    width: 81.5%;
+
+    @include mq(tablet, max) {
+        width: 100%;
+        margin: 0 0 54px 0;
+    }
+
+    @include mq(desktop4K, min) {
+        width: 80.7%;
+    }
+
+    &__container {
+        height: 100%;
+        display: flex !important;
+        flex-direction: column;
+    }
+
+    &__image-wrapper {
+        margin: 0 8px;
+
+        img {
+            width: 100%;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 0 8.465px;
+        }
+    }
+
+    &__content {
+        margin: 0 8px;
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        @include mq(desktop4K, min) {
+            margin: 0 8.465px;
+        }
+    }
+
+    &__title {
+        font-family: "Open Sans";
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 18px;
+        text-align: center;
+        color: $black-500;
+        margin: 20px 0;
+
+        flex: 1;
+
+        @include mq(tablet, max) {
+            margin: 22px 0 18px 0;
+        }
+
+        @include mq(celular, max) {
+            margin: 20px 0;
+        }
+
+        @include mq(desktop4K, min) {
+            margin: 21.93px 0 20px;
+
+            font-size: 26px;
+            line-height: 35px;
+        }
+    }
+
+    &__name-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        margin-bottom: 20px;
+
+        flex: 1;
+
+        @include mq(celular, max) {
+            margin-bottom: 37px;
+            flex-wrap: wrap;
+        }
+    }
+
+    &__name, &__button a {
+        font-family: "Open Sans";
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 18px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: $white-500;
+        @include mq(desktop4K, min) {
+            font-size: 26px;
+            line-height: 35px;
+        }
+
+    }
+
+    &__name {
+        background-color: $blue-500;
+        padding: 5px;
+        border-radius: 8px;
+        text-align: center;
+
+        @include mq(desktop4K, min) {
+            padding: 8.04px 4.38px 8.04px 5.62px;
+        }
+    }
+
+    &__button {
+        width: 100%;
+        border-radius: 8px;
+        background-color: $blue-500;
+        border: none;
+        padding: 12px 0;
+
+        cursor: pointer;
+
+        a {
+            &:hover,
+            &:focus {
+                color: $blue-500;
+                text-decoration: none;
+            }
+        }
+    }
+}

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

@@ -20,9 +20,12 @@ $color-blue: #4267b2;
 $color-green: #4caf50;
 
 /*CORES*/
+$white-500: #FFF;
 $black-500: #000;
 $black-300: #292929;
 
+$blue-500: #00C8FF;
+
 $gray-500: #C4C4C4;
 
 /* Grid breakpoints */