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 {
constructor() {
this.init();
this.footerHTML();
this.addCarrossel();
}
@ -62,7 +61,6 @@ export default class Footer {
</div>
`
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 {
constructor() {
this.init();
this.progressBarHTML();
}
async init() {
await this.selectors();
this.progressBarHTML();
this.stopPointBar();
}
async selectors() {
@ -26,7 +26,7 @@ export default class Header {
<p class="text-pagamento">Pagamento</p>
</div>
<ul class="progressbar-ul">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</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")
}
}
})
})
}
}
}