From 9eab0de4583ecf8c5551567d6b0169defc981f69 Mon Sep 17 00:00:00 2001 From: Gabriel Lehmann Date: Fri, 16 Dec 2022 15:40:49 -0300 Subject: [PATCH] feat: added footer --- checkout/src/arquivos/js/components/Footer.js | 226 +++++++++++++++++- .../sass/checkout/_checkout-vazio.scss | 65 ++--- .../src/arquivos/sass/checkout/_checkout.scss | 11 +- .../src/arquivos/sass/partials/_footer.scss | 197 ++++++++++++--- .../src/arquivos/sass/partials/_header.scss | 13 +- .../src/arquivos/sass/utils/_variaveis.scss | 40 +++- 6 files changed, 464 insertions(+), 88 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..11d461d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -1,3 +1,4 @@ +import { data } from "jquery"; import { waitElement } from "m3-utils"; export default class Footer { @@ -7,34 +8,233 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.createPaymentsIcons(); + this.createVtexpciIcon(); + this.createDevIcons(); + this.onUpdate(); + this.events(); + } + + events() { + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { + this.listaPrateleira.style.display = "flex"; + } + if (window.location.hash != "#/cart") { + this.listaPrateleira.style.display = "none"; + } + }); + addEventListener("resize", () => { + this.addCarrossel(); + }); } 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.checkoutAtivo = await waitElement(".checkout-container"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); + this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); + this.titulo = await waitElement(".transactions-container"); + this.cartTitulo = await waitElement("#cart-title"); + this.titleSlick = await waitElement(".transactions-container"); } 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 list = this.listaPrateleira; + let cartTitle = this.cartTitulo; + let slickTitle = this.titleSlick; + + if (target.style.display == "none" && window.location.hash == "#/cart") { + list.style.display = "flex"; + list.style.display = "block"; + this.fetchApi(); + } else { + this.cartTitulo.style.display = "none"; + list.style.display = "none"; + } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + if (!this.listaPrateleira.classList.contains("fetch")) { + this.fetchApi(); + } mutations.forEach(function (mutation) { - console.log(mutation.type); + if (target.style.display != "none") { + list.style.display = "none"; + cartTitle.style.display = "none"; + if (list.style.display == "none") { + slickTitle.style.display = "none"; + } + } else { + cartTitle.style.display = "block"; + list.style.display = "flex"; + } }); }); - observer.observe(target, config); + observer.observe(target, config, cartTitle, slickTitle); } + async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + const elemet = await waitElement(".slick-list"); + if ($(elemet).hasClass("slick-initialized")) { + $(elemet).slick("unslick"); + } + if (window.innerWidth > 1024) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 4, + slidesToScroll: 1, + }); + } else if (window.innerWidth > 375) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 3, + slidesToScroll: 1, + }); + } else if (window.innerWidth <= 375) { + $(elemet).not(".slick-initialized").slick({ + slidesToShow: 2, + slidesToScroll: 1, + }); + } + } + + createPaymentsIcons() { + this.payments.innerHTML = ` + + `; + } + + createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
+ +
+ `; + } + + createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; + } + + async fetchApi() { + this.titulo.innerHTML = ` +

    Você também pode gostar:

    + `; + + fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then((response) => response.json()) + .then((data) => { + const ul = document.createElement("ul"); + ul.classList.add("slick-list"); + this.listaPrateleira.appendChild(ul); + + data.map((item) => { + let cores = ""; + for (let i = 0; i < item.items.length; i++) { + cores += `

    ${item.items[i].name}

    `; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("slick-list__itemList"); + + li.innerHTML = ` +
    + +
    +
    ${item.productName}
    +
    + ${cores} +
    + VER PRODUTO + `; + ul.appendChild(li); + this.listaPrateleira.classList.add("fetch"); + }); + }) + .then(() => { + this.addCarrossel(); + }); } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..d8c4153 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,39 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $color-black; - text-align: center; + font-family: $font-family; + &-content { + color: $color-black; + text-align: center; - @include mq(md, max) { - padding: 0 16px; - } - } + @include mq(md, max) { + padding: 0 16px; + } + } - &-title { - font-size: 20px; - } + &-title { + font-size: 24px; + text-transform: uppercase; + } - &-links { - .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + &-links { + .link-choose-products { + background: $color-black; + border: none; + border-radius: 5px; + transition: ease-in 0.22s all; + outline: none; + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-align: center; + letter-spacing: 0.05em; + color: $color-white; + text-transform: uppercase; - &:hover { - background: lighten($color-black, 5); - } - } - } + &:hover { + background: lighten($color-black, 5); + } + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..913a2a9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -7,10 +7,19 @@ html { height: 100%; min-height: 100%; } +footer { + margin-top: auto; +} footer .footerCheckout__wrapper { - width: 94.9734%; + border-top: 1px solid black; + width: 100%; margin: auto auto 0 auto; + + .container { + display: flex; + padding: 16px 32px; + } } footer .footerCheckout__prateleira, header { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..2a701e2 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,47 +1,130 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + .container { + display: flex; + flex-direction: column; + width: 100%; + padding: 7px 0; + margin: 0; + + @include mq(dt, min) { + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 15px 0 15px 0; + } + + @include mq(tv, min) { + padding: 26px 0 26px 0; + } + } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + border-top: 1px solid $black; + + @media screen and (max-width: 490px) { + padding: 7px 0; + } } &__address { - color: $color-gray2; + color: $gray-500; font-family: $font-family; - font-style: normal; - font-weight: normal; + font-weight: 400; + line-height: 14px; font-size: 10px; - line-height: 12px; text-transform: capitalize; - max-width: 40%; - @include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; + @include mq(dt, max) { + display: flex; + width: 100%; + order: 2; + margin-top: 17px; + + span { + margin-left: 16px; + } + } + + @include mq(dt, min) { + min-width: 269px; + margin-left: 32px; + } + + @include mq(tv, min) { + font-size: 20px; + line-height: 27px; + min-width: 537px; + margin-left: 0; } } &__stamps { - align-items: center; display: flex; - justify-self: center; + height: 33px; + align-items: center; list-style: none; + margin: 0 0 0 5px; - @include mq(md, max) { - align-self: center; - margin-bottom: 12px; + li { + height: 33px; } - &__divider { - background-color: $color-gray4; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + @include mq(dt, min) { + justify-content: center; + min-width: 404px; + margin: 0; + } + + @include mq(tv, min) { + min-width: 690.52px; + } + + .payments-icons-wrapper { + display: flex; + width: 100%; + list-style: none; + margin: 0; + gap: 4px; + + figure { + padding: 6px 0 7px; + width: 35.65px; + height: 20px; + margin: 0; + @include mq(tv, min) { + width: 69.63px; + } + + @include mq(Gf, max) { + width: 28px; + } + } + } + + .footerCheckout__stamps__divider { + border-left: 1px solid $gray-125; + margin: 0 10px; + height: 33px; + padding: 0 0 9px; + + @include mq(dt, min) { + margin-left: 11.35px; + } + } + + .footerCheckout__vtexpci { + .vtex-icon { + width: 53px; + margin: 0; + } + + @include mq(tv, min) { + .vtex-icon { + width: 103.52px; + height: 64.46px; + } + } } } @@ -51,18 +134,43 @@ list-style-type: none; margin: 0; - li:last-child { + @include mq(dt, max) { + display: flex; + width: 100%; + order: 3; + margin-top: 17px; + } + + @include mq(dt, min) { + min-width: 217px; + margin-right: 22.5px; + } + + li { margin-left: 16px; + + figure { + margin: 0; + } + } + + .vtex-icon { + width: 44.92px; + margin: 0; + } + .m3-icon { + width: 28.66px; + margin: 0; } a { align-items: center; - color: $color-gray2; + color: $gray-500; 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; @@ -70,5 +178,38 @@ margin-right: 8px; } } + + @include mq(tv, min) { + min-width: 388.98px; + margin-right: 0; + + a { + font-size: 18px; + line-height: 25px; + } + + li { + margin-left: 10px; + } + + .vtex-icon { + width: 87.73px; + } + .m3-icon { + width: 55.98px; + } + } + } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..3f2ff51 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,6 +1,10 @@ /* _header.scss */ .headerCheckout { + width: 100%; + border-bottom: 1px solid black; + .container { + padding: 29px 131px; width: auto !important; } &__wrapper { @@ -17,16 +21,21 @@ } &__safeBuy { + img { + height: 15px; + margin-right: 8px; + } + span { align-items: center; - display: flex; + // display: flex; text-transform: uppercase; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-gray; + color: $color-black; } i { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..e3d5082 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -2,7 +2,7 @@ @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); $font-family: "Open Sans", sans-serif; -$font-family-secundary:"Tenor Sans", sans-serif; +$font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; @@ -19,20 +19,36 @@ $color-blue: #4267b2; $color-green: #4caf50; +/* Colors */ +$black: #000; +$white: #fff; + +$gray-50: #e5e5e5; +$gray-100: #f0f0f0; +$gray-125: #c4c4c4; +$gray-150: #989898; +$gray-200: #8d8d8d; +$gray-500: #292929; + +$blue: #00c8ff; + /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + Gf: 328px, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + dt: 1025px, + xl: 1200px, + tv: 2500px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;