From d1a2e5f605f9d2fecf1b3746cd88d7e6facb4707 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Sun, 18 Dec 2022 07:33:34 -0300 Subject: [PATCH] feat: Cria slick desktop mobile --- checkout/src/arquivos/js/checkout.js | 3 +- checkout/src/arquivos/js/components/Footer.js | 147 ++++++++++--- checkout/src/arquivos/sass/checkout.scss | 1 + .../arquivos/sass/partials/_autenticacao.scss | 20 +- .../src/arquivos/sass/partials/_footer.scss | 10 +- .../arquivos/sass/partials/_prateleira.scss | 197 ++++++++++++++++++ 6 files changed, 342 insertions(+), 36 deletions(-) diff --git a/checkout/src/arquivos/js/checkout.js b/checkout/src/arquivos/js/checkout.js index a303198..5d5f403 100644 --- a/checkout/src/arquivos/js/checkout.js +++ b/checkout/src/arquivos/js/checkout.js @@ -6,11 +6,10 @@ import Footer from "./components/Footer"; import Cart from "./components/Cart"; import Email from "./components/Email"; import Shipping from "./components/Shipping"; -import Payment from "./components/Payment"; const m3Checkout = new Container({ appName: "m3-checkout", - components: [CheckoutUI, Header, Footer, Cart, Email, Shipping, Payment], + components: [CheckoutUI, Header, Footer, Cart, Email, Shipping], }); m3Checkout.start(); diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index b28262f..7d641c0 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,17 +8,77 @@ export default class Footer { async init() { this.imgLinks = "https://agenciamagma.vteximg.com.br/arquivos/"; await this.selectors(); + this.events(); this.buildIconList(); this.buildDevelopedByList(); - // this.onUpdate(); + this.buildSlickItems(); + 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", { + timeout: 5000, + interval: 1000, + }); + this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); + } + + events() { + window.addEventListener("hashchange", this.onUpdate.bind(this)); + } + + buildSlickItems() { + const slickItems = fetch( + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" + ) + .then(function (response) { + return response.json(); + }) + .then(function (data) { + const slickItems = data.map((item) => { + const div = document.createElement("div"); + + const ul = document.createElement("ul"); + + const items = item.items; + + items.forEach((item) => { + const li = document.createElement("li"); + li.classList.add("prateleira__option"); + + li.innerHTML = item.name; + + ul.appendChild(li); + }); + + div.classList.add("prateleira__item"); + const jpg = item.items[0].images[0].imageUrl; + div.innerHTML = ` + +

${item.productName}

+ + + `; + + return div; + }); + + return slickItems; + }); + + const buildSlickItems = () => { + slickItems.then((items) => { + items.forEach((item) => { + this.footerPrateleira.appendChild(item); + }); + }); + }; + + buildSlickItems(); } buildIconList() { @@ -87,25 +147,64 @@ export default class Footer { }); } - // 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); - // }); - // }); + 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 + this.footerPrateleira.style.display = "none"; - // observer.observe(target, config); - // } - // async addCarrossel() { - // const elemento = await waitElement("#my-element"); - // $(elemento).slick({ - // slidesToShow: 4, - // slidesToScroll: 1, - // }); - // } + if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/cart" && + this.checkoutVazio.style.display === "none" + ) + this.footerPrateleira.style.display = ""; + + let target = this.checkoutVazio; + let config = { childList: true, attributes: true }; + let observer = new MutationObserver((mutations) => { + mutations.forEach( + function (mutation) { + console.log(mutation); + if (mutation.type === "attributes" && mutation.attributeName === "style") { + if (target.style.display === "none") { + console.log("carrinho cheio"); + + if (!this.footerPrateleira.classList.contains("slick-initialized")) + this.addCarrossel(); + this.footerPrateleira.style.display = ""; + } else { + this.footerPrateleira.style.display = "none"; + console.log("carrinho vazio"); + } + } + }.bind(this) + ); + }); + + observer.observe(target, config); + } + + addCarrossel() { + const elemento = this.footerPrateleira; + $(elemento).slick({ + slidesToShow: 4, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 768, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + }, + }, + ], + }); + } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index e508622..5872a24 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -5,3 +5,4 @@ @import "./partials/footer"; @import "./partials/menu"; @import "./partials/autenticacao"; +@import "./partials/prateleira"; diff --git a/checkout/src/arquivos/sass/partials/_autenticacao.scss b/checkout/src/arquivos/sass/partials/_autenticacao.scss index 396b7e1..6b4c7ef 100644 --- a/checkout/src/arquivos/sass/partials/_autenticacao.scss +++ b/checkout/src/arquivos/sass/partials/_autenticacao.scss @@ -263,11 +263,6 @@ .accordion-body { p { - @include mq(mobile, max) { - width: 100%; - max-width: -webkit-fill-available; - } - &.client-email { width: 100%; margin-bottom: 16px; @@ -282,6 +277,10 @@ margin: 0; width: 46%; + @include mq(mobile, max) { + width: 100%; + } + &::placeholder { font-weight: 400; font-size: 14px; @@ -292,7 +291,8 @@ &.client-last-name { @include mq(mobile, max) { - margin-right: 15px; + margin-right: 15px !important; + max-width: -webkit-fill-available; } } @@ -302,6 +302,10 @@ flex-direction: column; margin: 0; width: 46%; + + @include mq(mobile, max) { + width: 100%; + } } &.client-last-name { @@ -354,6 +358,10 @@ div { width: 46%; + p { + width: 100%; + } + @include mq(mobile, max) { width: 100%; max-width: -webkit-fill-available; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 9248f1e..6097b8c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,10 +1,12 @@ /* _footer.scss */ .footerCheckout { - border-top: 1px solid $black-500; - padding: 16px 32px; + &__wrapper { + border-top: 1px solid $black-500; + padding: 16px 32px; - @include mq(mobile, max) { - padding: 22px 8px 16px; + @include mq(mobile, max) { + padding: 22px 8px 16px; + } } .container { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..0c32d76 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,198 @@ /* _prateleira.scss */ +.footerCheckout__prateleira { + padding: 0 132px 56px; + display: flex; + flex-direction: column; + position: relative; + + &::before { + content: "Você também pode gostar:"; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $black-500; + font-family: $font-family-secundary; + text-align: center; + + @include mq(4k, min) { + font-size: 48px; + line-height: 76px; + } + } + + @include mq(tablet, max) { + padding-right: 15px; + } + + @include mq(mobile, max) { + padding: 0 17px 54px 16px; + } + + .slick-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: map-get($z-index, level1); + } + + .slick-list { + margin-top: 20px; + } + + .slick-prev { + left: 142px; + border: none; + background-color: transparent; + outline: 0; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") !important; + background-size: contain; + background-repeat: no-repeat; + width: 13px; + height: 29px; + + @include mq(tablet, max) { + left: 16px; + } + + @include mq(mobile, max) { + left: 26px; + } + + @include mq(4k, min) { + width: 26px; + height: 58px; + } + } + + .slick-next { + right: 142px; + border: none; + background-color: transparent; + outline: 0; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") !important; + background-size: contain; + background-repeat: no-repeat; + width: 13px; + height: 29px; + + @include mq(tablet, max) { + right: 16px; + } + + @include mq(mobile, max) { + right: 26px; + } + + @include mq(4k, min) { + width: 26px; + height: 58px; + } + } + + .slick-track { + display: flex; + } + + .slick-slide { + height: auto; + + & > div, + .prateleira__item { + height: 100%; + display: flex !important; + flex-direction: column; + margin: 0 4px; + max-width: -webkit-fill-available; + } + } + + .prateleira { + &__product-name { + font-weight: 400; + font-size: 13px; + text-align: center; + line-height: 18px; + color: $black-500; + margin: 20px 0; + + @include mq(4k, min) { + font-size: 26px; + line-height: 35px; + } + } + + &__options { + flex: 1; + margin: 0; + display: flex; + flex-wrap: wrap; + list-style-type: none; + width: 100%; + align-items: center; + justify-content: center; + margin-bottom: 20px; + } + + &__option { + margin-right: 5px; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $white-500; + letter-spacing: 0.05em; + text-transform: uppercase; + background-color: $blue-500; + border-radius: 8px; + padding: 5px; + cursor: pointer; + + @include mq(mobile, min) { + &:hover { + background: $blue-600; + } + + &:active { + background: $blue-500; + } + } + + @include mq(4k, min) { + font-size: 26px; + line-height: 35px; + } + + &:last-of-type { + margin-right: 0; + } + } + + &__button { + border: none; + width: 100%; + background: $blue-500; + border-radius: 8px; + padding: 12px 0; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: 0.05em; + text-transform: uppercase; + color: $white-500; + + @include mq(mobile, min) { + &:hover { + background: $blue-600; + } + + &:active { + background: $blue-500; + } + } + + @include mq(4k, min) { + font-size: 26px; + line-height: 35px; + } + } + } +}