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

Merge pull request 'feat: Cria footer desktop' (#2) from feat/criaFooter into main

Browse Source 
Reviewed-on: #2
This commit is contained in:
ThiagoDutraSampaioLeite 2022-12-10 13:21:14 +00:00
commit d16057ed22
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() {
await this.selectors();
this.createFooter();
// this.onUpdate();
}
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:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
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() {
//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

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

@ -2,6 +2,7 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
border-top: 1px solid $color-black-500;
&__wrapper {
align-items: center;
@ -10,12 +11,12 @@
}
&__address {
color: $color-gray2;
color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
line-height: 13px;
text-transform: capitalize;
max-width: 40%;
@ -30,6 +31,8 @@
display: flex;
justify-self: center;
list-style: none;
padding: 18px 0;
margin: 0;
@include mq(md, max) {
align-self: center;
@ -40,7 +43,7 @@
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
margin: 0;
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;
}
}
}