forked from M3-Academy/m3-academy-template-checkout
feat(header):Criando barra de progresso
This commit is contained in:
parent
2dab582c69
commit
2123afe1a4
@ -8,14 +8,94 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
// console.log(this.item);
|
||||
this.progressBarHtml();
|
||||
this.progressBarProgress();
|
||||
window.addEventListener("hashchange", () => {
|
||||
this.progressBarProgress();
|
||||
});
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.item = await waitElement("#my-element", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
progressBarHtml() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<div class="container-progress-bar">
|
||||
<div class="step-one">
|
||||
<p>Meu carrinho</p>
|
||||
<div id="circle-progress" class="circle-progress1"></div>
|
||||
</div>
|
||||
<div class="step-two">
|
||||
<p>Dados Pessoais</p>
|
||||
<div id="circle-progress" class="circle-progress2"></div>
|
||||
</div>
|
||||
|
||||
<div class="step-three" >
|
||||
<p>Pagamento</p>
|
||||
<div id="circle-progress" class="circle-progress3"></div>
|
||||
</div>
|
||||
|
||||
<div class="box-progress-bar">
|
||||
<div class="bar-one"></div>
|
||||
<div class="bar-two"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<hr/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
|
||||
checkActiveColor(elements, index) {
|
||||
elements.forEach((element, position) => {
|
||||
if (index === position) {
|
||||
if (!element.classList.contains("active")) {
|
||||
element.classList.add("active");
|
||||
}
|
||||
} else {
|
||||
if (element.classList.contains("active")) {
|
||||
element.classList.remove("active");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
progressBarProgress() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#circle-progress");
|
||||
progressBarLista.forEach((_element, _index, array) => {
|
||||
const urlCart = "https://m3academy.myvtex.com/checkout/#/cart";
|
||||
const urlEmail = "https://m3academy.myvtex.com/checkout/#/email";
|
||||
const urlProfile = "https://m3academy.myvtex.com/checkout/#/profile";
|
||||
const urlShipping = "https://m3academy.myvtex.com/checkout/#/shipping";
|
||||
const urlPayment = "https://m3academy.myvtex.com/checkout/#/payment";
|
||||
switch (window.location.href) {
|
||||
case urlCart:
|
||||
this.checkActiveColor(array, 0);
|
||||
break;
|
||||
case urlEmail:
|
||||
this.checkActiveColor(array, 1);
|
||||
break;
|
||||
case urlProfile:
|
||||
this.checkActiveColor(array, 1);
|
||||
break;
|
||||
case urlShipping:
|
||||
this.checkActiveColor(array, 1);
|
||||
break;
|
||||
case urlPayment:
|
||||
this.checkActiveColor(array, 2);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,95 @@
|
||||
.headerCheckout {
|
||||
.container {
|
||||
width: auto !important;
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container-progress-bar {
|
||||
width: 440px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100px;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-one, .step-two, .step-three {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-progress-bar {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
z-index: -1;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 22px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.bar-one {
|
||||
width: calc(50% - 50px);
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.bar-two {
|
||||
width: calc(50% - 50px);
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.circle-progress1, .circle-progress2, .circle-progress3 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: none;
|
||||
background-color:#000;
|
||||
}
|
||||
|
||||
.step-one p, .step-two p, .step-three p {
|
||||
line-height: 15px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
// margin: 10px 0;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
|
||||
@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #292929;
|
||||
$color-black-full:#000000;
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
|
||||
@ -18,3 +18,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user