affonso_kopmann/m3-academy-template-checkout-affonso-kopmann
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add icones no rodapé.

Browse Source
This commit is contained in:
Affonso Kopmann 2022-12-18 22:19:21 -03:00
parent 0917f91a90
commit 4078ed0eab
3 changed files with 61 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,11 +8,13 @@ export default class Footer {
async init() {
await this.selectors();
// this.onUpdate();
this.footer();
}
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.divFooter = await waitElement(".footerCheckout__wrapper");
this.checkoutVazio = await waitElement(".empty-cart-content");
}
@ -82,4 +84,52 @@ export default class Footer {
return prodInfo;
});
}
footer() {
this.divFooter.innerHTML = `
<hr></hr>
<div class="conteiner_footer">
<div class="footerCheckout__address">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<ul class="footerCheckout__stamps">
<li>
<span class="footerCheckout__payments">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="mastercard" style="width: 35px; margin-right: 13px; ">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="visa" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="american" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="elo" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="hipercard" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="paypal" style="width: 35px; margin-right: 13px;">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="boleto" style="width: 35px; margin-right: 13px;">
</span>
</li>
<li>
<span class="footerCheckout__stamps__divider"></span>
</li>
<li>
<span class="footerCheckout__payments">
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="logoCertificado" style="width: 53px; margin-right: 90px;">
</span>
</li>
</ul>
<ul class="footerCheckout__developedBy">
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="logoVTEX" style="width: 45px;">
</a>
</li>
<li style="width: 217px; >
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img class="imgFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="logoM3" style="width: 29px; margin-left: 10px;">
</a>
</li>
</ul>
</div>
`;
}
}

2
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -256,7 +256,7 @@
color: $color-white;
display: block;
font-weight: bold;
padding: 1px 12px;
margin: 1px 12px;
background: #00C8FF;
border-radius: 50%;
width: 16px;

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

@ -1,4 +1,14 @@
/* _footer.scss */
.conteiner_footer {
display: flex;
align-items: center;
align-content: space-between;
margin-top: 16px !important;
margin: 0 auto;
}
.footerCheckout {
border-top: 1px solid $color-black;
color: $color-gray2;