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

feat: Criação do JS do Footer

Browse Source
This commit is contained in:
José Carlos Lins 2022-12-10 08:12:53 -03:00
parent 15cf408be2
commit f4acc320a3
1 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ export default class Footer {
async init() {
await this.selectors();
await this.addImagesFooter();
// this.onUpdate();
}
@ -14,6 +15,9 @@ export default class Footer {
//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.checkoutPayments = await waitElement(".footerCheckout__stamps");
this.developBy = await waitElement(".footerCheckout__developedBy");
console.log(this.developBy);
}
onUpdate() {
@ -37,4 +41,29 @@ export default class Footer {
slidesToScroll: 1,
});
}
async addImagesFooter() {
this.checkoutPayments.children[0].innerHTML = `
<div class="footerCheckout__payments">
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hipercardM3Academy.png" alt="Logo HiperCard" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto" />
</div>
`;
this.checkoutPayments.children[2].innerHTML = `
<div class="footerCheckout__payments">
<img class="vtexIcon" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo VTEX PCI Certificado" />
</div>
`;
this.developBy.children[0].children[0].innerHTML = `
<span>Powered by</span><img class="logoVtexFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo VTEX" />
`;
this.developBy.children[1].children[0].innerHTML = `
<span>Developed by</span><img class="logoM3Footer" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3" />
`;
}
}