diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index a3034ed..8d34599 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -4,41 +4,159 @@ import { waitElement } from "m3-utils"; export default class Header { constructor() { this.init(); + this.progressBarHTML(); } async init() { await this.selectors(); this.progressBarHTML(); + await this.progressBarActive(); } + async selectors() { this.header - await waitElement('.headerCheckout'); this.progressBar = await waitElement('#progressBar'); } progressBarHTML () { - if(window.screen.width > 1024) { + if(this.progressBar || window.screen.width > 1024) { this.progressBar.innerHTML = ` `; } - if (window.screen.width <= 1024) { + if (this.progressBar && window.screen.width <= 1024) { this.progressBar.innerHTML = ``; } }; + + async progressBarActive () { + if (this.progressBar && window.screen.width > 1024) { + const progressBarLi = document.querySelectorAll('#progressBar ul li') + progressBarLi.forEach((li) => { + if(window.location.href == "https://m3academy.myvtex.com/checkout/#/cart") { + if(li.children['circle-1']) { + li.children['circle-1'].classList.add('active') + } + + if(li.children['circle-2']) { + if(li.children['circle-2'].classList.contains('active')) { + li.children['circle-2'].classList.remove('active') + } + } + if(li.children['circle-3']) { + if (li.children['circle-3'].classList.contains('active')) { + li.children['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['circle-1']) { + if(li.children['circle-1'].classList.contains('active')) { + li.children['circle-1'].classList.remove('active') + } + }; + + if(li.children['circle-2']) { + li.children['circle-1'].classList.add('active') + }; + + if(li.children['circle-3']) { + if(li.children['circle-3'].classList.contains('active')) { + li.children['circle-1'].classList.remove('active') + }; + } + } + + else if (window.location.href == "https://m3academy.myvtex.com/checkout/#/payment") { + + if(li.children['circle-1']) { + if(li.children['circle-1'].classList.contains('active')) { + li.children['circle-1'].classList.remove('active') + } + } + + if(li.children['circle-2']) { + if(li.children['circle-2'].classList.contains('active')) { + li.children['circle-2'].classList.remove('active') + } + } + + if(li.children['circle-3']) { + li.children['circle-3'].classList.add('active') + } + + } + + window.addEventListener('hashchange', () => { + if(window.location.hash == '#/cart') { + if(li.children['circle-1']) { + li.children['circle-1'].classList.add('active') + } + if(li.children['circle-2']) { + if (li.children['circle-2'].classList.contains('active')) { + li.children['circle-2'].classList.remove('active') + } + } + if(li.children['circle-3']) { + if(li.children['circle-3'].classList.contains('active')) { + li.children['circle-3'].classList.remove('active') + } + } + } + + else if(window.location.hash == '#/email' || window.location.hash == '#/profile' || window.location.hash == '#/shipping') { + if(li.children['circle-1']) { + if(li.children['circle-1'].classList.contains('active')) { + li.children['circle-1'].classList.remove('active') + } + } + if(li.children['circle-2']){ + li.children['circle-2'].classList.add('active') + } + if(li.children['circle-3']) { + if(li.children['circle-3'].classList.contains('active')) { + li.children['circle-3'].classList.remove('active') + } + } + } + else if(window.location.hash == '#/payment') { + if(li.children['circle-1']) { + if(li.children['circle-1'].classList.contains('active')) { + li.children['circle-1'].classList.remove('active') + } + } + if(li.children['circle-2']) { + if(li.children['circle-2'].classList.contains('active')){ + li.children['circle-2'].classList.remove('active') + } + } + if(li.children['circle-3']) { + li.children['circle-3'].classList.add('active') + } + } + }) + + }); + } + } + };