feat: Cria footer desktop
This commit is contained in:
parent
ada26006ac
commit
4da9906cb9
@ -6,35 +6,97 @@ export default class Footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
|
this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/";
|
||||||
await this.selectors();
|
await this.selectors();
|
||||||
|
this.buildIconList();
|
||||||
|
this.buildDevelopedByList();
|
||||||
// this.onUpdate();
|
// this.onUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
async selectors() {
|
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:
|
//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");
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdate() {
|
buildIconList() {
|
||||||
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
|
Object.values(this.footerIconList.children).forEach((li, index) => {
|
||||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
|
const child = li.children[0].classList.contains("footerCheckout__payments")
|
||||||
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
|
? li.children[0]
|
||||||
let target = this.checkoutVazio;
|
: null;
|
||||||
let config = { childList: true, attributes: true };
|
if (child === null) return;
|
||||||
let observer = new MutationObserver((mutations) => {
|
|
||||||
mutations.forEach(function (mutation) {
|
|
||||||
console.log(mutation.type);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(target, config);
|
if (index === 0)
|
||||||
}
|
child.innerHTML = `
|
||||||
async addCarrossel() {
|
<ul class="footerCheckout__payments-list">
|
||||||
const elemento = await waitElement("#my-element");
|
<li class="footerCheckout__payments-item">
|
||||||
$(elemento).slick({
|
<img class="footerCheckout__payments-icon" src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
|
||||||
slidesToShow: 4,
|
</li>
|
||||||
slidesToScroll: 1,
|
<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-pagamento";
|
||||||
@import "./checkout-autenticacao";
|
@import "./checkout-autenticacao";
|
||||||
|
|
||||||
html {
|
img {
|
||||||
height: 100%;
|
display: block;
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer .footerCheckout__wrapper {
|
|
||||||
width: 94.9734%;
|
|
||||||
margin: auto auto 0 auto;
|
|
||||||
}
|
|
||||||
footer .footerCheckout__prateleira,
|
|
||||||
header {
|
|
||||||
width: 79.53125%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100% !important;
|
|
||||||
padding-top: 0 !important;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
@ -1,47 +1,90 @@
|
|||||||
/* _footer.scss */
|
/* _footer.scss */
|
||||||
.footerCheckout {
|
.footerCheckout {
|
||||||
border-top: none;
|
border-top: 1px solid $black-500;
|
||||||
color: #7d7d7d;
|
padding: 16px 32px;
|
||||||
|
|
||||||
&__wrapper {
|
.container {
|
||||||
align-items: center;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__address {
|
&__address {
|
||||||
color: #7d7d7d;
|
color: $black-400;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
max-width: 40%;
|
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(4k, min) {
|
||||||
margin-bottom: 24px;
|
font-size: 20px;
|
||||||
max-width: 100%;
|
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 {
|
&__stamps {
|
||||||
|
margin: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
@include mq(md, max) {
|
li {
|
||||||
align-self: center;
|
&:not(:first-of-type),
|
||||||
margin-bottom: 12px;
|
&:not(:last-of-type) {
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
|
@include mq(4k, min) {
|
||||||
|
height: 43px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__divider {
|
&__divider {
|
||||||
background-color: #8d8d8d;
|
background-color: $gray-400;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
margin: 0 8px;
|
margin: 0 10px 0 0;
|
||||||
width: 1px;
|
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;
|
margin: 0;
|
||||||
|
|
||||||
li:last-child {
|
li:last-child {
|
||||||
margin-left: 16px;
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
img {
|
||||||
|
height: 16px;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
@include mq(4k, min) {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #7d7d7d;
|
color: $black-400;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
font-style: normal;
|
font-weight: 400;
|
||||||
font-weight: normal;
|
font-size: 9px;
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
@include mq(4k, min) {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-right: 8px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,14 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
border-bottom: 1px solid $black-500;
|
border-bottom: 1px solid $black-500;
|
||||||
width: 100%;
|
padding: 29px 131px;
|
||||||
|
|
||||||
|
@include mq(mobile, max) {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin: 29px 131px;
|
|
||||||
|
|
||||||
@include mq(mobile, max) {
|
|
||||||
margin: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
|
@ -9,6 +9,8 @@ $font-family-secundary: "Tenor Sans", sans-serif;
|
|||||||
$black-400: #292929;
|
$black-400: #292929;
|
||||||
$black-500: #000;
|
$black-500: #000;
|
||||||
|
|
||||||
|
$gray-400: #c4c4c4;
|
||||||
|
|
||||||
$white-500: #fff;
|
$white-500: #fff;
|
||||||
|
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
|
Loading…
Reference in New Issue
Block a user