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

Compare commits

merge into: josecarloslins:main
Branches Tags
josecarloslins:main
josecarloslins:feature/optimization
josecarloslins:feature/content
josecarloslins:feature/header
josecarloslins:feature/footer
...
pull from: josecarloslins:feature/footer
Branches Tags
josecarloslins:main
josecarloslins:feature/optimization
josecarloslins:feature/content
josecarloslins:feature/header
josecarloslins:feature/footer

2 Commits
main ... feature/fo

Author SHA1 Message Date
Carlos Lins
93447e3b7a feat: Criação CSS do footer 2022-12-10 08:15:01 -03:00
Carlos Lins
f4acc320a3 feat: Criação do JS do Footer 2022-12-10 08:12:53 -03:00
2 changed files with 63 additions and 9 deletions
Show Stats Expand all files Collapse all files

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

@ -7,6 +7,7 @@ export default class Footer {
async init() {
await this.selectors();
await this.addImagesFooter();
// this.onUpdate();
}
@ -14,6 +15,9 @@ export default class Footer {
//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.checkoutPayments = await waitElement(".footerCheckout__stamps");
this.developBy = await waitElement(".footerCheckout__developedBy");
console.log(this.developBy);
}
onUpdate() {
@ -37,4 +41,29 @@ export default class Footer {
slidesToScroll: 1,
});
}
async addImagesFooter() {
this.checkoutPayments.children[0].innerHTML = `
<div class="footerCheckout__payments">
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Logo Master Card" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="Logo Visa" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="Logo American Express" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Logo Elo" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/hipercardM3Academy.png" alt="Logo HiperCard" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Logo PayPal" />
<img class="paymentFooter" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Logo Boleto" />
</div>
`;
this.checkoutPayments.children[2].innerHTML = `
<div class="footerCheckout__payments">
<img class="vtexIcon" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="Logo VTEX PCI Certificado" />
</div>
`;
this.developBy.children[0].children[0].innerHTML = `
<span>Powered by</span><img class="logoVtexFooter" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="Logo VTEX" />
`;
this.developBy.children[1].children[0].innerHTML = `
<span>Developed by</span><img class="logoM3Footer" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="Logo M3" />
`;
}
}

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

@ -7,15 +7,16 @@
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
}
&__address {
color: $color-gray2;
color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
line-height: 13.62px;
text-transform: capitalize;
max-width: 40%;
@ -38,13 +39,27 @@
&__divider {
background-color: $color-gray4;
display: inline-block;
display: block;
align-items: center;
height: 24px;
margin: 0 8px;
width: 1px;
}
}
&__payments {
.paymentFooter {
width: 35.65px;
height: 20px;
margin-right: 13.35px;
}
.vtexIcon {
width: 53px;
height: 33px;
margin-left: 10px;
}
}
&__developedBy {
align-items: center;
display: flex;
@ -57,18 +72,28 @@
a {
align-items: center;
color: $color-gray2;
color: $color-black;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
font-weight: 400;
font-size: 9px;
line-height: 12px;
text-decoration: none;
span {
margin-right: 8px;
margin-right: 11px;
}
}
.logoVtexFooter {
width: 44.92px;
height: 16px;
}
.logoM3Footer {
width: 28.66px;
height: 15.65px;
}
}
}