NicollyVieira/m3-academy-template-checkout-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria o html do Progress Bar

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2022-12-12 12:47:44 -03:00
parent 2dab582c69
commit 35be89536d
3 changed files with 159 additions and 10905 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

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

@ -8,14 +8,59 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); this.events();
this.criaProgressBar();
console.log(this.progressBar);
} }
async selectors() { async selectors() {
this.item = await waitElement("#my-element", { this.headerCheckout = await waitElement(".headerCheckout");
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar this.progressBar = await waitElement("#progressBar");
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
} }
events() {
window.addEventListener("resize", this.criaProgressBar.bind(this));
}
criaProgressBar() {
if(window.innerWidth > 1024) {
if(this.progressBar) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="container-li">
<div>
<p>Meu Carrinho</p>
<p class="progress-bar-circle-1"></p>
<p class="progress-bar-line-1"></p>
</div>
</div>
</li>
<li class="central">
<div class="container-li">
<div>
<p>Dados Pessoais</p>
<p class="progress-bar-circle-2"></p>
</div>
</div>
</li>
<li>
<div class="container-li">
<div>
<p>Pagamento</p>
<p class="progress-bar-circle-3"></p>
<p class="progress-bar-line-3"></p>
</div>
</div>
</li>
</ul>
`;
}
} else {
this.progressBar.innerHTML = "";
console.log("passando");
}
}
} }

37
checkout/src/template-checkout/checkout-header.html
View File

@ -1,20 +1,27 @@
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente, <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. --> MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
<header class="headerCheckout"> <header class="headerCheckout">
<div class="container"> <div class="container">
<div class="headerCheckout__wrapper"> <div class="headerCheckout__wrapper">
<div class="headerCheckout__logo"> <div class="headerCheckout__logo">
<a href="/"> <a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/> <img
</a> src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
</div> alt="M3 Academy"
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso />
</div> </a>
<div class="headerCheckout__safeBuy"> </div>
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/> <div id="progressBar" class="progress-bar">
<span>Compra segura</span>
</div> </div>
<div class="headerCheckout__safeBuy">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
alt="Cadeado"
/>
<span>Compra segura</span>
</div> </div>
</div> </div>
</header> </div>
</header>