feat: ajusta responsividade do empty cart

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

@@ -16,7 +16,7 @@ export default class Footer {
     }
 
     async selectors() {
-        console.log("iniciando selectors()")
+        console.log("iniciando 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");
@@ -25,22 +25,21 @@ export default class Footer {
         this.frete = await waitElement(".shipping-date");
         this.unidade = await waitElement(".product-price");
 
-
         this.prateleira = await waitElement(".footerCheckout__prateleira");
 
         // this.prateleiraSlick = await waitElement(".prateleira__carousel")
     }
 
     async replaceCartContent() {
-        console.log("entrou no replaceCart")
+        console.log("entrou no replaceCart");
 
-        if(this.cart) {
+        if (this.cart) {
-            console.log("entrou no if do replaceCart()")
+            console.log("entrou no if do replaceCart()");
-            console.log(this.cart)
+            console.log(this.cart);
             this.frete.textContent = "Frete";
-            console.log(this.frete)
+            console.log(this.frete);
             this.unidade.textContent = "Unidade";
-            console.log(this.unidade)
+            console.log(this.unidade);
         }
     }
 
@@ -58,63 +57,64 @@ export default class Footer {
     // }
 
     async onUpdate() {
-        console.log("chamada do onUpdate()")
+        console.log("chamada do 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
-        if(this.checkoutVazio) {
+        if (this.checkoutVazio) {
-            console.log("entrou no if do onUpdate()")
+            console.log("entrou no if do onUpdate()");
+
+            if (this.checkoutVazio.style.display == "block") {
+                console.log("Carrinho está vazio");
+                this.cartTitle.style.display = "none";
+                this.prateleira.style.display = "none";
+            } else {
+                console.log("Carrinho NÃO está vazio");
+                this.cartTitle.style.display = "block";
+
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    console.log("Está no #/cart");
+                    this.prateleira.style.display = "block";
+                }
+            }
 
             let target = this.checkoutVazio;
             let config = { attributes: true };
 
-            if(this.checkoutVazio.style.display == "block") {
-                console.log("Carrinho está vazio ou não está no #/cart")
-                this.cartTitle.style.display = "none";
-                this.prateleira.style.display = "none";
-
-            } else {
-                console.log("Carrinho NÃO está vazio e está no #/cart");
-                this.cartTitle.style.display = "block";
-                this.prateleira.style.display = "block";
-            }
-
             let observer = new MutationObserver((mutations) => {
                 mutations.forEach(() => {
-
+                    if (this.checkoutVazio.style.display == "block") {
-                    if(this.checkoutVazio.style.display == "block") {
+                        console.log("Carrinho está vazio ou não está no #/cart");
-                        console.log("Carrinho está vazio ou não está no #/cart")
                         this.cartTitle.style.display = "none";
                         this.prateleira.style.display = "none";
-
                     } else {
                         console.log("Carrinho NÃO está vazio e está no #/cart");
                         this.cartTitle.style.display = "block";
+                        if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
                             this.prateleira.style.display = "block";
                         }
+                    }
                 });
             });
 
             observer.observe(target, config);
-        }
 
-        window.addEventListener("hashchange", () => {
+            // window.addEventListener("hashchange", () => {
+            //     if (window.location.hash == "#/cart") {
+            //         this.cartTitle.style.display = "none";
+            //         this.prateleira.style.display = "block";
+            //         // this.renderPrateleira();
+            //     } else {
+            //         this.cartTitle.style.display = "block";
+            //         this.prateleira.style.display = "none";
+            //     }
+            // });
 
-            if (window.location.hash == "#/cart") {
-                this.cartTitle.style.display = "none";
-                this.prateleira.style.display = "block";
-                // this.renderPrateleira();
-            } else {
-                this.cartTitle.style.display = "block";
-                this.prateleira.style.display = "none";
         }
-        })
     }
 
     async renderPrateleira() {
-
         if (this.prateleira) {
-
             const prateleiraTitle = document.createElement("h2");
             const titleNode = document.createTextNode("Você também pode gostar:");
             prateleiraTitle.classList.add("prateleira__title");
@@ -123,17 +123,18 @@ export default class Footer {
             const prateleiraSlick = document.createElement("ul");
             prateleiraSlick.classList.add("prateleira__carousel");
 
-            const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319");
+            const response = await fetch(
+                "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
+            );
             console.log("await fetch response:", response);
             const productsList = await response.json();
             console.log("await fetch productsList:", productsList);
 
             let cardsStructure = "";
 
-            if(productsList) {
+            if (productsList) {
-
                 productsList.forEach((product) => {
-                    console.log(product)
+                    console.log(product);
 
                     const productImageUrl = product.items[0].images[0].imageUrl;
                     const productName = product.productName;
@@ -141,7 +142,6 @@ export default class Footer {
                     const productLink = product.link;
                     let skusStructure = "";
 
-
                     console.log("productImageUrl:", productImageUrl);
                     console.log("productName:", productName);
                     console.log("productSkus:", productSkus);
@@ -153,8 +153,8 @@ export default class Footer {
                             <li>
                                 <button type="button">${sku.name}</button>
                             </li>
-                        `
+                        `;
-                    })
+                    });
 
                     cardsStructure += `
                         <li class="prateleira__item">
@@ -169,8 +169,8 @@ export default class Footer {
                                 </a>
                             </div>
                         </li>
-                    `
+                    `;
-                })
+                });
 
                 this.prateleira.appendChild(prateleiraTitle);
                 this.prateleira.appendChild(prateleiraSlick);
@@ -199,22 +199,22 @@ export default class Footer {
                     breakpoint: 1025,
                     settings: {
                         slidesToShow: 3,
-                    }
+                    },
                 },
                 {
                     breakpoint: 768,
                     settings: {
                         slidesToShow: 2,
-                    }
+                    },
-                }
+                },
-            ]
+            ],
         });
     }
 
     async stampsHTML() {
-        console.log("entrou no stamps")
+        console.log("entrou no stamps");
 
-        const stamps = await waitElement('.footerCheckout__stamps');
+        const stamps = await waitElement(".footerCheckout__stamps");
 
         // console.log(stamps.children[0], stamps.children[2]);
 
@@ -248,38 +248,37 @@ export default class Footer {
                     <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="" />
                 </li>
             </ul>
-        `
+        `;
 
         const certifiedStructure = `
             <img class="footerCheckout__vtexpci footerCheckout__payments--certified" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="" />
-        `
+        `;
 
         stamps.children[0].innerHTML = paymentsStructure;
         stamps.children[2].innerHTML = certifiedStructure;
     }
 
     async developedByHTML() {
-        console.log("entrou no developedBy")
+        console.log("entrou no developedBy");
 
-        const developedBy = await waitElement('.footerCheckout__developedBy');
+        const developedBy = await waitElement(".footerCheckout__developedBy");
 
         // console.log(developedBy.children[0].children[0]);
 
         const vtexIcon = `
             <span>Powered By</span>
             <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="" />
-        `
+        `;
 
         const m3Icon = `
             <span>Powered By</span>
             <img class="footerCheckout__developedBy__icons" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="" />
-        `
+        `;
 
         developedBy.children[0].children[0].innerHTML = vtexIcon;
         developedBy.children[1].children[0].innerHTML = m3Icon;
 
         // developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link')
         // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link')
-
     }
 }

checkout/src/arquivos/js/components/Header.js

@@ -4,6 +4,7 @@ import { waitElement } from "m3-utils";
 export default class Header {
     constructor() {
         this.init();
+        console.log("constructor do header")
     }
 
     async init() {

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

@@ -1,4 +1,5 @@
 .checkout-container {
+    // height: 542px; (567px)
     // background: yellow;
     // height: 100%;
     // box-sizing: border-box;

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

@@ -9,12 +9,16 @@
     @include mq(md, max) {
         width: 100%;
     }
+
+    // .cart-template { //
+    //     margin-bottom: 0;
+    // }
 }
 
 .cart-template {
+    // height: 542px; (567 = 552px + mb15)
     // background: red;
-    margin: 0;
+    margin-bottom: 0;
-
 
     font-family: $font-family;
     @include mq(md, max) {
@@ -1168,3 +1172,16 @@
         }
     }
 }
+
+
+
+/*
+checkout-container row-fluid cart-active
+    cart-template full-cart span12 active
+        cart-template-holder
+            empty-cart-content
+                empty-cart-title
+                empty-cart-message
+                clearfix empty-cart-links
+            cart
+*/

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

@@ -50,4 +50,3 @@ body .container-main.container-order-form .orderform-template.active {
     // }
 }
 
-

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

@@ -1,20 +1,27 @@
 .empty-cart {
 
     &-content {
-        margin: 170px 0 262px;
+        margin: 170px 0 247px;
         text-align: center;
         text-transform: uppercase;
 
-
+		// @include mq(md, max) {
-
+        //     padding: 0 16px;
-		@include mq(md, max) {
+		// }
-            padding: 0 16px;
-		}
 	}
 
 	&-title {
+        margin: 0 0 29px;
+        line-height: 33px;
         font-size: 0;
-        margin: 0 0 32px;
+
+        @include mq(xl, min) {
+            line-height: 65px;
+        }
+
+        @include mq(lg, max) {
+            line-height: 25px;
+        }
 
         @include mq(sm, max) {
             margin: 0 0 22px;
@@ -22,25 +29,25 @@
 
         &::after {
             content: "Seu Carrinho está vazio";
-            line-height: 33px;
             font-family: $font-family;
             font-size: 24px;
             font-weight: 700;
-            font-style: normal;
             color: $black-500;
             text-align: center;
             text-transform: uppercase;
             vertical-align: bottom;
 
             @include mq(xl, min) {
-                line-height: 65px;
                 font-size: 48px;
             }
 
             @include mq(lg, max) {
-                line-height: 25px;
                 font-size: 18px;
             }
+
+            @include mq(xs, max) {
+                font-size: 16px;
+            }
         }
 	}
 
@@ -49,16 +56,28 @@
     }
 
 	&-links {
-        width: 32%; //327px;
+        width: 31.93%; //327px;
+        max-width: 323px;
         height: 48px;
         margin: 0 auto;
 
         @include mq(xl, min) {
+            max-width: 645px;
             height: 66px;
         }
 
+        @include mq(lg, max) {
+            width: 30.52%;
+            min-width: max-content;
+        }
+
+        @include mq(md, max) {
+            width: 39.33%;
+        }
+
         @include mq(sm, max) {
             width: 100%;
+            max-width: 250px;
         }
 
         .link-choose-products {
@@ -79,6 +98,7 @@
 
             &::after {
                 content: "Continuar comprando";
+                padding: 16px 26px;
                 line-height: 16px;
                 font-family: $font-family-secundary;
                 font-size: 14px;
@@ -88,6 +108,14 @@
                     line-height: 33px;
                     font-size: 28px;
                 }
+
+                @include mq(lg, max) {
+                    padding: 0 10px;
+                }
+
+                @include mq(xs, max) {
+                    font-size: 12px;
+                }
             }
 
 			&:hover {

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

@@ -16,8 +16,7 @@ footer .footerCheckout__wrapper {
     width: 100%;
     // margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
+footer .footerCheckout__prateleira {
-header {
     width: 79.53125%;
     margin: 0 auto;
 }

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

@@ -30,8 +30,8 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+	xs: 375px,
-	cstm: 400,
+	cstm: 400px,
 	sm: 576px,
 	md: 768px,
 	lg: 1025px,