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

@@ -8,15 +8,16 @@ export default class Footer {
     async init() {
         this.list = await this.fetchPrateleira();
         await this.selectors();
-        // this.onUpdate();
-        this.createPrateleira();
-        this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
-        this.itensPrateleira();
-
-        this.addCarrossel();
-
         this.creditCardIconsHTML();
         this.developedByIconsHTML();
+        if (window.location.hash === "#/cart") {
+            await this.onUpdate();
+        }
+        // this.createPrateleira();
+        this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
+        this.itensPrateleira();
+        this.events();
+        this.addCarrossel();
     }
 
     async selectors() {
@@ -24,25 +25,63 @@ export default class Footer {
             timeout: 5000,
             interval: 1000,
         });
+        this.checkoutVazio = await waitElement(".empty-cart-content");
         this.creditCardIcons = await waitElement(".footerCheckout__stamps");
         this.developedByIcons = await waitElement(".footerCheckout__developedBy");
     }
 
-    onUpdate() {
+    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 target = this.checkoutVazio;
+        const cartTitle = document.querySelector("#cart-title");
         let config = { childList: true, attributes: true };
+
+        // let observer = new MutationObserver((mutations) => {
+
+        // // mutations.forEach(function (mutation) {
+        //     // console.log("observer");
+        //     mutations.map((mutation.target.attributes.style.nodeValue); => {
+        //         const cartStatus = mutation.target.attributes.style.nodeValue;
+        //         console.log("cartStatus");
+
+        //         if (cartStatus == "display: none;") {
+        //             this.createPrateleira();
+        //             this.cartTitle.classList.remove("inactive");
+        //         } else if (cartStatus == "display: block;") {
+        //             this.removePrateleira();
+        //             this.cartTitle.classList.add("inactive");
+        //         }
+        //     });
+        // // });
+        // });
+
         let observer = new MutationObserver((mutations) => {
-            mutations.forEach(function (mutation) {
+            mutations.map((mutation) => {
-                console.log(mutation.type);
+                console.log(mutation.target.attributes.style.nodeValue);
+                if (mutation.target.attributes.style.nodeValue == "display: none;") {
+                    this.createPrateleira();
+                    // this.cartTitle.classList.remove("inactive");
+                } else if (mutation.target.attributes.style.nodeValue == "display: block;") {
+                    this.removePrateleira();
+                    // this.cartTitle.classList.add("inactive");
+
+                }
             });
         });
 
         observer.observe(target, config);
     }
 
+    hashChange(e) {
+        if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") {
+            this.itensP.classList.add("desativado");
+        } else {
+            this.itensP.classList.remove("desativado");
+        }
+    }
+
     createPrateleira() {
         if (this.itensP) {
             this.itensP.innerHTML = `
@@ -52,6 +91,10 @@ export default class Footer {
         }
     }
 
+    removePrateleira() {
+        this.itensP.innerHTML = ``;
+    }
+
     async itensPrateleira() {
         let structure = "";
 
@@ -86,31 +129,8 @@ export default class Footer {
             });
     }
 
-    async addCarrossel() {
+    events() {
-        const elemento = await waitElement(".footerCheckout__carrossel-itens");
+        window.addEventListener("hashchange", this.hashChange.bind(this));
-
-        if (window.innerWidth > 1024) {
-            $(elemento).slick({
-                slidesToShow: 4,
-                slidesToScroll: 1,
-                arrows: true,
-                infinite: false,
-            });
-        } else if (window.innerWidth <= 1024 && window.innerWidth > 375) {
-            $(elemento).slick({
-                slidesToShow: 3,
-                slidesToScroll: 1,
-                arrows: true,
-                infinite: false,
-            });
-        } else if (window.innerWidth <= 375) {
-            $(elemento).slick({
-                slidesToShow: 2,
-                slidesToScroll: 1,
-                arrows: true,
-                infinite: false,
-            });
-        }
     }
 
     creditCardIconsHTML() {
@@ -148,4 +168,47 @@ export default class Footer {
     </li>
       `;
     }
+
+    async addCarrossel() {
+        const elemento = await waitElement(".footerCheckout__carrossel-itens");
+
+        // if (window.innerWidth > 1024) {
+        $(elemento).slick({
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            arrows: true,
+            infinite: false,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                    },
+                },
+                {
+                    breakpoint: 601,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 1,
+                    },
+                },
+            ],
+        });
+        // } else if (window.innerWidth <= 1024 && window.innerWidth > 599) {
+        //     $(elemento).slick({
+        //         slidesToShow: 3,
+        //         slidesToScroll: 1,
+        //         arrows: true,
+        //         infinite: false,
+        //     });
+        // } else if (window.innerWidth <= 599) {
+        //     $(elemento).slick({
+        //         slidesToShow: 2,
+        //         slidesToScroll: 1,
+        //         arrows: true,
+        //         infinite: false,
+        //     });
+        // }
+    }
 }

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

@@ -21,9 +21,10 @@
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px 29px 16px 16px;
-        margin-bottom: 48px;
+        margin-bottom: 16px;
 
         @include mq(md, max) {
+            padding: 16px;
             margin: 0px 0 25px 0;
             border-left: none;
             border-right: none;
@@ -132,7 +133,6 @@
             td.info {
                 width: 100%;
             }
-
         }
 
         #payment-data-submit {
@@ -173,6 +173,11 @@
     .cart-items {
         .product-item {
             padding: 16px 0;
+
+            @media (max-width: 1024px) {
+                border-top: 0 !important;
+                padding-top: 0;
+            }
         }
 
         th {
@@ -184,7 +189,18 @@
             line-height: 16px;
             text-align: left;
 
-            @include mq(md, max) {
+            &.product-price {
+
+                &:after {
+                    content: "Unidade";
+                    background-color: $white;
+                }
+            }
+
+            @media (max-width: 1024px) {
+                &.product,
+                &.product-price,
+                &.quantity,
                 &.quantity-price,
                 &.shipping-date {
                     display: none;
@@ -206,6 +222,10 @@
             margin: 0;
             width: 20.2%;
 
+            @media (max-width: 375px) {
+                width: 100% !important;
+            }
+
             img {
                 width: 100%;
 
@@ -231,6 +251,11 @@
         color: $black-500;
         white-space: normal;
 
+        @media (max-width: 375px) {
+            padding: 0 !important;
+            // margin-left: 48px;
+        }
+
         @include mq(lg, max) {
             width: 250px;
         }
@@ -249,9 +274,19 @@
                 text-decoration: none;
             }
 
-            @media (max-width: 490px) {
+            @media (min-width: 768px) and (max-width: 1024px) {
-                margin-left: 23px;
+                width: 100%;
+                margin-left: 0;
             }
+
+            @media (max-width: 375px) {
+                width: 80% !important;
+                margin-left: 11px;
+            }
+
+            // @media (max-width: 490px) {
+            //     margin-left: 23px;
+            // }
         }
 
         .brand,
@@ -295,7 +330,8 @@
             font-size: 12px;
             line-height: 14px;
             text-decoration-line: line-through;
-            @include mq(sm, max) {
+
+            @media (max-width: 375px) {
                 font-size: 12px;
                 line-height: 14px;
             }
@@ -310,29 +346,30 @@
     }
 
     td.quantity {
-        display: flex;
+        display: flex !important;
         align-items: center;
         justify-content: center;
         margin: 11px 79px 0 0;
         padding: 0;
         height: 34px;
-        width: 99px;
+        width: 99px !important;
         // width: max-content !important;
         box-sizing: border-box;
         border: 1px solid $gray-300;
         border-radius: 8px;
 
         @media (max-width: 490px) {
-            margin-left: 84px !important;
+            margin-left: 70px !important;
+            width: 80px !important;
         }
 
         input {
-            background-color: $white;
+            background-color: transparent;
             border: 0 none;
             display: block;
             max-height: 38px;
             margin: 0 !important;
-            // padding: 8px 0;
+            padding: 0;
             width: 38px;
             color: $black-500;
             box-shadow: none;
@@ -356,6 +393,7 @@
                 font-weight: 700;
                 line-height: 10px;
                 border-radius: 50%;
+                margin: auto;
                 padding: 3px 0;
                 width: 16px;
 
@@ -489,9 +527,13 @@
                 line-height: 33px;
                 color: $black-500;
 
-                @include mq(md, max) {
+                @media (max-width: 375px) {
-                    margin-top: 0;
+                    margin: 13px 0 11px;
                 }
+
+                // @include mq(md, max) {
+                //     margin-top: 0;
+                // }
             }
 
             .srp-description {
@@ -500,6 +542,10 @@
                 font-size: 12px;
                 line-height: 18px;
                 margin: 0 0 12px;
+
+                @media (max-width: 375px) {
+                    font-size: 14px;
+                }
             }
 
             button.shp-open-options {

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

@@ -1,5 +1,6 @@
 .empty-cart {
     font-family: $font-family;
+
     &-content {
         color: #292929;
         text-align: center;
@@ -24,11 +25,17 @@
         text-transform: uppercase;
         margin-bottom: 35px;
 
-        @media (max-width: 1024px) {
+        @media (min-width: 376px) and (max-width: 1024px) {
             font-size: 18px;
             line-height: 25px;
             margin: 235px 0 22px;
         }
+
+        @media (max-width: 375px) {
+            font-size: 18px;
+            line-height: 25px;
+            margin: 180px 0 22px;
+        }
     }
 
     &-message {

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

@@ -81,7 +81,6 @@
 
     img {
         display: block;
-
     }
     &.slick-loading img {
         display: none;
@@ -117,6 +116,10 @@
     z-index: 4;
     border: none;
     left: 20px;
+
+    @media (max-width: 375px) {
+        left: 2px;
+    }
 }
 .slick-next {
     background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
@@ -124,6 +127,10 @@
     z-index: 4;
     border: none;
     right: 20px;
+
+    @media (max-width: 375px) {
+        right: 15px;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;

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

@@ -24,6 +24,11 @@
             line-height: 38px;
             text-align: center;
             color: $black-500;
+
+            @media (max-width: 375px) {
+                font-size: 14px;
+                line-height: 28px;
+            }
         }
 
         .product-info {
@@ -81,7 +86,7 @@
             background-color: $vivid-blue;
             border: none;
             border-radius: 8px;
-            font-family: "Open Sans";
+            font-family: $font-family;
             font-style: normal;
             font-weight: 700;
             font-size: 13px;
@@ -119,8 +124,8 @@
         margin-top: 56px;
 
 
-        @media (max-width: 1024px) {
+        // @media (max-width: 1024px) {
-        }
+        // }
 
         .container {
             border-top: 1px solid #000;
@@ -167,25 +172,24 @@
             margin-top: 13px;
         }
 
-        @media (max-width: 1024px) {
+        @media (min-width: 768px) and (max-width: 1024px) {
-            width: 90%;
+            width: 33.5%;
-            margin: 22px 0 40px 16px;
+            margin: 22px 0 23px 16px;
+        }
+
+        @media (min-width: 376px) and (max-width: 767px) {
+            width: 87%;
+            margin: 22px 0 23px 8px;
         }
 
         @media (max-width: 375px) {
             width: 91.2%;
             order: 1;
             gap: 4px;
-            // margin: 23px 0;
+            margin: 22px 0 23px 8px;
         }
 
 
-
-        @include mq(md, max) {
-            align-self: center;
-            // margin-bottom: 12px;
-        }
-
         &__divider {
             content: "";
             background-color: $gray-400;
@@ -268,4 +272,9 @@
             }
         }
     }
+
+
+    .desativado {
+        display: none !important;
+    }
 }

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

@@ -140,12 +140,16 @@
             width: 19.213%;
         }
 
-        @media screen and (min-width: 376px) and (max-width: 1024px) {
+        @media (min-width: 768px) and (max-width: 1024px) {
             width: 16.59%;
         }
 
+        @media (min-width: 376px) and (max-width: 767px) {
+            width: 39.283%;
+        }
+
         @media (max-width: 375px) {
-            width: 41.49%;
+            width: 45.4%;
         }
     }
 
@@ -165,8 +169,8 @@
             padding: 0 0 0 8px;
             color: $black-400;
 
-            @media (max-width: 1024px) {
+            // @media (max-width: 1024px) {
-            }
+            // }
 
             @media (min-width: 2500px) {
                 font-size: 24px;