ueberjames/m3-academy-template-checkout-ueber-james
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

criação do algoritimo para aplica a Primeira parte para coloca o html

Browse Source
This commit is contained in:
Ueber James Santos 2022-12-12 13:17:03 -03:00
parent c718163907
commit 0165e17ca4
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
/* eslint-disable prettier/prettier */
// import waitForEl from "../helpers/waitForEl"; // import waitForEl from "../helpers/waitForEl";
import { waitElement } from "m3-utils"; import { waitElement } from "m3-utils";
@ -8,14 +9,43 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.progessBarHTML();
await this.progressBarProgress();
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.herader = await waitElement (".headerCheckout")
this.progressBar = await waitElement ("#progressBar")
("#my-element", {
//#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
}); });
} }
progessBarHTML(){
// eslint-disable-next-line no-empty
if( this.progressBar && window.innerHeight > 1024){
this.progressBar.innerHTML = `
<ul>
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="pogress-bar-circle-1 class="progress-bar-circle-1"></p><p progress-bar-line-1></p></div></div>
</li>
<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Meus Dados</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div>
</li>
<li><div class="containerLi"><div><p class="progress-bar-text">Pagamento</p><p id="pogress-bar-circle-3 class="progress-bar-circle-3"></p><p progress-bar-line-2></p></div></div>
</li>
</ul>
`
}
if(this.progressBar && window.innerHeight <= 1024){
this.progressBar.innerHTML = ``;
}
}
} }