From 7c59ca4f9178ef1d7d2530449028cf046d949ddd Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 12 Dec 2022 19:58:33 -0300 Subject: [PATCH] feat(header): Adicionado o script do header de evento --- checkout/src/arquivos/js/components/Header.js | 200 +++++++++++++++++- 1 file changed, 197 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index deb6557..30475e5 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -27,9 +27,13 @@ export default class Header { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = ` `; } @@ -37,4 +41,194 @@ export default class Header { 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") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + li.children[0].children[0].children["progress-bar-circle-1"].classList.add( + "active" + ); + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } 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" + ) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + li.children[0].children[0].children["progress-bar-circle-2"].classList.add( + "active" + ); + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children["progress-bar-circle-3"].classList.add( + "active" + ); + } + } + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if ( + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping" + ) { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.add("active"); + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (li.children[0].children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-1" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.contains("active") + ) { + li.children[0].children[0].children[ + "progress-bar-circle-2" + ].classList.remove("active"); + } + } + if (li.children[0].children[0].children["progress-bar-circle-3"]) { + li.children[0].children[0].children[ + "progress-bar-circle-3" + ].classList.add("active"); + } + } + }); + }); + } + } }