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

161
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() {
@ -60,18 +60,30 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { 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) => { 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,45 +92,156 @@ 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 (
window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" 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 ( 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"
);
}
}
});
});
}
}
} }