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

feat(header): criado e alterado script.

Browse Source
This commit is contained in:
Luiz Felipe Silva 2022-12-26 20:51:04 -03:00
parent e7e7715e6c
commit 565fe07952
1 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,18 +4,75 @@ import { waitElement } from "m3-utils";
export default class Header {
constructor() {
this.init();
this.criaBarraProgresso();
}
async init() {
await this.selectors();
console.log(this.item);
this.monitoraBarraProgresso();
}
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.barraProgresso = document.querySelector(".progress-bar");
this.circulo1 = await waitElement(".progress-bar__circle1");
this.circulo2 = await waitElement(".progress-bar__circle2");
this.circulo3 = await waitElement(".progress-bar__circle3");
}
criaBarraProgresso() {
this.barraProgresso.innerHTML = `
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Meu Carrinho</p>
<p class="progress-bar__circle1 active"></p>
<p class="progress-bar__line1"></p>
</div>
</div>
</li>
</ul>
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Dados Pessoais</p>
<p class="progress-bar__circle2"></p>
</div>
</div>
</li>
</ul>
<ul class="progress-bar__container">
<li class="progress-bar__container-items">
<div class="progress-bar__wrapper">
<div class="progress-bar__container-item">
<p class="progress-bar__text">Pagamento</p>
<p class="progress-bar__circle3"></p>
<p class="progress-bar__line2"></p>
</div>
</div>
</li>
</ul>
`;
}
monitoraBarraProgresso() {
setInterval(() => {
if (window.location.hash == "#/cart") {
this.circulo1.classList.add("active");
this.circulo2.classList.remove("active");
this.circulo3.classList.remove("active");
} else if (window.location.hash != "#/cart" && window.location.hash != "#/payment") {
this.circulo1.classList.remove("active");
this.circulo2.classList.add("active");
this.circulo3.classList.remove("active");
} else if (window.location.hash == "#/payment") {
this.circulo1.classList.remove("active");
this.circulo2.classList.remove("active");
this.circulo3.classList.add("active");
}
}, 100);
}
}