diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 82bb579..6257c92 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,47 +7,100 @@ export default class Footer { async init() { await this.selectors(); - await this.addImagesFooter(); + await this.addHTMLFooter(); await 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.checkoutPayments = await waitElement(".footerCheckout__stamps"); - this.developBy = await waitElement(".footerCheckout__developedBy"); - this.titleMyCart = await waitElement("#cart-title"); + // this.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutVazio = document.querySelector(".empty-cart-content"); + this.checkoutPayments = document.querySelector(".footerCheckout__stamps"); + this.developBy = document.querySelector(".footerCheckout__developedBy"); + this.titleMyCart = document.querySelector("#cart-title"); + // this.pratileira = await waitElement(".footerCheckout__prateleira"); + this.pratileira = document.querySelector(".footerCheckout__prateleira"); } async 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 sliderVisible = Boolean; let target = this.checkoutVazio; let titleCart = this.titleMyCart; + let pratileira = this.pratileira; let config = { childList: true, attributes: true }; - let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { + let observer = new MutationObserver(mCallback); + + function mCallback(mutations) { + mutations.forEach((mutation) => { if (target.style.display === "block") { - titleCart.classList.add("cartTitleInvisible"); + titleCart.classList.add("elementInvisible"); + pratileira.classList.add("elementInvisible"); + sliderVisible = false; + console.log("oioioi"); } else { - titleCart.classList.remove("cartTitleInvisible"); + titleCart.classList.remove("elementInvisible"); + pratileira.classList.remove("elementInvisible"); + sliderVisible = true; } }); - }); + } observer.observe(target, config); + + if (sliderVisible) { + if (target.style.display === "none") { + await this.api(); + } + } } + async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = document.querySelector(".sliderPratileira"); + $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: true, + arrows: true, }); } - async addImagesFooter() { + async api() { + const url = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + const dados = await fetch(url); + const dataApi = await dados.json(); + + this.pratileira.innerHTML = ` +
Você também pode gostar
+