fix: corrige aparecimento de titulo quando o carrinho estiver vazio ou nao

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

@@ -23,6 +23,7 @@ export default class Footer {
         this.footerCheckoutVtexPci = await waitElement(".footerCheckout__vtexpci");
         this.footerCheckoutDevelopedBy = await waitElement(".footerCheckout__developedBy");
         this.footerCheckoutShelf = await waitElement(".footerCheckout__prateleira");
+        this.cartTitle = await waitElement("#cart-title");
 
 
 
@@ -35,20 +36,25 @@ export default class Footer {
         // 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 title = this.cartTitle;
         let shelf = this.footerCheckoutShelf;
         let config = { childList: true, attributes: true };
 
         if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && this.checkoutVazio.style.display == "none") {
+            title.style.visibility = "initial";
             shelf.classList.remove("none");
             this.createfooterShelf();
         } else {
+            title.style.visibility = "hidden"
             shelf.classList.add("none");
         }
         window.addEventListener("hashchange", () => {
             if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
+                title.style.visibility = "initial";
                 shelf.classList.remove("none")
                 this.createfooterShelf();
             } else if (window.location.hash != "#/cart") {
+                title.style.visibility = "hidden"
                 shelf.classList.add("none");
 
             }
@@ -58,9 +64,11 @@ export default class Footer {
         let observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (target.style.display == "none" && window.location.hash == "#/cart") {
+                    title.style.visibility = "initial";
                     shelf.classList.remove("none");
                     this.createfooterShelf();
                 } else {
+                    title.style.visibility = "hidden"
                     shelf.classList.add("none");
 
                 }

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

@@ -1102,7 +1102,8 @@ li.hproduct.item.muted {
 
 span.newsletter-text {
 	@media (min-width: 2500px) {
-
+		font-size: 24px;
+		line-height: 33px;
 		margin-left: 8.05px;
 	}
 }
@@ -1114,6 +1115,13 @@ span.newsletter-text {
 	}
 }
 
+span.error {
+	@media (min-width: 2500px) {
+		font-size: 26px;
+		line-height: 33px;
+	}
+}
+
 .vtex-omnishipping-1-x-addressFormPart1 small {
 	@media (min-width: 2500px) {
 		font-size: 24px;

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

@@ -106,7 +106,6 @@
 
         #payment-data-submit {
             background: $color-blue2;
-            ;
             border: none;
             border-radius: 8px;
             color: $color-white;
@@ -116,6 +115,9 @@
             margin: 0 auto;
 
             @media (min-width: 2500px) {
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 font-size: 28px;
                 line-height: 38px;
             }
@@ -557,11 +559,14 @@
 
                 @include mq(md, max) {
                     margin-bottom: 40px;
+
+                    @media (max-width:4900px) {
+                        margin-bottom: 0;
+                    }
                 }
 
                 .srp-pickup-my-location__button {
                     background-color: $color-blue2;
-                    ;
                     border: none;
                     border-radius: 5px;
                     color: $color-white;
@@ -575,6 +580,12 @@
                     line-height: 16px;
                     letter-spacing: 0.05em;
 
+                    @media (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 33px;
+                        min-width: 543px;
+                    }
+
                     &:hover {
                         background-color: lighten($color-black, 5);
                     }
@@ -588,6 +599,10 @@
             .srp-toggle {
                 margin: 0 0 34px;
 
+                @media (min-width: 2500px) {
+                    min-width: 543px;
+                }
+
                 &__wrapper {
                     background-color: $color-white;
                     border-radius: 100px;
@@ -612,6 +627,11 @@
                 label {
                     width: 50%;
 
+                    @media (min-width: 2500px) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
                     &:active {
                         background-color: $color-gray3;
                     }
@@ -628,6 +648,11 @@
                         line-height: 14px;
                         color: $color-black;
                         margin-bottom: 12px;
+
+                        @media (min-width: 2500px) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     input {
@@ -670,7 +695,7 @@
                             left: 100%;
                             font-size: 28px;
                             line-height: 38px;
-                            top: 30%;
+                            top: 40%;
                             margin-left: 18.04px;
                         }
 
@@ -721,6 +746,11 @@
                         left: 0;
                         width: 100%;
                         top: 17px;
+
+                        @media (min-width: 2500px) {
+                            font-size: 18px;
+                            line-height: 45px;
+                        }
                     }
                 }
             }
@@ -1051,6 +1081,8 @@
         flex-direction: column;
         width: 343px;
 
+
+
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
@@ -1063,6 +1095,11 @@
             padding-bottom: 50px;
         }
 
+        @media (max-width:1025px) {
+            margin-bottom: 0;
+
+        }
+
         .link-choose-more-products-wrapper {
             display: block;
             text-align: center;
@@ -1156,9 +1193,12 @@
 
         display: none;
     }
+
 }
 
-
+.icon-lock:before {
+    display: none;
+}
 
 .payment-group-list-btn {
     margin: 0;
@@ -1294,3 +1334,12 @@ i.icon.icon-remove.item-remove-ico {
         font-size: 28px;
     }
 }
+
+element.style {}
+
+.row-fluid .full-cart {
+    @media (max-width:490px) {
+
+        margin-bottom: 0;
+    }
+}

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

@@ -18,6 +18,10 @@ footer .footerCheckout__prateleira,
 header {
     width: 79.53125%;
     margin: 0 auto;
+
+    @media (max-width:1024px) {
+        width: 98%;
+    }
 }
 
 body {
@@ -53,6 +57,10 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+
+        @media (max-width:1024px) {
+            width: 100%;
+        }
     }
 }
 

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

@@ -128,7 +128,7 @@
     }
 
     @media (max-width: 490px) {
-        bottom: 45.33%
+        bottom: 48.33%
     }
 }
 
@@ -142,7 +142,7 @@
     }
 
     @media (max-width: 490px) {
-        left: 13px;
+        left: 10px;
     }
 }
 

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

@@ -22,8 +22,8 @@
         @media (min-width:2500px) {
             font-size: 48px;
             line-height: 76px;
-
         }
+
     }
 
     &__list {
@@ -35,6 +35,15 @@
             gap: 16.94px;
         }
 
+        @media (max-width:490px) {
+            margin: 0 15px 56px;
+        }
+
+        @media (min-width:370px) and (max-width:380px) {
+
+            margin: 0 0 56px;
+        }
+
         .footerCheckout__card {
             width: 100%;
 
@@ -53,6 +62,10 @@
 
 
 
+
+
+
+
             .footerCheckout__container {
 
                 display: flex;
@@ -62,6 +75,10 @@
                 gap: 20px;
                 height: auto;
 
+                @media (min-width:370px) and (max-width:380px) {
+                    width: 164px;
+                }
+
                 li,
                 a {
 
@@ -154,9 +171,6 @@
                             flex-wrap: wrap;
                             min-height: 61px;
 
-                            &__skuName {
-                                height: 28px;
-                            }
                         }
                     }