forked from M3-Academy/m3-academy-template-checkout
feat(header): add barra de progresso
This commit is contained in:
parent
a407a85099
commit
85ed21c2b9
@ -8,14 +8,52 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
console.log(this.item);
|
||||
this.progressBarHTML();
|
||||
setTimeout(this.changeTexts(), 900);
|
||||
|
||||
// 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");
|
||||
this.chooseProductsBtn = await waitElement("#cart-choose-products");
|
||||
}
|
||||
|
||||
progressBarHTML() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
<li>
|
||||
<div class="container-li">
|
||||
<p class="progress-bar-text">Meu Carrinho</p>
|
||||
<p id="progress-bar-circle-1" class="progress-bar-circle"></p>
|
||||
<p class="progress-bar-line-1"></p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="center">
|
||||
<div class="container-li">
|
||||
<p class="progress-bar-text">Dados Pessoais</p>
|
||||
<p id="progress-bar-circle-2" class="progress-bar-circle"></p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="container-li">
|
||||
<p class="progress-bar-text">Pagamento</p>
|
||||
<p id="progress-bar-circle-3" class="progress-bar-circle"></p>
|
||||
<p class="progress-bar-line-2"></p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
if (this.progressBar && window.innerWidth <= 1024) {
|
||||
this.progressBar.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
|
||||
changeTexts() {
|
||||
this.chooseProductsBtn.innerText = "Continuar comprando";
|
||||
// console.log(this.this.chooseProductsBtn.innerText);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user