From 97424578d652b60b98dd058055d17d487310725b Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Sat, 17 Dec 2022 11:59:36 -0300 Subject: [PATCH] =?UTF-8?q?feat(slick):=20implementa=C3=A7=C3=A3o=20do=20s?= =?UTF-8?q?lick=20no=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 250 +++++++++++++++--- 1 file changed, 213 insertions(+), 37 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 32323a5..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 { @@ -5,60 +6,235 @@ export default class Footer { this.init(); } - payments() { - this.paymentTypesIconsContainer.innerHTML = ""; - const paymentTypes = [ - "masterCardM3Academy", - "visaM3Academy", - "amexM3Academy", - "eloM3Academy", - "hiperCardM3Academy", - "paypalM3Academy", - "boletoM3Academy", - ]; - paymentTypes.forEach((paymentType) => { - const image = document.createElement("img"); - image.src = `https://agenciamagma.vteximg.com.br/arquivos/${paymentType}.png`; - this.paymentTypesIconsContainer.appendChild(image); - }); - } - async init() { await this.selectors(); - this.payments(); - // 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() { - this.paymentTypesIconsContainer = await waitElement( - ".footerCheckout__stamps li:first-of-type" - ); - //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(); + }); } } - -// final