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

feat(ProgressBar): Finaliza Js

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-12-14 22:18:16 -03:00
parent 02b840deab
commit 5eca10c679
1 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,41 +4,159 @@ 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();
await this.progressBarActive();
} }
async selectors() { async selectors() {
this.header - await waitElement('.headerCheckout'); this.header - await waitElement('.headerCheckout');
this.progressBar = await waitElement('#progressBar'); this.progressBar = await waitElement('#progressBar');
} }
progressBarHTML () { progressBarHTML () {
if(window.screen.width > 1024) { if(this.progressBar || window.screen.width > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul class="container-ul"> <ul class="container-ul">
<li class="container-li"> <li class="container-li">
<p class="text">Meu carrinho</p> <p class="text">Meu carrinho</p>
<p class="circle-1"></p> <p class="circle-1" id="circle-1"></p>
<p class="linha-1"></p> <p class="linha-1"></p>
</li> </li>
<li class="container-li"> <li class="container-li">
<p class="text">Dados Pessoais</p> <p class="text">Dados Pessoais</p>
<p class="circle-2"></p> <p class="circle-2" id="circle-2"></p>
<p class="linha-2"></p> <p class="linha-2"></p>
</li> </li>
<li class="container-li"> <li class="container-li">
<p class="text">Pagamento</p> <p class="text">Pagamento</p>
<p class="circle-3"></p> <p class="circle-3" id="circle-3"></p>
</li> </li>
</ul>`; </ul>`;
} }
if (window.screen.width <= 1024) { if (this.progressBar && window.screen.width <= 1024) {
this.progressBar.innerHTML = ``; 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')
}
}
})
});
}
}
}; };