diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1ea1b73..26c6160 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,19 +7,21 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); - this.footerCheckoutStamps(); + this.onUpdate(); + this.footerCheckoutPayments(); this.footerCheckoutDevelopedBy(); + await this.ListProducts(); } 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.Stamps = await waitElement(".footerCheckout__payments"); + this.Payments = await waitElement(".footerCheckout__payments"); this.Vtexpci = await waitElement(".footerCheckout__vtexpci"); this.DevelopedBy = await waitElement(".footerCheckout__developedBy"); this.sliderProducts = await waitElement(".footerCheckout__prateleira"); + } onUpdate() { @@ -36,16 +38,41 @@ export default class Footer { observer.observe(target, config); } + + async ListProducts() { + const response = await fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") + .then((response) => response.json()); + + response.forEach((produto) => { + const image = produto.items[0].images[0].imageUrl; + const name = produto.productName; + + this.sliderProducts.innerHTML += ` +
  • + +

    ${name}

    + + Ver produto +
  • + `; + }); + this.addCarrossel(); + } + + + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__prateleira"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, }); } - footerCheckoutStamps() { - this.Stamps.innerHTML = ` + footerCheckoutPayments() { + this.Payments.innerHTML = ` ícone do cartão master card ícone do cartão visa ícone do cartão american express @@ -78,4 +105,3 @@ export default class Footer { `; } } -