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

42
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:
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
this.checkoutVazio = await waitElement(".empty-cart-content");
this.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
}
onUpdate() {
@ -42,38 +42,58 @@ export default class Footer {
footerCheckout() {
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">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</ul>
<span class="footerCheckout__stamps__divider"></span>
<ul class="footerCheckout__payments">
<li class= "vtexPCIM">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto">
<li class="vtexPCIM">
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="ícone de boleto"/>
</li>
</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>
<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;
padding: 16px 0;
width: 100%;
&::before, &::after {
&::before,
&::after {
content: none;
}
}
}
&__address {
& .footerCheckout__address {
color: $color-gray2;
font-family: $font-family;
font-style: normal;
@ -35,7 +33,11 @@
}
}
&__stamps {
& div {
align-items: center;
display: flex;
justify-self: center;
& ul {
align-items: center;
display: flex;
justify-self: center;
@ -47,22 +49,22 @@
}
& li {
display: flex;
& .footerCheckout__payments {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 0;
& li {
& img {
height: 20px;
margin: 0 6.675px;
}
}
& .vtexPCIM {
& img {
height: 33px;
}
}
}
&__divider {
& .footerCheckout__stamps__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
@ -70,8 +72,7 @@
width: 1px;
}
}
&__developedBy {
& .footerCheckout__developedBy {
align-items: center;
display: flex;
list-style-type: none;
@ -87,7 +88,7 @@
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 9px;
line-height: 12px;
text-decoration: none;
@ -95,6 +96,11 @@
span {
margin-right: 8px;
}
& img {
height: 16px;
}
}
}
}
}
}