andreamatsunaga/m3-academy-template-checkout-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): torna a barra de progresso funcional

Browse Source
This commit is contained in:
Andrea Matsunaga 2022-12-15 12:58:31 -03:00
parent 67d460859c
commit 740079307e
2 changed files with 151 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
checkout/src/arquivos/js/components/Header.js
View File

@ -9,7 +9,7 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarStructure(); this.progressBarStructure();
// await this.progressBarMove(); await this.progressBarMove();
} }
async selectors() { async selectors() {
@ -23,33 +23,166 @@ export default class Header {
<ul class="progress-bar__container"> <ul class="progress-bar__container">
<li class="progress-bar__stage"> <li class="progress-bar__stage">
<p class="progress-bar__stage--text">Meu carrinho</p> <p class="progress-bar__stage--text">Meu carrinho</p>
<div class="progress-bar__stage--circle"></div> <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
</li> </li>
<li class="progress-bar__stage"> <li class="progress-bar__stage">
<p class="progress-bar__stage--text">Dados Pessoais</p> <p class="progress-bar__stage--text">Dados Pessoais</p>
<div class="progress-bar__stage--circle"></div> <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
</li> </li>
<li class="progress-bar__stage"> <li class="progress-bar__stage">
<p class="progress-bar__stage--text">Pagamento</p> <p class="progress-bar__stage--text">Pagamento</p>
<div class="progress-bar__stage--circle"></div> <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
</li> </li>
</ul> </ul>
` `
} }
// if(this.progressBar && window.innerWidth <=1024) { if(this.progressBar && window.innerWidth <=1024) {
// this.progressBar.innerHTML = ""; this.progressBar.innerHTML = "";
// } }
} }
// async progressBarMove() { async progressBarMove() {
// if (this.progressBar && window.innerWidth > 1024) {
// const progressBarList = document.querySelectorAll(("#progressBar ul li")); if (this.progressBar && window.innerWidth > 1024) {
// progressBarList.forEach((li) => {
// console.log("Aqui vem seu código") 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")
}
})
})
}
}
}

6
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -66,9 +66,9 @@
border-radius: 50%; border-radius: 50%;
border: 1px solid $black-500; border: 1px solid $black-500;
// &:active { &.active {
// background: $black-500; background: $black-500;
// } }
} }
&::before, &::before,