forked from M3-Academy/m3-academy-template-checkout
feat: funcionalidade do progress bar
This commit is contained in:
parent
2284341c74
commit
9f2bb80ca9
@ -4,31 +4,131 @@ import { waitElement } from "m3-utils";
|
||||
export default class Header {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.ProgresseBar.bind(this);
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.ProgresseBar();
|
||||
this.ProgresseBarHTML();
|
||||
this.progresseBarUrl();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.barHTML = await waitElement(".progress-bar");
|
||||
}
|
||||
|
||||
ProgresseBar() {
|
||||
ProgresseBarHTML() {
|
||||
if(window.innerWidth > 1024) {
|
||||
this.barHTML.innerHTML = `
|
||||
<ul>
|
||||
<ul class="conteir-ul">
|
||||
<li class="conteiner-progressBar">
|
||||
<div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
|
||||
<div class="conteinerRelative">
|
||||
<div class="conteinerItems">
|
||||
<p class="textBar">Meu Carrinho</p>
|
||||
<div id="cartCircle1" class="circle activeCircle"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="conteiner-progressBar">
|
||||
<div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
|
||||
<li class="conteiner-progressBar conteiner-progressBar-center">
|
||||
<div class="conteinerRelative">
|
||||
<div class="conteinerItems">
|
||||
<p class="textBar">Dados Pessoais</p>
|
||||
<div id="cartCircle2" class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="conteiner-progressBar">
|
||||
<div class="conteinerItems"><p class="textBar">Meu Carrinho</p><div class="circle"></div></div>
|
||||
<li class="conteiner-progressBar conteiner-progressBar-last">
|
||||
<div class="conteinerRelative conteiner-Relative-last">
|
||||
<div class="conteinerItems">
|
||||
<p class="textBar">Finalização</p>
|
||||
<div id="cartCircle3" class="circle"></div>
|
||||
<div class="bar barLast"></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
} else{
|
||||
this.barHTML.innerHTML = ``;
|
||||
};
|
||||
};
|
||||
|
||||
progresseBarUrl() {
|
||||
this.Circle1 = document.getElementById("cartCircle1");
|
||||
this.Circle2 = document.getElementById("cartCircle2");
|
||||
this.Circle3 = document.getElementById("cartCircle3");
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/cart' && localStorage.getItem('cart') === '1')
|
||||
{
|
||||
this.Circle1.classList.add('activeCircle');
|
||||
this.Circle2.classList.remove("activeCircle")
|
||||
this.Circle3.classList.remove("activeCircle")
|
||||
console.log('1')
|
||||
}
|
||||
}
|
||||
else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/email' && localStorage.getItem('profile') === '2'
|
||||
|| window.location.href === 'https://m3academy.myvtex.com/checkout/#/profile' && localStorage.getItem('profile') === '2'
|
||||
|| window.location.href === 'https://m3academy.myvtex.com/checkout/#/shipping' && localStorage.getItem('profile') === '2')
|
||||
{
|
||||
this.Circle1.classList.remove("activeCircle")
|
||||
this.Circle2.classList.add("activeCircle");
|
||||
this.Circle3.classList.remove("activeCircle")
|
||||
console.log('2')
|
||||
} else if(window.location.href === 'https://m3academy.myvtex.com/checkout/#/payment' && localStorage.getItem('payment') === '3'){
|
||||
this.Circle1.classList.remove("activeCircle")
|
||||
this.Circle2.classList.remove("activeCircle")
|
||||
this.Circle3.classList.add("activeCircle");
|
||||
console.log('3')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.addEventListener("hashchange", (props) => {
|
||||
const currentState = props.currentTarget.location.hash.split('/');
|
||||
|
||||
switch(currentState[1]) {
|
||||
case 'cart':
|
||||
this.Circle1.classList.add("activeCircle");
|
||||
this.Circle2.classList.remove("activeCircle")
|
||||
this.Circle3.classList.remove("activeCircle")
|
||||
localStorage.setItem('cart', 1);
|
||||
break;
|
||||
case 'email':
|
||||
case 'profile':
|
||||
case 'shipping':
|
||||
this.Circle1.classList.remove("activeCircle")
|
||||
this.Circle2.classList.add("activeCircle");
|
||||
this.Circle3.classList.remove("activeCircle")
|
||||
localStorage.setItem('profile', 2);
|
||||
break;
|
||||
case 'payment':
|
||||
this.Circle1.classList.remove("activeCircle")
|
||||
this.Circle2.classList.remove("activeCircle")
|
||||
this.Circle3.classList.add("activeCircle");
|
||||
localStorage.setItem('payment', 3);
|
||||
break;
|
||||
};
|
||||
});
|
||||
};
|
||||
/*progresseBarload(){
|
||||
window.addEventListener('load', () => {
|
||||
if(localStorage.getItem('cart') === '1' && this.currentState[1] === 'cart'){
|
||||
Circle1.classList.add('activeCircle');
|
||||
console.log('test 1')
|
||||
}
|
||||
switch(localStorage.getItem('cart') || localStorage.getItem('profile') || localStorage.getItem('payment')) {
|
||||
case '1' :
|
||||
document.getElementById('cartCircle1').classList.add('activeCircle');
|
||||
console.log('test 1')
|
||||
break;
|
||||
case '2' :
|
||||
document.getElementById('cartCircle2').classList.add('activeCircle');
|
||||
console.log('test 2')
|
||||
break;
|
||||
case '3':
|
||||
document.getElementById('cartCircle3').classList.add('activeCircle');
|
||||
break;
|
||||
}
|
||||
});
|
||||
}*/
|
||||
};
|
||||
|
||||
@ -1,23 +1,100 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
border-bottom: 1px solid #000;
|
||||
.container {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 29px 0;
|
||||
padding: 29px 0;
|
||||
|
||||
.progress-bar{
|
||||
width: 43.1237721021611%;
|
||||
height: 35px;
|
||||
|
||||
.conteir-ul{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.conteiner-progressBar{
|
||||
display: flex;
|
||||
width: 39.41%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
.conteinerRelative {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.conteinerItems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.textBar{
|
||||
font-family: 'Tenor Sans';
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 9px;
|
||||
};
|
||||
.circle{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
|
||||
};
|
||||
.activeCircle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
// border: 1px solid black;
|
||||
background-color: black;
|
||||
border-radius: 50%;
|
||||
};
|
||||
.bar{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border-top: 1px solid black;
|
||||
margin-bottom: 8px;
|
||||
left: 25%;
|
||||
bottom: -7%;
|
||||
};
|
||||
.barLast{
|
||||
left: -22%;
|
||||
}
|
||||
};
|
||||
|
||||
.conteinerItems-last{
|
||||
align-content: flex-end
|
||||
}
|
||||
};
|
||||
.conteiner-Relative-last{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
};
|
||||
|
||||
.conteiner-progressBar-center{
|
||||
width: auto;
|
||||
margin-left: 3.49px
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
&__logo {
|
||||
img {
|
||||
height: 37.14px;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
&__safeBuy {
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -26,13 +103,18 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
line-height: 16.34px;
|
||||
color: $color-gray;
|
||||
}
|
||||
};
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user