From 1f6779555195a86d9104209d2c220724a91c75eb Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 18 Dec 2022 22:46:37 -0300 Subject: [PATCH] feat(prateleira): Cria e aplica css prateleira --- checkout/src/arquivos/js/components/Footer.js | 142 ++++++++++++++++-- checkout/src/arquivos/sass/lib/_slick.scss | 9 ++ .../arquivos/sass/partials/_prateleira.scss | 142 ++++++++++++++++++ 3 files changed, 279 insertions(+), 14 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 64a796d..2f38895 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,19 +7,32 @@ export default class Footer { async init() { await this.selectors(); + + /*if (window.location.hash === "#/cart") { + this.onUpdate(); + }*/ + + this.requestAPI(); + this.prateleiraItem = await waitElement(".prateleira__ul"); + this.events(); + this.onUpdate(); + //await this.addCarrossel(); this.paymentsIconsHTML(); this.vtexPciIconHTML(); this.developedByLogoHTML(); - // this.onUpdate(); } 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.payments = await waitElement(".footerCheckout__payments"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); this.developedBy = await waitElement(".footerCheckout__developedBy"); + this.cartTitle = await waitElement("#cart-title"); + + this.prateleira = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1, + }); } paymentsIconsHTML() { @@ -40,7 +53,7 @@ export default class Footer { vtexPciIconHTML() { if (this.vtexPCI) { - this.vtexPCI.innerHTML = ` + this.vtexPCI.innerHTML = ` Ícone Vtex PCI @@ -72,26 +85,127 @@ export default class Footer { } } + hashCgange(e) { + if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.prateleira.classList.add("desativado"); + }else { + this.prateleira.classList.remove("desativado"); + } + } + + events() { + window.addEventListener("hashchange", this.hashCgange.bind(this)); + } + 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); - }); - }); + mutations.map((mutation) => { - observer.observe(target, config); + const status = mutation.target.attributes.style.nodeValue; + + if (status == "display:none;") { + this.requestAPI(); + } else if (status == "display:block;") { + this.removePrateleira(); + } + + }); + + observer.observe(target, config); + }); + } + + requestAPI() { + this.prateleira.innerHTML = ` +

Você também pode gostar:

+ + `; + + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + const products = document.querySelector(".prateleira__ul"); + + fetch(api) + .then((response) => { + return response.json(); + }) + + .then((data) => { + data.forEach((item) => { + const imgProduct = item.items[0].images[0].imageUrl; + const nameProduct = item.productName; + const linkProduct = item.link; + + products.innerHTML += ` +
  • +
    + Imagem do Produto +
    + +
    +

    ${nameProduct}

    + +
      + ${item.items.map((name) => `
    • ${name.name}
      • `).join("")} +
    + + + Ver Produto + +
    +
    • + `; + }); + }) + + .then(() => { + this.addCarrossel(); + }); + } + + removePrateleira() { + this.requestAPI.innerHTML = ""; } async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + const prateleiraItem = await waitElement("#prateleira__ul"); + + $(prateleiraItem).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: false, + arrows: true, + responsive: [ + { + breakpoint: 1170, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + }, + { + breakpoint: 925, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + }, + { + breakpoint: 635, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + } + ] }); } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..d995d4a 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -99,6 +99,12 @@ .slick-arrow { font-size: 0; position: absolute; + border: none; + top: 170px; + + @include mq(xg, min) { + top: 280px; + } } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") @@ -107,8 +113,11 @@ left: 10px; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; z-index: 4; right: 10px; + transform: rotateY(180deg); } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..bb61ef7 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,143 @@ /* _prateleira.scss */ + +.footerCheckout__prateleira { + width: 79.375%; + + @include mq(xg, min) { + width: 79.76%; + } + + .prateleira { + &__title { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black2; + text-align: center; + + @include mq(xg, min) { + font-size: 48px; + line-height: 76px; + } + } + + &__ul { + display: flex; + justify-content: center; + margin: 0; + gap: 16px; + + @include mq(xg, min) { + gap: 19px; + } + } + + &__li { + width: 242px; + display: flex; + flex-direction: column; + align-items: center; + + @include mq(xg, min) { + width: 485px; + } + } + + &__image { + width: 242px; + height: auto; + margin-bottom: 20px; + margin-inline-start: 0px; + margin-inline-end: 0px; + + @include mq(xg, min) { + width: 485px; + margin-bottom: 21px; + } + } + + &__text { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + h2 { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + color: $color-black2; + text-align: center; + margin: 0; + + @include mq(xg, min) { + font-size: 26px; + line-height: 35px; + } + } + + a { + background-color: $color-blue2; + border-radius: 8px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $color-white; + letter-spacing: 0.05em; + width: 242px; + height: 42px; + padding: 12px 72px; + text-align: center; + white-space: nowrap; + text-transform: uppercase; + cursor: pointer; + margin-bottom: 56px; + + @include mq(xg, min) { + width: 485px; + height: 59px; + font-size: 26px; + line-height: 35px; + padding: 12px 0 12px 0; + } + } + + ul { + display: flex; + width: fit-content; + gap: 10px; + margin: 20px 0 20px 0; + + li { + background-color: $color-blue2; + border-radius: 8px; + display: flex; + align-items: center; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $color-white; + letter-spacing: 0.05em; + padding: 5px; + text-align: center; + text-transform: uppercase; + + @include mq(xg, min) { + height: 45px; + font-size: 26px; + line-height: 35px; + padding: 8px 5px; + } + } + } + } + } +}