feat(cart-fill): created intial styles and product self not styled and fix header,footer,checkout-empty

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

@@ -87,19 +87,22 @@ 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
 
         if (this.checkoutEmpty && this.checkoutContainer) {
-            if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+            if (this.checkoutEmpty.style.display === "none") {
-                this.checkoutContainer.classList.remove("container-cart-fill");
-            } else {
                 this.checkoutContainer.classList.add("container-cart-fill");
+            } else {
+                this.checkoutContainer.classList.remove("container-fill");
             }
 
             if (
-                window.location.href.endsWith("#/cart") &&
+                this.checkoutContainer.classList.contains("container-cart-fill") &&
-                this.checkoutContainer.classList.contains("container-cart-fill")
+                this.checkoutContainer.classList.contains("container-cart") &&
+                window.location.href.endsWith("#/cart")
             ) {
-                console.log("API");
+                this.innerSelfList();
                 this.innerToSelf();
                 this.addCarrossel();
+            } else {
+                this.self.innerHTML = "";
             }
 
             let target = this.checkoutEmpty;
@@ -107,18 +110,22 @@ export default class Footer {
             let observer = new MutationObserver((mutations) => {
                 for (let i = 0; i < mutations.length; i++) {
                     if (mutations[i].attributeName === "style") {
-                        if (this.checkoutContainer.classList.contains("container-cart-fill")) {
+                        if (this.checkoutEmpty.style.display === "none") {
-                            this.checkoutContainer.classList.remove("container-cart-fill");
-                        } else {
                             this.checkoutContainer.classList.add("container-cart-fill");
+                        } else {
+                            this.checkoutContainer.classList.remove("container-cart-fill");
                         }
 
                         if (
-                            window.location.href.endsWith("#/cart") &&
+                            this.checkoutContainer.classList.contains("container-cart-fill") &&
-                            this.checkoutContainer.classList.contains("container-cart-fill")
+                            this.checkoutContainer.classList.contains("container-cart") &&
+                            window.location.href.endsWith("#/cart")
                         ) {
+                            this.innerSelfList();
                             this.innerToSelf();
                             this.addCarrossel();
+                        } else {
+                            this.self.innerHTML = "";
                         }
 
                         break;
@@ -127,13 +134,43 @@ export default class Footer {
             });
 
             observer.observe(target, config);
+
+            window.addEventListener("hashchange", () => {
+                if (
+                    this.checkoutContainer.classList.contains("container-cart-fill") &&
+                    this.checkoutContainer.classList.contains("container-cart") &&
+                    window.location.href.endsWith("#/cart")
+                ) {
+                    this.innerSelfList();
+                    this.innerToSelf();
+                    this.addCarrossel();
+                } else {
+                    this.self.innerHTML = "";
+                }
+            });
         }
     }
 
     addCarrossel() {
-        $(this.self).slick({
+        $(this.self.children[1]).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            responsive: [
+                {
+                    breakpoint: 1025,
+                    settings: {
+                        slidesToShow: 3,
+                    },
+                },
+
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToShow: 2,
+                    },
+                },
+            ],
         });
     }
 
@@ -154,7 +191,7 @@ export default class Footer {
         let datas = await this.getProducts();
 
         datas.forEach(() => {
-            $(this.self).slick("unslick");
+            $(this.self.children[1]).slick("unslick");
 
             this.createdCardsProducts(datas);
 
@@ -166,7 +203,8 @@ export default class Footer {
         let structure = "";
 
         data.forEach((data) => {
-            structure += `<div>
+            structure += `<li>
+            <div>
                 <div>
                     <figure>
                         <img src="${data.items[0].images[0].imageUrl}" alt="">
@@ -190,9 +228,19 @@ export default class Footer {
                         Ver Produto
                     </span>
                 </a>
-            </div>`;
+            </div></li>`;
         });
 
-        this.self.innerHTML = structure.trim();
+        this.self.children[1].innerHTML = `
+            ${structure.trim()}
+        `;
+    }
+
+    innerSelfList() {
+        this.self.innerHTML = `
+        <div>
+            <h2>Você também pode gostar:</h2>
+        </div>
+        <ul class="self-list"></ul>`;
     }
 }

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

@@ -29,7 +29,6 @@ function OnProgress(target) {
             <div class="progress-content">
                 <p>Dados Pessoais</p>
                 <span class="progress-bullet"></span>
-                <span class="progress-line"></span>
             </div>
         </div>
     </li>

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

@@ -1,9 +1,10 @@
-.container {
+.container-cart.container-cart-fill {
-    @include mq(md, max) {
     width: 100%;
-    }
-}
 
+    #cart-title {
+        display: flex !important;
+    }
+}
 .cart-template {
     font-family: $font-family-100;
     @include mq(md, max) {

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

@@ -10,9 +10,10 @@
     background-color: $clr-common-white;
 }
 
-.container-cart {
+.container-main.container-cart {
     width: 100%;
     height: 100%;
+    padding: 0 16px !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,43 +22,37 @@
     #cart-title {
         display: none !important;
     }
-    .cart-template,
-    .checkout-container {
-        min-height: auto;
-    }
-
-    .checkout-container {
-        padding: 0 16px;
-    }
 
+    .checkout-container,
     .cart-template {
+        min-height: auto;
         margin: 0;
     }
 
-    @media screen and (min-width: 375px) {
-        .checkout-container {
-            width: fluid(300px, 375px);
-            margin: 0 auto;
-        }
-
     .link-choose-products {
-            width: fluid(250px, 300px);
+        width: fluid(250px, 343px);
         max-width: 250px;
         margin: 0 auto;
     }
+
+    .transactions-container {
+        display: none;
     }
 
     @media screen and (min-width: 1025px) {
-        .checkout-container {
         width: fluid(400px, 1280px);
-            padding: 0;
+        padding: 0 !important;
-        }
+        max-width: none;
 
         .link-choose-products {
             width: fluid(327px, 400px);
-            max-width: none;
+            max-width: 327px;
         }
     }
+
+    @media screen and (min-width: 2500px) {
+        width: fluid(659px, 2500px);
+    }
 }
 
 .empty-cart {

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

@@ -1,4 +1,8 @@
 .footerCheckout {
+    color: $clr-gray-400;
+
+    &__wrapper {
+        border-top: 1px solid $clr-common-black;
         padding: 16px 25px 18.88px 8px;
 
         @include mq("md", min) {
@@ -6,10 +10,6 @@
         }
     }
 
-.footerCheckout {
-    border-top: 1px solid $clr-common-black;
-    color: $clr-gray-400;
-
     &__stamps {
         order: 0;
         margin: 0 0 16px;

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

@@ -161,7 +161,7 @@ body :where(ul, li, ol) {
         .progress-item {
             &--left,
             &--right {
-                width: 39.9183%;
+                width: 40%;
 
                 .progress-line {
                     position: absolute;
@@ -183,14 +183,18 @@ body :where(ul, li, ol) {
                 }
             }
 
+            &--center {
+                width: 90px;
+            }
+
             &--right {
                 .progress-container {
                     align-items: flex-end;
                 }
 
                 .progress-line {
-                    left: 29%;
+                    right: 72%;
-                    transform: translateX(-50%);
+                    transform: translateX(50%);
                 }
             }
         }