RamonDiasFerreira/m3-academy-template-checkout-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(barProgress): adiciona a class active, mas somente com reload da pagina.

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-14 14:59:33 -03:00
parent 15ee33cce8
commit e367a5ea71
1 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,8 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.progressBar); console.log(this.progressBar);
this.progressBarHTML() this.progressBarHTML();
await this.barProgress()
} }
async selectors() { async selectors() {
@ -32,19 +33,19 @@ export default class Header {
<li> <li>
<div class="containerLi"> <div class="containerLi">
<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"> </p> <p id="progress-bar-circle-1" class="progress-bar-circle-1"> </p>
</div> </div>
</li> </li>
<li class="central"> <li class="central">
<div class="containerLi"> <div class="containerLi">
<p class="progress-bar-text">Dados Pessoais</p> <p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle"> </p> <p id="progress-bar-circle-2" class="progress-bar-circle-2"> </p>
</div> </div>
</li> </li>
<li> <li>
<div class="containerLi"> <div class="containerLi">
<p class="progress-bar-text">Pagamentos</p> <p class="progress-bar-text">Pagamentos</p>
<p id="progress-bar-circle-3" class="progress-bar-circle"> </p> <p id="progress-bar-circle-3" class="progress-bar-circle-3"> </p>
</div> </div>
</li> </li>
</ul> </ul>
@ -55,6 +56,69 @@ export default class Header {
} }
} }
async barProgress() {
if (this.progressBar && window.innerWidth > 1024) {
const barList = document.querySelectorAll(".progress-bar ul li");
barList.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")
}
}
})
}
}
} }