forked from M3-Academy/m3-academy-template-checkout
feat(footer): Adiciona o footer desktop
This commit is contained in:
parent
ea1d26afc1
commit
09a3563f2b
@ -7,6 +7,9 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.pagamentos();
|
||||
this.certificado();
|
||||
this.desenvolvimento();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
@ -14,6 +17,18 @@ 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.payments = await waitElement(".footerCheckout__payments", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
this.vtexIcon = await waitElement(".footerCheckout__stamps", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
this.developed = await waitElement(".footerCheckout__developedBy", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
@ -37,4 +52,58 @@ export default class Footer {
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}
|
||||
|
||||
pagamentos() {
|
||||
this.payments.innerHTML = `
|
||||
<ul class="lista-pagamentos" >
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
|
||||
</li>
|
||||
<li class"lista-pagamentos__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
||||
certificado() {
|
||||
this.vtexIcon.children[2].children[0].innerHTML = `
|
||||
<ul class="lista-certificados">
|
||||
<li class="lista-certificados__items">
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
||||
desenvolvimento() {
|
||||
this.developed.children[0].children[0].innerHTML = `
|
||||
<a class="powered" href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png">
|
||||
</a>
|
||||
`;
|
||||
|
||||
this.developed.children[1].children[0].innerHTML = `
|
||||
<a class="developed" href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
<img src=" https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png">
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,35 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
border-top: 1px solid black;
|
||||
color: $color-gray2;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: auto !important;
|
||||
padding: 16px 22px 16px 32px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 14px 63px 16px 63px;
|
||||
}
|
||||
.container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
}
|
||||
.container::before,
|
||||
::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__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: 14px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@ -23,6 +37,11 @@
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
@ -30,6 +49,12 @@
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
width: 31.56%;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 29.1%;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
@ -40,9 +65,21 @@
|
||||
background-color: $color-gray4;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
margin: 0 10px 0 13px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.lista-pagamentos {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.lista-certificados {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__developedBy {
|
||||
@ -57,17 +94,40 @@
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: $color-gray2;
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
text-decoration: none;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.powered {
|
||||
img {
|
||||
width: 44px;
|
||||
@include mq(xl, min) {
|
||||
width: 87px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.developed {
|
||||
img {
|
||||
width: 28px;
|
||||
@include mq(xl, min) {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user