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

feat: Cria footer desktop #2

Merged
ThiagoDutraSampaioLeite merged 1 commits from feat/criaFooter into main 2022-12-10 13:21:15 +00:00
Conversation 0 Commits 1 Files Changed 2 +86 -3
2 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,15 +7,69 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.createFooter();
// this.onUpdate(); // this.onUpdate();
} }
async selectors() { async selectors() {
this.footerCheckout = await waitElement(".footerCheckout__stamps");
this.footerCheckoutDevelop = await waitElement(".footerCheckout__developedBy");
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
} }
createFooter() {
this.footerCheckout.innerHTML = `
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
</li>
<li class="footerCheckout__listImage">
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />
</li>
<li class="footerCheckout__stamps__divider"></li>
<li class="footerCheckout__listImage">
<img class="vtex" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" />
</li>
`;
this.footerCheckoutDevelop.innerHTML = `
<li class="footerCheckout__developedBy">
<a href="https://www.vtex.com/" target="_blank" title="vtex">
<span>Powered By</span>
<img class="vtex-right" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
</a>
</li>
<li class="footerCheckout__developedBy">
<a href="https://www.vtex.com/" target="_blank" title="vtex">
<span>Developed By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
</a>
</li>
`;
}
onUpdate() { onUpdate() {
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver

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

@ -2,6 +2,7 @@
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
border-top: 1px solid $color-black-500;
&__wrapper { &__wrapper {
align-items: center; align-items: center;
@ -10,12 +11,12 @@
} }
&__address { &__address {
color: $color-gray2; color: $color-black;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 13px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@ -30,6 +31,8 @@
display: flex; display: flex;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
padding: 18px 0;
margin: 0;
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
@ -40,7 +43,7 @@
background-color: $color-gray4; background-color: $color-gray4;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0;
width: 1px; width: 1px;
} }
} }
@ -71,4 +74,30 @@
} }
} }
} }
img {
display: block;
width: 35px;
height: 20px;
&.vtex {
height: 33px;
width: 53px;
}
&.vtex-right {
width: 44px;
height: 16px;
}
}
&__listImage {
display: flex;
margin-right: 13px;
align-items: center;
justify-content: center;
&:last-child {
margin: 0 0 0 10px;
}
}
} }