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

feat(footer): added js to footer

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-12-14 15:35:30 -03:00
parent 069256fa9d
commit 7d2d424712
1 changed files with 82 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,13 +7,94 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.createPaymentsIcons();
this.createVtexpciIcon();
this.createDevIcons();
}
async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.payments = await waitElement(".footerCheckout__payments");
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy");
}
createPaymentsIcons() {
this.payments.innerHTML = `
<ul class="payments-icons-wrapper">
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</li>
</ul>
</div>
`;
}
createVtexpciIcon() {
this.vtexpci.innerHTML = `
<img class="vtex-icon"
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt=""
/>
`;
}
createDevIcons() {
this.devIncons.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</a>
</li>
`;
}
onUpdate() {