RamonDiasFerreira/m3-academy-template-checkout-ramon-dias-ferreira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(progressBarHTML): Utiliza innerHTML para inserir a estrutura HTML do progressbar e suas classes, incluindo if para somente em telas maiores que 1024.

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-14 00:23:46 -03:00
parent 30555d9098
commit 15ee33cce8
2 changed files with 127 additions and 10886 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10970
checkout/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -8,14 +8,53 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); console.log(this.progressBar);
this.progressBarHTML()
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.header = await waitElement(".headerCheckout__wrapper", {
//#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.progressBar = await waitElement("#progressBar", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar //#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 timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
}); });
} }
progressBarHTML() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerLi">
<p class="progress-bar-text">Meu Carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle"> </p>
</div>
</li>
<li class="central">
<div class="containerLi">
<p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle"> </p>
</div>
</li>
<li>
<div class="containerLi">
<p class="progress-bar-text">Pagamentos</p>
<p id="progress-bar-circle-3" class="progress-bar-circle"> </p>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth <= 1024) {
this.progressBar.innerHTML = ``;
}
}
} }