MateusLopes/m3-academy-template-checkout-Mateus-Lopes
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): add funcionalidade progress bar

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-12-17 10:36:04 -03:00
parent 6e584b6dfb
commit ae44ae9dd1
1 changed files with 204 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
checkout/src/arquivos/js/components/Header.js
View File

@ -9,15 +9,14 @@ export default class Header {
async init() {
await this.selectors();
this.progressBarHTML();
setTimeout(this.changeTexts(), 900);
// this.progressBarProgress();
await this.progressBarWorking();
// await this.changeTexts();
}
async selectors() {
this.header = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
this.chooseProductsBtn = await waitElement("#cart-choose-products");
// this.chooseProductsBtn = await waitElement("#cart-choose-products");
}
progressBarHTML() {
@ -52,8 +51,206 @@ export default class Header {
}
}
changeTexts() {
this.chooseProductsBtn.innerText = "Continuar comprando";
// console.log(this.this.chooseProductsBtn.innerText);
async progressBarWorking() {
if (this.progressBar && window.innerWidth > 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["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);
// }
}