forked from M3-Academy/m3-academy-template-checkout
feat: Adiciona funcionalidade na barra de progresso
This commit is contained in:
parent
6c1cc47274
commit
9d5ac3ccd6
@ -29,7 +29,7 @@ export default class Header {
|
|||||||
<div class="containerLi div-1">
|
<div class="containerLi div-1">
|
||||||
<div>
|
<div>
|
||||||
<p class="progress-bar-text">Meu Carrinho</p>
|
<p class="progress-bar-text">Meu Carrinho</p>
|
||||||
<p id="progress-bar-circle-1" class="progress-bar-circle-1 active"></p>
|
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
|
||||||
<p class="progress-bar-line-left"></p>
|
<p class="progress-bar-line-left"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -61,4 +61,208 @@ export default class Header {
|
|||||||
this.progressBar.innerHTML = ``;
|
this.progressBar.innerHTML = ``;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async progressBarProgress() {
|
||||||
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
|
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||||
|
|
||||||
|
progressBarLista.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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 === "https://m3academy.myvtex.com/checkout/#/email" ||
|
||||||
|
window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" ||
|
||||||
|
window.location.href === "https://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-1"
|
||||||
|
].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 === "https://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-1"
|
||||||
|
].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-1"
|
||||||
|
].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-1"
|
||||||
|
].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