From 740079307edd56f2b5dccfd6fb80326a7ab2ed81 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Thu, 15 Dec 2022 12:58:31 -0300 Subject: [PATCH] feat(header): torna a barra de progresso funcional --- checkout/src/arquivos/js/components/Header.js | 163 ++++++++++++++++-- .../src/arquivos/sass/partials/_header.scss | 6 +- 2 files changed, 151 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 55f2c57..9c323c2 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -9,7 +9,7 @@ export default class Header { async init() { await this.selectors(); this.progressBarStructure(); - // await this.progressBarMove(); + await this.progressBarMove(); } async selectors() { @@ -23,33 +23,166 @@ export default class Header { ` } - // if(this.progressBar && window.innerWidth <=1024) { - // this.progressBar.innerHTML = ""; - // } + if(this.progressBar && window.innerWidth <=1024) { + this.progressBar.innerHTML = ""; + } } - // async progressBarMove() { - // if (this.progressBar && window.innerWidth > 1024) { - // const progressBarList = document.querySelectorAll(("#progressBar ul li")); - // progressBarList.forEach((li) => { - // console.log("Aqui vem seu código") - // }) - // } - // } + async progressBarMove() { + + if (this.progressBar && window.innerWidth > 1024) { + + const progressBarStages = document.querySelectorAll((".progress-bar__stage")); + + progressBarStages.forEach((stage) => { + + if(window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + + if(stage.children["progress-bar__cart"]) { + stage.children["progress-bar__cart"].classList.add("active") + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].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(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + stage.children["progress-bar__personal-data"].classList.add("active") + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if ( + + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + stage.children["progress-bar__payment"].classList.add("active") + } + + } else { + console.log("Erro") + } + + window.addEventListener("hashchange", () => { + + if (window.location.hash == "#/cart") { + if(stage.children["progress-bar__cart"]) { + stage.children["progress-bar__cart"].classList.add("active") + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if ( + + window.location.hash == "#/email" || + window.location.hash == "#/profile" || + window.location.hash == "#/shipping") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + stage.children["progress-bar__personal-data"].classList.add("active") + } + + if(stage.children["progress-bar__payment"]) { + if(stage.children["progress-bar__payment"].classList.contains("active")) { + stage.children["progress-bar__payment"].classList.remove("active") + } + } + + } else if (window.location.hash == "#/payment") { + + if(stage.children["progress-bar__cart"]) { + if(stage.children["progress-bar__cart"].classList.contains("active")) { + stage.children["progress-bar__cart"].classList.remove("active") + } + } + + if(stage.children["progress-bar__personal-data"]) { + if(stage.children["progress-bar__personal-data"].classList.contains("active")) { + stage.children["progress-bar__personal-data"].classList.remove("active") + } + } + + if(stage.children["progress-bar__payment"]) { + stage.children["progress-bar__payment"].classList.add("active") + } + + } else { + console.log("Erro") + } + }) + }) + } + } } + + + diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index fb4ba6a..fc9d501 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -66,9 +66,9 @@ border-radius: 50%; border: 1px solid $black-500; - // &:active { - // background: $black-500; - // } + &.active { + background: $black-500; + } } &::before,