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

feat(home):criacao de elemntos do footer

Browse Source
This commit is contained in:
Edna Barboza de Lima 2022-12-12 12:29:59 -03:00
parent 1bd92eb959
commit 81e26e0abf
3 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,8 @@ export default class Footer {
async init() {
await this.selectors();
this.footerCheckoutInnerHTML();
this.footerCheckoutDevelopedInnerHTML();
// this.onUpdate();
}
@ -14,6 +16,36 @@ 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.footerCheckout = document.querySelector(".footerCheckout__stamps");
this.footerCheckoutDeveloped = document.querySelector(".footerCheckout__developedBy");
}
async footerCheckoutInnerHTML() {
this.footerCheckout.innerHTML = `
<div class = "footerCheckout__stamps__div_wrapper">
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"/>
<img class = "images_footer" src = "https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"/>
<p class= "pipe"></p>
<img class = "images_footer_vtexPCIM" src = "https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"/>
</div>
`;
}
async footerCheckoutDevelopedInnerHTML() {
this.footerCheckoutDeveloped.innerHTML = `
<div class = "footerCheckout__stamps__div_wrapperDeveloper">
<p class = "footer_description_1">Powered by</p>
<img class = "images_footer_developed" src = "https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png"/>
<p class = "footer_description_2">Developed by</p>
<img class = "images_footer_developed" src = "https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png"/>
</div>
`;
}
onUpdate() {

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

@ -7,6 +7,12 @@
display: flex;
}
// &__prateleira {
// border-top: 1px solid #e5e5e5;
// width: 100%;
// margin-bottom: 22px;
// }
&__wrapper {
align-items: center;
display: flex;
@ -47,6 +53,51 @@
margin: 0 8px;
width: 1px;
}
&__div_wrapper {
width: 404px;
height: 33px;
.images_footer {
height: 22px;
}
.pipe {
display: inline;
border-left: 1px solid $color-gray6;
padding-left: 10px;
}
.images_footer_vtexPCIM {
height: 33px;
}
}
&__div_wrapperDeveloper {
display: flex;
.images_footer_developed {
height: 16px;
}
.footer_description_1,
.footer_description_2 {
font-family: Open Sans;
font-size: 9px;
font-weight: 400;
line-height: 12px;
letter-spacing: 0em;
text-align: left;
}
.footer_description_1 {
padding-right: 10px;
}
.footer_description_2 {
padding: 0 10px;
}
}
}
&__developedBy {

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -15,6 +15,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #c4c4c4;
$color-blue: #4267b2;