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

feat(footer): Cria o html dos icones de pagamento e vtex pci e aplica css no mesmo

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-15 15:34:39 -03:00
parent 9add999e45
commit b6ed53f8b9
2 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,8 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.PaymentsIconsHTML();
this.VtexPciIconHTML();
// this.onUpdate(); // this.onUpdate();
} }
@ -14,6 +16,34 @@ export default class Footer {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
this.paymentsIcons = await waitElement(".footerCheckout__payments");
this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci");
}
PaymentsIconsHTML() {
if (this.paymentsIcons) {
this.paymentsIcons.innerHTML = `
<picture class="payments-icons">
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Mastercard"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Logo Hipercard"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal"/>
<img class="payments-icons__img" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto"/>
</picture>
`;
}
}
VtexPciIconHTML() {
if (this.vtexpciIcon) {
this.vtexpciIcon.innerHTML = `
<picture class="vtexpci-icon">
<img class="vtexpci-icon__img" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Ícone Vtex PCI"/>
</picture>
`;
}
} }
onUpdate() { onUpdate() {

18
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -44,12 +44,30 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.payments-icons {
display: flex;
gap: 13px;
&__img {
width: auto;
height: 20px;
}
}
&__divider { &__divider {
background-color: $color-gray6; background-color: $color-gray6;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;
width: 1px; width: 1px;
margin: 0 10px 0 13px;
}
.vtexpci-icon {
&__img {
width: auto;
height: 33px;
}
} }
} }