diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 03829db..5cfc934 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,21 +3,20 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); - } - async init() { await this.selectors(); - this.onUpdate(); + // this.onUpdate(); this.showPrateleira(); - this.addCarrossel(); + // this.addCarrossel(); + this.displaySlick(); } 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.footerPratileira = await waitElement(".footerCheckout__prateleira"); + this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); this.footerStamps = await waitElement(".footerCheckout__stamps"); this.footerAddress = await waitElement(".footerCheckout__address"); this.footerDevelopedBy = await waitElement(".footerCheckout__developedBy"); @@ -40,16 +39,13 @@ export default class Footer { observer.observe(target, config); } - - showPrateleira() { - let pratileira = this.footerPratileira; - pratileira.innerHTML = ` + let prateleira = this.footerPrateleira; + prateleira.innerHTML = `

Você também pode gostar:

- - ` + `; fetch("https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319") @@ -74,11 +70,8 @@ export default class Footer { - - ` - pratileira.children[1].appendChild(li) - // console.log(pratileira) + prateleira.children[1].appendChild(li) }); @@ -127,6 +120,27 @@ export default class Footer { `; } + async displaySlick() { + const orderForm = await window.vtexjs.checkout.getOrderForm(); + const items = orderForm.items.length; + + $(window).on("orderFormUpdated.vtex", (evt, oF) => { + if (oF.items.length <= 0) { + this.footerPrateleira.style.display = "none"; + } else { + this.addCarrossel(); + this.footerPrateleira.style.display = "block"; + } + if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") { + this.footerPrateleira.style.display = "none"; + } + }); + if (items === 0) { + this.footerPrateleira.style.display = "none"; + } + } + + async addCarrossel() { const elemento = await waitElement(".container-carrossel-item"); $(elemento).slick({