anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Footer): add ícones .footerCheckout__stamps

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-10 21:11:23 -03:00
parent 5126731d40
commit 981f8dde94
2 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,14 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
// this.onUpdate(); // this.onUpdate();
await this.footerCheckout();
} }
async selectors() { async selectors() {
//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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
} }
onUpdate() { onUpdate() {
@ -37,4 +39,42 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
}); });
} }
footerCheckout() {
this.footerCheckoutstamps.innerHTML = `
<li>
<ul class="footerCheckout__payments">
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal">
</li>
<li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto">
</li>
</ul>
<span class="footerCheckout__stamps__divider"></span>
<ul class="footerCheckout__payments">
<li class= "vtexPCIM">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto">
</li>
</ul>
</li>
`;
}
} }

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

@ -1,14 +1,17 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
border-top: none; border-top: 1px solid #000000;
color: $color-gray2; color: $color-gray2;
bottom: 0;
position: absolute;
width: 100%;
&__wrapper { &__wrapper {
& .container { & .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 0; padding: 16px 0;
width: 100%;
&::before, &::after { &::before, &::after {
content: none; content: none;
} }
@ -43,6 +46,22 @@
// margin-bottom: 12px; // margin-bottom: 12px;
} }
& li {
display: flex;
& .footerCheckout__payments {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 0;
& li {
height: 20px;
}
& .vtexPCIM {
height: 33px;
}
}
}
&__divider { &__divider {
background-color: $color-gray4; background-color: $color-gray4;
display: inline-block; display: inline-block;