diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..a06fcf9 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,14 +6,61 @@ export default class Footer { } async init() { + this.list = await this.fetchPrateleira(); await this.selectors(); // this.onUpdate(); + this.createPrateleira(); + this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); + this.itensPrateleira(); + this.addCarrossel(); + await this.displaySlick(); + this.creditCardIconsHTML(); + this.developedByIconsHTML(); } async selectors() { - //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.itensShelf = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); + this.creditCardIcons = await waitElement(".footerCheckout__stamps"); + this.developedByIcons = await waitElement(".footerCheckout__developedBy"); + } + + async displaySlick() { + const orderForm = await window.vtexjs.checkout.getOrderForm(); + const items = orderForm.items.length; + const _this = this; + + $(window).on("orderFormUpdated.vtex", (evt, oF) => { + if (oF.items.length <= 0) { + _this.itensShelf.style.display = "none"; + } else { + if (window.location.hash !== "#/shipping" && window.location.hash !== "#/payment") { + _this.itensShelf.style.display = "block"; + } + } + }); + + window.addEventListener("hashchange", async () => { + if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") { + _this.itensShelf.style.display = "none"; + } else { + const orderForm = await window.vtexjs.checkout.getOrderForm(); + const items = orderForm.items.length; + if (items > 0) { + _this.itensShelf.style.display = "block"; + } + } + }); + + if ( + items === 0 || + window.location.hash === "#/shipping" || + window.location.hash === "#/payment" + ) { + this.itensShelf.style.display = "none"; + } } onUpdate() { @@ -30,11 +77,115 @@ export default class Footer { observer.observe(target, config); } + + createPrateleira() { + if (this.itensShelf) { + this.itensShelf.innerHTML = ` +
+

Você também pode gostar:

+
+ + `; + } + } + + async itensPrateleira() { + let structure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map((item) => `
  • ${item}
    • `); + + structure += ` +
  • +
    +
    ${response.name}
    +
    + +
    • + `; + }); + this.prateleira.innerHTML = structure; + } + + async fetchPrateleira() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const prodInfo = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return prodInfo; + }); + } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__carrossel-itens"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + infinite: true, + responsive: [ + { + breakpoint: 1279, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + infinite: true, + dots: true, + }, + }, + { + breakpoint: 790, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: true, + dots: true, + }, + }, + ], }); } + + creditCardIconsHTML() { + this.creditCardIcons.innerHTML = ` +
  • Mastercard
    • +
    • +
  • American Express
    • +
  • Elo
    • +
  • Hipercard
    • +
  • PayPal
    • +
  • Boleto
    • +
    • +
  • PCI VTEX
    • + `; + } + + developedByIconsHTML() { + this.developedByIcons.innerHTML = ` +
  • +
    + + Powered By + + +
    +
    • + +
  • +
    + + Developed By + + +
    +
    • + `; + } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..555a710 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -1,4 +1,119 @@ -/* Slider */ +.footerCheckout__prateleira { + .footerCheckout__prateleira-title { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #000000; + margin-bottom: 20px; + } + ul.footerCheckout__carrossel-itens { + display: flex; + list-style: none; + align-items: center; + margin: 0 132px; + + @include mq(xl, max) { + margin: 0 16px; + } + + .container-img { + margin: 0; + margin-bottom: 20px; + img { + height: 242px; + width: 100%; + object-fit: cover; + } + } + figcaption.name-picture { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: #000000; + margin-bottom: 20px; + } + li.slick { + ul.number { + display: flex; + list-style: none; + margin: 0; + justify-content: center; + margin-bottom: 20px; + + text { + display: none; + } + li { + background: #00c8ff; + border-radius: 8px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #ffffff; + padding: 5px; + margin: 0 2.5px; + } + } + button { + height: 42px; + width: 100%; + background: #00c8ff; + border-radius: 8px; + border: 0; + + a { + font-family: "Open Sans"; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: #ffffff; + } + } + } + + .slick-dots { + display: none !important; + } + + .slick-next { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg"); + display: block; + background-size: 100% 100%; + background-repeat: no-repeat; + background-color: transparent; + height: 29.47px; + width: 13px; + border: 0; + cursor: pointer; + } + + .slick-prev { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg"); + display: block; + background-size: 100% 100%; + background-repeat: no-repeat; + background-color: transparent; + height: 29.47px; + width: 13px; + border: 0; + cursor: pointer; + } + } +} .slick-slider { position: relative; @@ -18,7 +133,7 @@ position: relative; overflow: hidden; display: block; - margin: 0; + margin: 0 -8px; padding: 0; &:focus { @@ -62,6 +177,7 @@ } } .slick-slide { + margin: 0 8px; float: left; height: 100%; min-height: 1px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..fd8a4ce 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,35 +1,75 @@ /* _footer.scss */ .footerCheckout { - border-top: none; color: $color-gray2; &__wrapper { align-items: center; display: flex; + } + + .container { + border-top: 1px solid $color-black; + display: flex; + align-items: center; + padding: 0 16px; + width: 100%; justify-content: space-between; + + @media (min-width: 1200px) { + width: 100%; + } + + @include mq(md, max) { + margin: 0 0 0 9px; + display: grid; + } + } + + .color-img { + background-color: rgb(238, 238, 238); } &__address { - color: $color-gray2; font-family: $font-family; - font-style: normal; - font-weight: normal; + color: $color-gray2; + margin: 27px 0 24px 0; + width: 269px; font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { + @include mq(xl, max) { margin-bottom: 24px; max-width: 100%; } + + @include mq(2xl, min) { + font-family: $font-family; + color: $color-black; + width: 537px; + font-size: 20px; + line-height: 27px; + text-transform: capitalize; + } + + @include mq(xl, max) { + margin: 0px 0 16px 7px; + font-family: $font-family; + color: $color-black; + font-size: 10px; + line-height: 14px; + width: 269px; + text-transform: capitalize; + } } &__stamps { - align-items: center; display: flex; + align-items: center; justify-self: center; list-style: none; + width: 404px; + margin: 16px auto 16px auto; @include mq(md, max) { align-self: center; @@ -37,33 +77,66 @@ } &__divider { - background-color: $color-gray4; display: inline-block; + background-color: $color-gray4; height: 24px; margin: 0 8px; width: 1px; } + + @include mq(2xl, min) { + width: 690px; + } + + @include mq(xl, max) { + width: 342px; + order: -1; + } } &__developedBy { - align-items: center; display: flex; - list-style-type: none; + align-items: center; margin: 0; + margin-bottom: 16px; + list-style-type: none; - li:last-child { - margin-left: 16px; + .vtex-logo, + .m3-logo { + height: 16px; + margin-right: 8px; + } + + .by-m3 { + display: flex; + } + + .by-vtex { + display: flex; + } + + .list { + @include mq(2xl, min) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + width: 388px; + } + + @include mq(xl, max) { + margin: 0 0 16px 7px; + } } a { - align-items: center; - color: $color-gray2; display: flex; font-family: $font-family; - font-style: normal; - font-weight: normal; + color: $color-gray2; font-size: 10px; line-height: 12px; + align-items: center; text-decoration: none; span { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..aaa693f 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,138 @@ /* _prateleira.scss */ +.footerCheckout { + .container-carrossel-item { + margin: 0 132px; + + @include mq(md, max) { + margin: 0 16px; + } + } + + .slick-slide { + width: 242px; + margin: 0 16px 0 0; + } + + .prateleira-title { + display: flex; + justify-content: center; + font-family: $font-family-secundary; + color: $color-black-500; + margin: 0 0 20px 0; + font-size: 24px; + line-height: 38px; + text-align: center; + + @include mq(xl, min) { + font-family: $font-family-secundary; + color: $color-black-500; + font-size: 48px; + line-height: 76px; + text-align: center; + } + + @include mq(sm, max) { + font-size: 14px; + line-height: 28px; + } + } + + .prateleira-sku { + display: flex; + justify-content: center; + margin-bottom: 20px; + + @include mq(sm, max) { + flex-wrap: wrap; + } + + .sku { + display: flex; + font-family: $font-family; + color: $color-white-500; + background: $color-blue-100; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + + margin-left: 5px; + border-radius: 8px; + min-width: 9.3%; + padding: 4px; + justify-content: center; + align-items: center; + text-align: center; + text-transform: uppercase; + text-decoration: none; + + @include mq(xl, min) { + display: flex; + align-items: center; + text-align: center; + font-family: $font-family; + color: $color-white-500; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + text-transform: uppercase; + } + + @include mq(sm, max) { + margin-bottom: 10px; + } + } + } + + .prateleira-name { + display: flex; + justify-content: center; + text-align: center; + margin: 20px 0; + + @include mq(xl, min) { + font-family: $font-family; + color: $color-black-500; + font-size: 26px; + line-height: 35px; + text-align: center; + } + + @include mq(sm, max) { + font-size: 13px; + line-height: 18px; + text-align: center; + } + } + + .prateleira-button { + font-family: $font-family; + color: $color-white-500; + background: $color-blue-100; + text-transform: uppercase; + font-size: 13px; + line-height: 18px; + font-weight: 700; + letter-spacing: 0.05em; + margin-bottom: 56px; + width: 100%; + height: 42px; + border: none; + border-radius: 8px; + text-align: center; + align-items: center; + + @include mq(xl, min) { + font-family: $font-family; + color: $color-white-500; + font-weight: 700; + font-size: 26px; + line-height: 35px; + letter-spacing: 0.05em; + align-items: center; + text-align: center; + text-transform: uppercase; + } + } +}