feat: Cria footer desktop
This commit is contained in:
parent
ada26006ac
commit
4da9906cb9
@ -6,35 +6,97 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
|
||||
await this.selectors();
|
||||
this.buildIconList();
|
||||
this.buildDevelopedByList();
|
||||
// this.onUpdate();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.footerIconList = await waitElement(".footerCheckout__stamps");
|
||||
this.footerDevelopedByList = 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");
|
||||
// this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
}
|
||||
|
||||
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
|
||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||
let target = this.checkoutVazio;
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
});
|
||||
});
|
||||
buildIconList() {
|
||||
Object.values(this.footerIconList.children).forEach((li, index) => {
|
||||
const child = li.children[0].classList.contains("footerCheckout__payments")
|
||||
? li.children[0]
|
||||
: null;
|
||||
if (child === null) return;
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement("#my-element");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
if (index === 0)
|
||||
child.innerHTML = `
|
||||
<ul class="footerCheckout__payments-list">
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
else
|
||||
child.innerHTML = `
|
||||
<img class="footerCheckout__payments-vtex-icon" src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
buildDevelopedByList() {
|
||||
Object.values(this.footerDevelopedByList.children).forEach((li, index) => {
|
||||
const a = li.children[0];
|
||||
|
||||
if (index === 0)
|
||||
a.innerHTML = `
|
||||
<span>Powered By</span>
|
||||
<img src="${this.imgLinks}logoVTEXM3Academy.png" alt="Logo VTEX" />
|
||||
`;
|
||||
else
|
||||
a.innerHTML = `
|
||||
<span>Developed By</span>
|
||||
<img src="${this.imgLinks}logoM3M3Academy.png" alt="Logo M3" />
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
// // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
||||
// let target = this.checkoutVazio;
|
||||
// let config = { childList: true, attributes: true };
|
||||
// let observer = new MutationObserver((mutations) => {
|
||||
// mutations.forEach(function (mutation) {
|
||||
// console.log(mutation.type);
|
||||
// });
|
||||
// });
|
||||
|
||||
// observer.observe(target, config);
|
||||
// }
|
||||
// async addCarrossel() {
|
||||
// const elemento = await waitElement("#my-element");
|
||||
// $(elemento).slick({
|
||||
// slidesToShow: 4,
|
||||
// slidesToScroll: 1,
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
@ -3,27 +3,11 @@
|
||||
@import "./checkout-pagamento";
|
||||
@import "./checkout-autenticacao";
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
footer .footerCheckout__wrapper {
|
||||
width: 94.9734%;
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100% !important;
|
||||
padding-top: 0 !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -1,47 +1,90 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
color: #7d7d7d;
|
||||
border-top: 1px solid $black-500;
|
||||
padding: 16px 32px;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
color: #7d7d7d;
|
||||
color: $black-400;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
@include mq(4k, min) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&__payments-list {
|
||||
list-style-type: none;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
}
|
||||
|
||||
&__payments-icon {
|
||||
width: 35px;
|
||||
margin-right: 13px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
li {
|
||||
&:not(:first-of-type),
|
||||
&:not(:last-of-type) {
|
||||
height: 24px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
height: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: #8d8d8d;
|
||||
background-color: $gray-400;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
margin: 0 10px 0 0;
|
||||
width: 1px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
height: 43px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__payments-vtex-icon {
|
||||
width: 53px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 103px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,22 +95,39 @@
|
||||
margin: 0;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
|
||||
@include mq(4k, min) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
color: #7d7d7d;
|
||||
color: $black-400;
|
||||
display: flex;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
text-decoration: none;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
border-bottom: 1px solid $black-500;
|
||||
width: 100%;
|
||||
padding: 29px 131px;
|
||||
|
||||
@include mq(mobile, max) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
margin: 29px 131px;
|
||||
|
||||
@include mq(mobile, max) {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
|
||||
@ -9,6 +9,8 @@ $font-family-secundary: "Tenor Sans", sans-serif;
|
||||
$black-400: #292929;
|
||||
$black-500: #000;
|
||||
|
||||
$gray-400: #c4c4c4;
|
||||
|
||||
$white-500: #fff;
|
||||
|
||||
/* Grid breakpoints */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user