forked from M3-Academy/m3-academy-template-checkout
feat(Footer): add ícones .footerCheckout__stamps
This commit is contained in:
parent
5126731d40
commit
981f8dde94
@ -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>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user