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

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

@ -10,7 +10,7 @@ export default class Header {
await this.selectors();
console.log(this.progressBar);
this.progressBarHTML();
await this.barProgress()
await this.barProgress();
}
async selectors() {
@ -58,20 +58,32 @@ export default class Header {
async barProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const barList = document.querySelectorAll(".progress-bar ul li");
const barList = document.querySelectorAll(".progress-bar ul 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"]) {
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"].classList.contains("active")) {
li.children[0].children["progress-bar-circle-2"].classList.remove("active")
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")
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 (
@ -80,45 +92,156 @@ export default class Header {
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-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")
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.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 (
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"]) {
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"].classList.contains("active")
if (
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"]) {
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"
);
}
}
});
});
}
}
}