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

feat: criando o html em javascript para o header

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-12-15 17:42:35 -03:00
parent 30555d9098
commit eb0cdf0455
6 changed files with 287 additions and 35351 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

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

@ -8,14 +8,39 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.events();
}
async selectors() {
this.item = await waitElement("#my-element", {
this.progressBar = await waitElement("#progressBar", {
//#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.document = $(document);
}
events() {
this.document.ready(() => {
this.createProgressBar();
});
}
createProgressBar() {
const progressBar = `
<div class="progress-bar__wrapper">
<span class="progress-bar__title">Meu Carrinho</span>
<span class="progress-bar__status cart"></span>
</div>
<div class="progress-bar__wrapper">
<span class="progress-bar__title">Dados Pessoais</span>
<span class="progress-bar__status profile"></span>
</div>
<div class="progress-bar__wrapper">
<span class="progress-bar__title">Pagamento</span>
<span class="progress-bar__status payment"></span>
</div>
`;
console.log(this.progressBar);
this.progressBar.innerHTML = progressBar;
}
}

24
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -34,3 +34,27 @@
}
}
}
.progress-bar {
display: flex;
&__title {
margin-bottom: 15px;
}
&__wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
&__status {
width: 24px;
height: 24px;
border: 1px solid #000000;
border-radius: 50%;
&.cart {
padding: 0;
margin: 0;
}
}
}

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

@ -1,20 +1,26 @@
<!-- 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">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>
</div>
</header>
</div>
</header>

24578
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -35,6 +35,7 @@
"dependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"cross-env": "^7.0.3",
"slick-carousel": "^1.8.1"
}
}