diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..96fc09d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,34 +7,195 @@ export default class Footer { async init() { await this.selectors(); - // this.onUpdate(); + this.onUpdate(); + this.criaFooter(); + this.criaPrateleira(); + this.criaCarrossel(); } 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 + // Containers + this.containerMain = document.querySelector("body .container-main"); + this.cartTemplate = document.querySelector(".cart-template"); + this.checkoutContainer = document.querySelector(".checkout-container"); + // Checkout this.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutTitle = document.querySelector("#cart-title"); + this.checkoutButton = document.querySelector("#cart-choose-products"); + // Footer + this.checkoutAddress = document.querySelector(".footerCheckout__address"); + this.cardsIcons = document.querySelector(".footerCheckout__stamps").firstElementChild; + this.vtexIcon = document.querySelector(".footerCheckout__stamps").lastElementChild; + this.poweredBy = document.querySelector(".footerCheckout__developedBy").firstElementChild; + this.developedBy = document.querySelector(".footerCheckout__developedBy").lastElementChild; + // Prateleira + this.prateleira = document.querySelector(".footerCheckout__prateleira"); } 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 containerMain = this.containerMain; + let cartTemplate = this.cartTemplate; + let checkoutContainer = this.checkoutContainer; + let checkoutTitle = this.checkoutTitle; + let checkoutButton = this.checkoutButton; + let prateleira = this.prateleira; + let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { mutations.forEach(function (mutation) { - console.log(mutation.type); + if (target.style.display != "none") { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "none"; + } + containerMain.style.display = "flex"; + containerMain.style.height = "100%"; + checkoutTitle.style.display = "none"; + checkoutButton.innerHTML = "Continuar comprando"; + cartTemplate.style.display = "flex"; + prateleira.style.display = "none"; + + + } else { + if (document.querySelector(".prateleiraTitle") != null) { + document.querySelector(".prateleiraTitle").style.display = "block"; + } + containerMain.style.display = "block"; + containerMain.style.height = "max-content"; + checkoutTitle.style.display = "block"; + cartTemplate.style.height = "max-content"; + cartTemplate.style.display = "block"; + prateleira.style.display = "block"; + + if (window.location.hash != "#/cart") { + checkoutTitle.style.display = "none"; + prateleira.style.display = "none"; + } + + if (window.location.hash == "#/email") { + containerMain.style.height = "100%"; + checkoutContainer.style.overflow = "initial" + } + } }); }); observer.observe(target, config); } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); + + criaFooter() { + this.checkoutAddress.innerHTML = ` +
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ `; + + this.cardsIcons.innerHTML = ` + + + + + + + + + + + + + + `; + + this.vtexIcon.innerHTML = ` + + `; + + this.poweredBy.innerHTML = ` +Powered By
+ + +Developed By
+ + +${product.productName}
+ +