forked from M3-Academy/m3-academy-template-checkout
develop #5
@ -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"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user