SabrinaMiranda/m3-academy-template-checkout-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Aplica o script na barra de progresso

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-15 12:18:08 -03:00
parent 40575c7605
commit 7a768f242f
1 changed files with 103 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,22 +8,16 @@ export default class Header {
async init() {
await this.selectors();
//console.log(this.item);
this.progressBarHTML();
await this.progressBarChange();
}
async selectors() {
/*this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});*/
this.progressBar = await waitElement("#progressBar");
}
progressBarHTML() {
if(this.progressBar && window.innerWidth >1024) {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
@ -56,8 +50,108 @@ export default class Header {
</li>
</ul>
`;
} else if(this.progressBar && window.innerWidth <= 1024) {
} else if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = "";
}
}
async progressBarChange() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarList = document.querySelectorAll("#progressBar ul li");
progressBarList.forEach((li) => {
const progressBarCircle1 = li.children[0].children[0].children["progress-bar-circle-1"];
const progressBarCircle2 = li.children[0].children[0].children["progress-bar-circle-2"];
const progressBarCircle3 = li.children[0].children[0].children["progress-bar-circle-3"];
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (progressBarCircle1) {
progressBarCircle1.classList.add("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.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 (progressBarCircle1) {
progressBarCircle1.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.classList.remove("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.add("active");
}
} else if (window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") {
if (progressBarCircle1) {
progressBarCircle1.classList.remove("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.classList.add("active");
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (progressBarCircle1) {
progressBarCircle1.classList.add("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.classList.remove("active");
}
} else if (window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping") {
if (progressBarCircle1) {
progressBarCircle1.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.classList.remove("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.add("active");
}
} else if (window.location.hash == "#/payment") {
if (progressBarCircle1) {
progressBarCircle1.classList.remove("active");
}
if (progressBarCircle2) {
progressBarCircle2.classList.remove("active");
}
if (progressBarCircle3) {
progressBarCircle3.classList.add("active");
}
}
});
});
}
}
}