Thiago.bronisio/m3-academy-template-checkout-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona pontos de parada no progressbar de acordo com a hash #3

Merged
Thiago.bronisio merged 1 commits from feature/hash-progressbar into main 2022-12-14 03:04:59 +00:00
Conversation 0 Commits 1 Files Changed 2 +123 -5
2 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
checkout/src/arquivos/js/components/Footer.js
View File

@ -3,8 +3,7 @@ import { waitElement } from "m3-utils";
export default class Footer { export default class Footer {
constructor() { constructor() {
this.init(); this.init();
this.footerHTML();
this.addCarrossel();
} }
@ -62,7 +61,6 @@ export default class Footer {
</div> </div>
` `
footerPrat.children[1].appendChild(li) footerPrat.children[1].appendChild(li)
console.log(footerPrat.children[1])
}) })
}) })

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

@ -4,12 +4,12 @@ import { waitElement } from "m3-utils";
export default class Header { export default class Header {
constructor() { constructor() {
this.init(); this.init();
this.progressBarHTML();
} }
async init() { async init() {
await this.selectors(); await this.selectors();
this.progressBarHTML(); this.progressBarHTML();
this.stopPointBar();
} }
async selectors() { async selectors() {
@ -26,7 +26,7 @@ export default class Header {
<p class="text-pagamento">Pagamento</p> <p class="text-pagamento">Pagamento</p>
</div> </div>
<ul class="progressbar-ul"> <ul class="progressbar-ul">
<li class="active"></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
</ul> </ul>
@ -37,4 +37,124 @@ export default class Header {
} }
}; };
async stopPointBar() {
if (this.progressBar && window.innerWidth > 1024) {
const progressBarLista = document.querySelectorAll(".progressbar-ul")
progressBarLista.forEach((progressBarLista) => {
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
if (progressBarLista.children[0]) {
progressBarLista.children[0].classList.add("active")
}
if (progressBarLista.children[1]) {
if (progressBarLista.children[1].classList.contains("active")) {
progressBarLista.children[1].classList.remove("active")
}
}
if (progressBarLista.children[2]) {
if (progressBarLista.children[2].classList.contains("active")) {
progressBarLista.children[2].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 (progressBarLista.children[0]) {
if (progressBarLista.children[0].classList.contains("active")) {
progressBarLista.children[0].classList.remove("active")
}
}
if (progressBarLista.children[1]) {
progressBarLista.children[1].classList.add("active")
}
if (progressBarLista.children[2]) {
if (progressBarLista.children[2].classList.contains("active")) {
progressBarLista.children[2].classList.remove("active")
}
}
}
else if (window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") {
if (progressBarLista.children[0]) {
if (progressBarLista.children[0].classList.contains("active")) {
progressBarLista.children[0].classList.remove("active")
}
}
if (progressBarLista.children[1]) {
if (progressBarLista.children[1].classList.contains("active")) {
progressBarLista.children[1].classList.remove("active")
}
}
if (progressBarLista.children[2]) {
progressBarLista.children[2].classList.add("active")
}
}
window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") {
if (progressBarLista.children[0]) {
progressBarLista.children[0].classList.add("active")
}
if (progressBarLista.children[1]) {
if (progressBarLista.children[1].classList.contains("active")) {
progressBarLista.children[1].classList.remove("active")
}
}
if (progressBarLista.children[2]) {
if (progressBarLista.children[2].classList.contains("active")) {
progressBarLista.children[2].classList.remove("active")
}
}
}
else if (window.location.hash == "#/email" ||
window.location.hash == "#/profile" ||
window.location.hash == "#/shipping") {
if (progressBarLista.children[0]) {
if (progressBarLista.children[0].classList.contains("active")) {
progressBarLista.children[0].classList.remove("active")
}
}
if (progressBarLista.children[1]) {
progressBarLista.children[1].classList.add("active")
}
if (progressBarLista.children[2]) {
if (progressBarLista.children[2].classList.contains("active")) {
progressBarLista.children[2].classList.remove("active")
}
}
}
else if (window.location.hash == "#/payment") {
if (progressBarLista.children[0]) {
if (progressBarLista.children[0].classList.contains("active")) {
progressBarLista.children[0].classList.remove("active")
}
}
if (progressBarLista.children[1]) {
if (progressBarLista.children[1].classList.contains("active")) {
progressBarLista.children[1].classList.remove("active")
}
}
if (progressBarLista.children[2]) {
progressBarLista.children[2].classList.add("active")
}
}
})
})
}
}
} }