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

feat(Footer.js): implementação das imagens e logos no footer

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-12-16 15:19:27 -03:00
parent b4761dc6f0
commit 2346a5f5e6
1 changed files with 53 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,19 +3,19 @@ import { waitElement } from "m3-utils";
export default class Footer {
constructor() {
this.init();
}
async init() {
this.list = await this.requestApi();
await this.selectors();
this.creditCardIconsHTML();
this.developedByIconsHTML();
// this.onUpdate();
this.createShelf();
this.shelfList = await waitElement(".footerCheckout__shelfList");
this.shelfItens();
this.addCarrossel();
}
@ -24,6 +24,13 @@ export default class Footer {
timeout: 5000,
interval: 1000,
});
this.checkoutVazio = await waitElement(".empty-cart-content", {
timeout: 5000,
interval: 1000,
});
this.creditCardIcons = await waitElement(".footerCheckout__stamps");
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
}
createShelf() {
@ -95,4 +102,47 @@ export default class Footer {
infinite: false,
});
}
creditCardIconsHTML() {
this.creditCardIcons.innerHTML = `
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></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="American Express"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
<li><img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto"></li>
<li><span class="footerCheckout__stamps__divider"></span></li>
<li class="vtex-pci"><img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="PCI VTEX"></li>
`;
}
developedByIconsHTML() {
this.developedByIcons.innerHTML = `
<li>
<div class="by-vtex">
<a href="https://vtex.com.br-pt/">
<span>Powered By</span>
</a>
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
</div>
</li>
<li>
<div class="by-m3">
<a href="https://vtex.com.br-pt/">
<span>Developed By</span>
</a>
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
</div>
</li>
`;
}
}