RamonDiasFerreira/m3-academy-template-checkout-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(addEventListener): evento de monitoramento da hash, ao mudar o checkout a class active acompanha

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-14 16:24:56 -03:00
parent e367a5ea71
commit 4a09a0fd48
1 changed files with 146 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ export default class Header {
await this.selectors(); await this.selectors();
console.log(this.progressBar); console.log(this.progressBar);
this.progressBarHTML(); this.progressBarHTML();
await this.barProgress() await this.barProgress();
} }
async selectors() { async selectors() {
@ -62,16 +62,28 @@ export default class Header {
barList.forEach((li) => { barList.forEach((li) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (li.children[0].children["progress-bar-circle-1"]) { if (li.children[0].children["progress-bar-circle-1"]) {
li.children[0].children["progress-bar-circle-1"].classList.add("active") 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"]) {
if(li.children[0].children["progress-bar-circle-2"].classList.contains("active")) { if (
li.children[0].children["progress-bar-circle-2"].classList.remove("active") 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"]) {
if(li.children[0].children["progress-bar-circle-3"].classList.contains("active")) { if (
li.children[0].children["progress-bar-circle-3"].classList.remove("active") li.children[0].children["progress-bar-circle-3"].classList.contains(
"active"
)
) {
li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
} }
} else if ( } else if (
@ -80,19 +92,29 @@ export default class Header {
window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping" 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"]) {
if(li.children[0].children["progress-bar-circle-1"].classList.contains("active")) { if (
li.children[0].children["progress-bar-circle-1"].classList.remove("active") 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"]) {
li.children[0].children["progress-bar-circle-2"].classList.add("active") 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"]) {
if ( if (
li.children[0].children["progress-bar-circle-3"].classList.contains("active") li.children[0].children["progress-bar-circle-3"].classList.contains(
"active"
)
) { ) {
li.children[0].children["progress-bar-circle-3"].classList.remove("active") li.children[0].children["progress-bar-circle-3"].classList.remove(
"active"
);
} }
} }
} else if ( } else if (
@ -100,25 +122,126 @@ export default class Header {
) { ) {
if (li.children[0].children["progress-bar-circle-1"]) { if (li.children[0].children["progress-bar-circle-1"]) {
if ( if (
li.children[0].children["progress-bar-circle-1"].classList.contains("active") li.children[0].children["progress-bar-circle-1"].classList.contains(
"active"
)
) { ) {
li.children[0].children["progress-bar-circle-1"].classList.remove("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"]) {
if ( if (
li.children[0].children["progress-bar-circle-2"].classList.contains("active") li.children[0].children["progress-bar-circle-2"].classList.contains(
"active"
)
) { ) {
li.children[0].children["progress-bar-circle-2"].classList.remove("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"]) {
li.children[0].children["progress-bar-circle-3"].classList.add("active") 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"
);
}
}
});
});
}
}
} }