anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Footer): add .footerCheckout__address e .footerCheckout__developedBy

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-11 07:36:37 -03:00
parent 981f8dde94
commit 6f011f6727
2 changed files with 111 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ export default class Footer {
//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");
this.footerCheckoutstamps = await waitElement(".footerCheckout__stamps"); this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
} }
onUpdate() { onUpdate() {
@ -42,38 +42,58 @@ export default class Footer {
footerCheckout() { footerCheckout() {
this.footerCheckoutstamps.innerHTML = ` this.footerCheckoutstamps.innerHTML = `
<li> <div class="container">
<div class="footerCheckout__address">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<ul class="footerCheckout__payments"> <ul class="footerCheckout__payments">
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"> <img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="ícone do cartão master card"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"> <img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="ícone do cartão visa"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"> <img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="ícone do cartão american express"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"> <img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="ícone do cartão elo"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"> <img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="ícone do cartão hipercard"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"> <img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="ícone do paypal"/>
</li> </li>
<li> <li>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"> <img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="ícone de boleto"/>
</li> </li>
</ul> </ul>
<span class="footerCheckout__stamps__divider"></span> <span class="footerCheckout__stamps__divider"></span>
<ul class="footerCheckout__payments"> <ul class="footerCheckout__payments">
<li class="vtexPCIM"> <li class="vtexPCIM">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"> <img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
</li> </li>
</ul> </ul>
</div>
<ul class="footerCheckout__developedBy">
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="ícone de boleto"/>
</a>
</li> </li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="ícone de boleto"/>
</a>
</li>
</ul>
</div>
`; `;
} }

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

@ -12,13 +12,11 @@
align-items: center; align-items: center;
padding: 16px 0; padding: 16px 0;
width: 100%; width: 100%;
&::before, &::after { &::before,
&::after {
content: none; content: none;
} }
} & .footerCheckout__address {
}
&__address {
color: $color-gray2; color: $color-gray2;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
@ -35,7 +33,11 @@
} }
} }
&__stamps { & div {
align-items: center;
display: flex;
justify-self: center;
& ul {
align-items: center; align-items: center;
display: flex; display: flex;
justify-self: center; justify-self: center;
@ -47,22 +49,22 @@
} }
& li { & li {
display: flex;
& .footerCheckout__payments {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-left: 0; margin-left: 0;
& li { & img {
height: 20px; height: 20px;
margin: 0 6.675px;
}
} }
& .vtexPCIM { & .vtexPCIM {
& img {
height: 33px; height: 33px;
} }
} }
} }
& .footerCheckout__stamps__divider {
&__divider {
background-color: $color-gray4; background-color: $color-gray4;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
@ -70,8 +72,7 @@
width: 1px; width: 1px;
} }
} }
& .footerCheckout__developedBy {
&__developedBy {
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
@ -87,7 +88,7 @@
display: flex; display: flex;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
text-decoration: none; text-decoration: none;
@ -95,6 +96,11 @@
span { span {
margin-right: 8px; margin-right: 8px;
} }
& img {
height: 16px;
}
}
}
} }
} }
} }