forked from M3-Academy/m3-academy-template-checkout
Feature/Autenticacao #1
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user