forked from M3-Academy/m3-academy-template-checkout
feat(header): progressBarProgress added to header
This commit is contained in:
parent
c64423a396
commit
04a9814930
@ -18,10 +18,13 @@ export default class Header {
|
||||
|
||||
progressBarHTML() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
console.log("1");
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></div></li>
|
||||
|
||||
<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
|
||||
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="progress-bar-circle-3" class="progress-bar-circle-3"></p><p class="progress-bar-line-2"></p></div></div></li>
|
||||
</ul>
|
||||
`;
|
||||
@ -31,18 +34,200 @@ export default class Header {
|
||||
}
|
||||
}
|
||||
|
||||
// async progressBarProgress() {
|
||||
// if (this.progressBar && window.innerHTML > 1024) {
|
||||
// const progressBarList = document.querySelectorAll("#progressBar ul li");
|
||||
// progressBarList.forEach[(li) => {
|
||||
// if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
// if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
// li.children[0].children[0].children["progress-bar-circle-1"].classlist.add{
|
||||
// "active"
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
// }]
|
||||
// }
|
||||
// }
|
||||
async progressBarProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/email" ||
|
||||
window.location.href == "http://m3academy.myvtex.com/checkout/#/profile" ||
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/shipping"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-2"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
window.location.href === "http://m3academy.myvtex.com/checkout/#/payment"
|
||||
) {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-3"].classList.add(
|
||||
"active"
|
||||
);
|
||||
}
|
||||
}
|
||||
window.addEventListener("hashchange", () => {
|
||||
if (window.location.hash == "#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.add("active");
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].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[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.add("active");
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
} else if (window.location.hash == "#/payment") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-1"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
|
||||
if (
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.contains("active")
|
||||
) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-2"
|
||||
].classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
if (li.children[0].children[0].children["progress-bar-circle-3"]) {
|
||||
li.children[0].children[0].children[
|
||||
"progress-bar-circle-3"
|
||||
].classList.add("active");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user