fix: faz aparecer progressbar - sem estilo ainda.

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

@@ -7,8 +7,8 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        // this.onUpdate();
         this.footer();
+        // this.onUpdate();
     }
 
     async selectors() {
@@ -32,8 +32,9 @@ export default class Footer {
 
         observer.observe(target, config);
     }
+
     async addCarrossel() {
-        const elemento = await waitElement("#my-element");
+        const elemento = await waitElement(".container-carousel-item");
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,

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

@@ -1,19 +1,116 @@
 // import waitForEl from "../helpers/waitForEl";
 import { waitElement } from "m3-utils";
 
-export default class Header {
+        export default class Header {
-    constructor() {
+            constructor() {
-        this.init();
+                this.init();
+            }
+
+            async init() {
+                await this.selectors();
+                this.progressBarHtml();
+                await this.progressBarEvolution();
+            }
+
+            async selectors() {
+                this.header = await waitElement(".headerCheckout");
+                this.progressBar = await waitElement("#progressBar");
+            }
+
+
+
+    progressBarHtml() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+                <ul>
+                <li>
+                <div class="containerLi"> <div> <p class="progress-bar-text"> Meu Carrinho </p> <p id="progress-bar-circle-1"
+                class="progress-bar-circle-1"> </p> <p id="progress-bar-line-1" class="progress-bar-line-1"> </p> </div> </div> </li>
+
+                <li>
+                <div class="containerLi"> <div> <p class="progress-bar-text"> Dados Pessoais</p> <p id="progress-bar-circle-2"
+                class="progress-bar-circle-2">  </p> </div> </div> </li>
+
+                <li>
+                <div class="containerLi"> <div> <p class="progress-bar-text"> Pagamento </p> <p id="progress-bar-circle-3"
+                class="progress-bar-circle-3"> </p> <p id="progress-bar-line-2" class="progress-bar-line-2"> </p> </div> </div> </li>
+                </ul>
+            `;
+        }
+        if (this.progressBar && window.innerWidth <= 1024) {
+            this.progressBar.innerHTML = ``;
+        }
     }
 
-    async init() {
+    async progressBarEvolution() {
-        await this.selectors();
+        if (this.progressBar && window.innerWidth > 1024) {
-        this.progressBarHtml();
+            const progressLista = document.querySelectorAll("progressBar ul li");
-        await this.progressBarEvolution();
+            progressLista.forEach((li) => {
+                if (window.location.href === "https://m3academy.myvtex.com.br/checkout/#/cart") {
+                    this.trataPonto(li, 1);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com.br/checkout/#/email" ||
+                    window.location.href == "https://m3academy.myvtex.com.br/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com.br/checkout/#/shipping"
+                ) {
+                    this.trataPonto(li, 2);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com.br/checkout/#/payment"
+                ) {
+                    this.trataPonto(li, 3);
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        this.trataPonto(li, 1);
+                    } else if (
+                        window.location.href === "#/email" ||
+                        window.location.href == "#/profile" ||
+                        window.location.href == "#/shipping"
+                    ) {
+                        this.trataPonto(li, 2);
+                    } else if (window.location.hash == "#payment") {
+                        this.trataPonto(li, 3);
+                    }
+                });
+            });
+        }
     }
 
-    async selectors() {
+
-        this.header = await waitElement(".headerCheckout");
+
-        this.progressBar = await waitElement("#progressBar");
+
+    marcarPonto(li, local) {
+        if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
+            li.children[0].children[0].children["progress-bar-circle-" + local].classList.add(
+                "active"
+            );
+        }
     }
+
+
+
+    removerPonto(li, local) {
+        if (li.children[0].children[0].children["progress-bar-circle-" + local]) {
+            if (
+                li.children[0].children[0].children[
+                    "progress-bar-circle-" + local
+                ].classList.contains("active")
+            ) {
+                li.children[0].children[0].children[
+                    "progress-bar-circle-" + local
+                ].classList.remove("active")
+            }
+        }
+    }
+
+
+    trataPonto(li, local) {
+        const indice = [1, 2, 3];
+        let indicesPontoBranco = indice.splice(local - 1, 1);
+        this.marcarPonto(li, local);
+        for (const i of indice) {
+            this.removerPonto(li, i);
+        }
+    }
+
 }

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

@@ -6,12 +6,36 @@
 
 .cart-template {
     font-family: $font-family;
+
     @include mq(md, max) {
         padding: 0 0;
     }
     .item-unit-label {
         display: none;
     }
+
+    .empty-cart-content {
+        p {
+            display: none;
+        }
+    }
+
+    .empty-cart-links {
+        align-items: center;
+        // display: flex;
+        text-align: center;
+        a {
+            font-size:0;
+            height: 16px;
+
+            &::after {
+                content: "CONTINUAR COMPRANDO";
+                font-size: 14px;
+                text-transform: uppercase;
+                }
+        }
+    }
+
     .cart {
         border: 3px solid $color-gray3;
         box-sizing: border-box;

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

@@ -10,13 +10,18 @@
 
 
 .footerCheckout {
-    border-top: 1px solid $color-black;
+    // border-top: 1px solid $color-black;
-    color: $color-gray2;
+    // color: $color-gray2;
 
     &__wrapper {
         align-items: center;
+        border-top: 1px solid $color-black;
+        color: $color-gray2;
         display: flex;
         justify-content: space-between;
+        position: absolute;
+        left: 0;
+        bottom: 0;
     }
 
     &__address {