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() {
await this.selectors();
// this.onUpdate();
await this.footerCheckout();
}
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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
}
onUpdate() {
@ -37,4 +39,42 @@ export default class Footer {
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 */
.footerCheckout {
border-top: none;
border-top: 1px solid #000000;
color: $color-gray2;
bottom: 0;
position: absolute;
width: 100%;
&__wrapper {
& .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
width: 100%;
&::before, &::after {
content: none;
}
@ -43,6 +46,22 @@
// 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 {
background-color: $color-gray4;
display: inline-block;