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() {
await this.selectors();
console.log(this.item);
this.events();
this.criaProgressBar();
console.log(this.progressBar);
}
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.headerCheckout = await waitElement(".headerCheckout");
this.progressBar = await waitElement("#progressBar");
}
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,
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
<header class="headerCheckout">
<div class="container">
<div class="headerCheckout__wrapper">
<div class="headerCheckout__logo">
<a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
</a>
</div>
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
</div>
<div class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
<span>Compra segura</span>
</div>
<header class="headerCheckout">
<div class="container">
<div class="headerCheckout__wrapper">
<div class="headerCheckout__logo">
<a href="/">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
alt="M3 Academy"
/>
</a>
</div>
<div id="progressBar" class="progress-bar">
</div>
<div class="headerCheckout__safeBuy">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
alt="Cadeado"
/>
<span>Compra segura</span>
</div>
</div>
</header>
</div>
</header>