forked from M3-Academy/m3-academy-template-checkout
feat(header): add funcionalidade progress bar
This commit is contained in:
parent
6e584b6dfb
commit
ae44ae9dd1
@ -9,15 +9,14 @@ export default class Header {
|
|||||||
async init() {
|
async init() {
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
this.progressBarHTML();
|
this.progressBarHTML();
|
||||||
setTimeout(this.changeTexts(), 900);
|
await this.progressBarWorking();
|
||||||
|
// await this.changeTexts();
|
||||||
// this.progressBarProgress();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
async selectors() {
|
||||||
this.header = await waitElement(".headerCheckout");
|
this.header = await waitElement(".headerCheckout");
|
||||||
this.progressBar = await waitElement("#progressBar");
|
this.progressBar = await waitElement("#progressBar");
|
||||||
this.chooseProductsBtn = await waitElement("#cart-choose-products");
|
// this.chooseProductsBtn = await waitElement("#cart-choose-products");
|
||||||
}
|
}
|
||||||
|
|
||||||
progressBarHTML() {
|
progressBarHTML() {
|
||||||
@ -52,8 +51,206 @@ export default class Header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
changeTexts() {
|
async progressBarWorking() {
|
||||||
this.chooseProductsBtn.innerText = "Continuar comprando";
|
if (this.progressBar && window.innerWidth > 1024) {
|
||||||
// console.log(this.this.chooseProductsBtn.innerText);
|
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["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.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["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.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"].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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// async changeTexts() {
|
||||||
|
// const chooseProductsBtn = document.getElementById("cart-choose-products");
|
||||||
|
// let texto = (chooseProductsBtn.innerHTML = "Continuar comprando");
|
||||||
|
// console.log(chooseProductsBtn);
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user