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

@@ -8,14 +8,101 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        //console.log(this.item);
+        this.progressBarHTML();
+        await this.progressBarProgress();
     }
 
     async selectors() {
+        /*
         this.item = await waitElement("#my-element", {
             //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
             timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
             interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        });*/
+        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-2" class="progress-bar-circle-2"></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 progressBarProgress() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            const progressBarLista = document.querySelectorAll("#progressBar ul li");
+            progressBarLista.forEach((li) => {
+                if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
+                    this.trataPonto(li, 1);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/email" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/profile" ||
+                    window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping"
+                ) {
+                    this.trataPonto(li, 2);
+                } else if (
+                    window.location.href === "https://m3academy.myvtex.com/checkout/#/payment"
+                ) {
+                    this.trataPonto(li, 3);
+                }
+                window.addEventListener("hashchange", () => {
+                    if (window.location.hash == "#/cart") {
+                        this.trataPonto(li, 1);
+                    } else if (
+                        window.location.hash == "#/email" ||
+                        window.location.hash == "#/profile" ||
+                        window.location.hash == "#/shipping"
+                    ) {
+                        this.trataPonto(li, 2);
+                    } else if (window.location.hash == "#/payment") {
+                        this.trataPonto(li, 3);
+                    }
+                });
             });
         }
+    }
+
+    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/partials/_header.scss

@@ -2,6 +2,81 @@
 .headerCheckout {
     .container {
         width: auto !important;
+        #progressBar {
+            width: 446px;
+            ul {
+                list-style-type: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 0 !important;
+            }
+            li .containerLi {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                position: relative;
+            }
+            li.central .containerLi {
+                align-items: center;
+                margin-left: 7px;
+            }
+            li:last-child .containerLi {
+                align-items: flex-end;
+            }
+            li .containerLi div {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+            li {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+            li.central {
+                width: auto;
+            }
+            li #progress-bar-circle-1,
+            li #progress-bar-circle-2,
+            li #progress-bar-circle-3 {
+                width: 12px;
+                height: 12px;
+                border: 1px solid #000;
+                border-radius: 50%;
+                @media (min-width: 2500px) {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+            li #progress-bar-circle-1.active,
+            li #progress-bar-circle-2.active,
+            li #progress-bar-circle-3.active {
+                border: none;
+                background-color: #000;
+            }
+            li .progress-bar-line-1 {
+                position: absolute;
+                left: 25%;
+                transform: translateY(-50%);
+                bottom: 5px;
+                width: 100%;
+                height: 1px;
+                border-top: 1px solid #000;
+            }
+            li .progress-bar-line-2 {
+                position: absolute;
+                right: 21%;
+                transform: translateY(-50%);
+                bottom: 5px;
+                width: 100%;
+                height: 1px;
+                border-top: 1px solid #000;
+            }
+        }
     }
     &__wrapper {
         align-items: center;