From 63a40064dfde76a744341daf44e51667a45af114 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 14 Dec 2022 08:19:43 -0300 Subject: [PATCH] feat: Cria e estiliza a parte debaixo do footer --- checkout/src/arquivos/js/components/Footer.js | 106 +++++-- .../src/arquivos/sass/checkout/_checkout.scss | 18 +- .../src/arquivos/sass/partials/_footer.scss | 290 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 2 + checkout/src/template-checkout/templates.html | 49 +++ 5 files changed, 399 insertions(+), 66 deletions(-) create mode 100644 checkout/src/template-checkout/templates.html diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7e1c59a..ffbcfce 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,8 +9,11 @@ export default class Footer { this.productList = []; this.carregaProdutos(); await this.selectors(); + await this.criaStamps(); + await this.criaDevelopedBy(); + // this.onUpdate(); - await this.criaProduto(); + // await this.criaProduto(); } async selectors() { @@ -18,6 +21,10 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.prateleira = await waitElement(".footerCheckout__prateleira"); this.checkoutVazio = await waitElement(".empty-cart-content"); + + this.stamps = await waitElement(".footerCheckout__stamps"); + this.developedBy = await waitElement(".footerCheckout__developedBy"); + this.footer = await waitElement(".footerCheckout__wrapper"); } onUpdate() { @@ -40,24 +47,21 @@ export default class Footer { $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, }); } async criaProduto() { - let estrutura = "" - let estruturaSkus = "" - if(this.prateleira) { - console.log(this.productList, "Cria HTMl"); + let estrutura = ""; + let estruturaSkus = ""; + if (this.prateleira) { this.productList.forEach((product) => { - estruturaSkus = "" - product.skus.forEach(name => { - estruturaSkus += `${name}` - }) + estruturaSkus = ""; + product.skus.forEach((name) => { + estruturaSkus += `${name}`; + }); - - console.log(product.skus); - - estrutura +=` + estrutura += `
@@ -69,38 +73,88 @@ export default class Footer { Ver Produto
- ` - }) + `; + }); this.prateleira.innerHTML = estrutura; } this.addCarrossel(); - } carregaProdutos() { - fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") - .then(response => response.json()) - .then(data => { - data.forEach(item => { + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + data.forEach((item) => { const arraySKU = []; - item.items.forEach(sku => { + item.items.forEach((sku) => { arraySKU.push(sku.name); - }) + }); const product = { image: item.items[0].images[0].imageUrl, productName: item.productName, link: item.link, - skus: arraySKU + skus: arraySKU, }; this.productList.push(product); - }) - console.log(this.productList, "Carrega Lista"); + }); }) - .catch(err => log(err)); + .catch((err) => log(err)); } + async criaStamps() { + if (this.stamps) { + this.stamps.innerHTML = `
  • + lodo da MasterCard +
    • +
  • + logo da Visa +
    • +
  • + logo da Amex +
    • +
  • + logo da Elo +
    • +
  • + logo da HiperCard +
    • +
  • + logo do PayPal +
    • +
  • + logo Boleto +
    • +
  • +
    • +
  • + logo da Vtex PCI +
    • `; + } + } + async criaDevelopedBy() { + + if(this.developedBy) { + this.developedBy.innerHTML = ` +
  • + + Powered by + + +
    • +
  • + + Developed by + + +
    • + `; + + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 1fa3253..651945d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,9 +9,23 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; - margin: auto auto 0 auto; + border-top: 1px solid $black-500; + + .container { + width: 94.9734%; + margin: 16px auto 16px auto; + + @include mq(tablet, max) { + margin: 0; + width: 100%; + } + + @include mq(desktop4K, min) { + margin: 14px auto 16.54px auto; + } + } } + footer .prateleira, header { width: 79.53125%; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..aba7c6e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,74 +1,288 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + &__prateleira { + display: none; + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + .container { + display: flex; + align-items: center; + justify-content: center; + + @include mq(tablet, max) { + flex-direction: column; + align-items: flex-start; + } + } } &__address { - color: $color-gray2; - font-family: $font-family; + font-family: "Open Sans"; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; - max-width: 40%; + color: $black-300; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(tablet, max) { + order: 2; + + margin: 0 16px 16px; + } + + @include mq(desktop4K, min) { + font-size: 20px; + line-height: 27px; } } &__stamps { - align-items: center; - display: flex; - justify-self: center; - list-style: none; + box-sizing: border-box; + width: 33.234%; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + display: flex; + align-items: center; + justify-content: space-between; + list-style: none; + margin: 0 auto; + + @include mq(tablet, max) { + order: 1; + margin: 0; + + width: 100%; + padding: 16px 8px; + + justify-content: flex-start; } - &__divider { - background-color: $color-gray4; - display: inline-block; + @include mq(desktop4K, min) { + width: 29.0827%; + } + + .divider { height: 24px; - margin: 0 8px; width: 1px; + background-color: $gray-500; + + @include mq(desktop4K, min) { + height: 43px; + } + } + } + + &__li { + &.masterCard { + margin-right: 13.35px; + + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + + &.visa { + margin-right: 13.22px; + + @include mq(tablet, max) { + margin-right: 5.22px; + + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.amex { + margin-right: 13.22px; + @include mq(tablet, max) { + margin-right: 4.22px; + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.elo { + margin-right: 13.38px; + @include mq(tablet, max) { + margin-right: 4.48px; + width: 3.623%; + } + + @include mq(celular, max) { + width: 10.1727%; + } + + @include mq(desktop4K, min) { + margin-right: 13.67px; + } + } + &.hiperCard { + margin-right: 13.22px; + @include mq(tablet, max) { + margin-right: 4.22px; + width: 3.451%; + } + + @include mq(celular, max) { + width: 9.688%; + } + + @include mq(desktop4K, min) { + margin-right: 13.07px; + } + } + &.payPal { + margin-right: 13.35px; + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + &.boleto { + margin-right: 13.35px; + + @include mq(tablet, max) { + margin-right: 4.35px; + width: 3.536%; + } + @include mq(celular, max) { + width: 9.930%; + } + + @include mq(desktop4K, min) { + margin-right: 13.37px; + } + } + &.vtexPCI { + margin-left: 10px; + + @include mq(tablet, max) { + width: 5.593%; + } + + @include mq(celular, max) { + width: 14.76323%; + } } } &__developedBy { - align-items: center; - display: flex; list-style-type: none; margin: 0; + display: flex; + gap: 10.73px; - li:last-child { - margin-left: 16px; + @include mq(tablet, max) { + order: 3; + + // width: 21.527777%; + margin: 0 16px 16px; + justify-content: flex-start; } a { - align-items: center; - color: $color-gray2; display: flex; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - text-decoration: none; + align-items: center; + flex-wrap: wrap; - span { - margin-right: 8px; + font-family: "Open Sans"; + font-weight: 400; + font-size: 9px; + line-height: 12px; + + color: $black-300; + + .vtex { + width: 44.92px; + margin-left: 10.12px; + } + + .m3 { + width: 28.66px; + margin-left: 10.97px; } } } + + // &__developedBy { + // box-sizing: border-box; + // display: flex; + // align-items: center; + // justify-content: space-between; + // list-style-type: none; + // margin: 0; + + // width: 17.851%; + // min-width: 205px; + + // @include mq(tablet, max) { + // order: 3; + + // width: 21.527777%; + // margin: 0 16px 16px; + // justify-content: flex-start; + // } + + // li { + // width: 50%; + + // @include mq(tablet, max) { + // width: auto; + // } + // } + + // a { + // display: flex; + // align-items: center; + // justify-content: flex-end; + // gap: 10px; + // font-family: "Open Sans"; + // font-weight: 400; + // font-size: 9px; + // line-height: 12px; + + // color: $black-300; + + // img { + // width: 20px; + // } + + // .vtex { + // width: 36.3%; + // } + + // .m3 { + // width: 30.75%; + // } + // } + // } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index ee3b2b2..de6e5aa 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,8 @@ $color-green: #4caf50; $black-500: #000; $black-300: #292929; +$gray-500: #C4C4C4; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, diff --git a/checkout/src/template-checkout/templates.html b/checkout/src/template-checkout/templates.html new file mode 100644 index 0000000..c9b5b2e --- /dev/null +++ b/checkout/src/template-checkout/templates.html @@ -0,0 +1,49 @@ + + + + + + + Document + + + + +
    +
  • + Powered by +
    • +
  • + Developed by +
    • +
    + +