From ae44ae9dd1517a7d4c0ef840d1f1bbd353dc5b38 Mon Sep 17 00:00:00 2001 From: MateusLopes Date: Sat, 17 Dec 2022 10:36:04 -0300 Subject: [PATCH] feat(header): add funcionalidade progress bar --- checkout/src/arquivos/js/components/Header.js | 211 +++++++++++++++++- 1 file changed, 204 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 8f35103..f95d76c 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -9,15 +9,14 @@ export default class Header { async init() { await this.selectors(); this.progressBarHTML(); - setTimeout(this.changeTexts(), 900); - - // this.progressBarProgress(); + await this.progressBarWorking(); + // await this.changeTexts(); } async selectors() { this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); - this.chooseProductsBtn = await waitElement("#cart-choose-products"); + // this.chooseProductsBtn = await waitElement("#cart-choose-products"); } progressBarHTML() { @@ -52,8 +51,206 @@ export default class Header { } } - changeTexts() { - this.chooseProductsBtn.innerText = "Continuar comprando"; - // console.log(this.this.chooseProductsBtn.innerText); + async progressBarWorking() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + progressBarList.forEach((li) => { + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (li.children[0].children["progress-bar-circle-1"]) { + li.children[0].children["progress-bar-circle-1"].classList.add("active"); + } + + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.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["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-2"]) { + li.children[0].children["progress-bar-circle-2"].classList.add("active"); + } + + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.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["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-3"]) { + li.children[0].children["progress-bar-circle-3"].classList.add("active"); + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash === "#/cart") { + if (li.children[0].children["progress-bar-circle-1"]) { + li.children[0].children["progress-bar-circle-1"].classList.add( + "active" + ); + } + + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.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["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-2"]) { + li.children[0].children["progress-bar-circle-2"].classList.add( + "active" + ); + } + + if (li.children[0].children["progress-bar-circle-3"]) { + if ( + li.children[0].children["progress-bar-circle-3"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-3"].classList.remove( + "active" + ); + } + } + } else if (window.location.hash === "#/payment") { + if (li.children[0].children["progress-bar-circle-1"]) { + if ( + li.children[0].children["progress-bar-circle-1"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-1"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-2"]) { + if ( + li.children[0].children["progress-bar-circle-2"].classList.contains( + "active" + ) + ) { + li.children[0].children["progress-bar-circle-2"].classList.remove( + "active" + ); + } + } + + if (li.children[0].children["progress-bar-circle-3"]) { + li.children[0].children["progress-bar-circle-3"].classList.add( + "active" + ); + } + } + }); + }); + } } + + // async changeTexts() { + // const chooseProductsBtn = document.getElementById("cart-choose-products"); + // let texto = (chooseProductsBtn.innerHTML = "Continuar comprando"); + // console.log(chooseProductsBtn); + // } }