diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f083b38..6941c5f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -13,12 +13,9 @@ export default class Footer { } 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.paymentIcons = await waitElement(".footerCheckout__stamps"); this.developedByIcons = await waitElement(".footerCheckout__developedBy"); this.checkoutVazio = await waitElement(".empty-cart-content"); - // this.carrossel = await waitElement(".footerCheckout__prateleira"); } footerIcons() { @@ -56,55 +53,62 @@ export default class Footer { } onUpdate() { + function changeTexts() { + document.querySelector(".shipping-date").innerText = "Frete"; + document.querySelector(".product-price").innerText = "Unidade"; + document.querySelector(".accordion-toggle span").innerText = "Identificação"; + } const cartTitle = document.querySelector("#cart-title"); const prateleira = document.querySelector(".footerCheckout__prateleira"); - const hash = window.location.hash; + const chooseProductsBtn = document.querySelector("#cart-choose-products"); + const linkBoxEdit = document.querySelector(".link-box-edit"); const locationHref = window.location.href; - //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 checkoutItemsQuantity = window.vtexjs.checkout.orderForm.items.length; let target = this.checkoutVazio; let config = { childList: true, attributes: true, attributeFilter: ["style"] }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log("funcionou"); - console.log(target.style.display); - if (target.style.display === "block") { + mutations.forEach(function () { + if ( + target.style.display === "block" || + locationHref !== "https://m3academy.myvtex.com/checkout/#/cart" + ) { + changeTexts(); + chooseProductsBtn.innerText = "Continuar comprando"; prateleira.style.display = "none"; cartTitle.style.display = "none"; } else { prateleira.style.display = "block"; cartTitle.style.display = "block"; - if (locationHref !== "https://m3academy.myvtex.com/checkout/#/cart") { - cartTitle.style.display = "none"; - prateleira.style.display = "none"; - } - window.addEventListener("hashchange", () => { - console.log(hash); - console.log(locationHref); - if (hash !== "#/cart") { - cartTitle.style.display = "none"; - prateleira.style.display = "none"; - } - }); } - // if (window.vtexjs.checkout.orderForm.items.length == 0) { - // cartTitle.style.display = "none"; - // } else { - // cartTitle.style.display = "block"; - // } - - // if (hash == "email" || hash == "profile" || hash == "shipping") { - // prateleira.style.display = "none"; - // } else { - // prateleira.style.display = "block"; - // } + window.addEventListener("hashchange", () => { + if (window.location.hash !== "#/cart") { + prateleira.style.display = "none"; + } else { + prateleira.style.display = "block"; + } + }); }); }); - observer.observe(target, config); + + function addTexts() { + const paymentsTitle = document.querySelector( + ".accordion-toggle.collapsed.accordion-toggle-active" + ); + let paymentsDescription = + '
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
'; + paymentsTitle.insertAdjacentHTML("afterend", paymentsDescription); + } + setTimeout(addTexts, 5000); + + // if (linkBoxEdit) { + // const linkBoxEdit = document.querySelector(".link-box-edit"); + + // let newEditIcon = + // ''; + + // linkBoxEdit.insertAdjacentHTML("afterbegin", newEditIcon); + // } } addCarrossel() { @@ -116,10 +120,6 @@ export default class Footer { const ul = document.createElement("ul"); carrossel.appendChild(ul); - // const slick = document.querySelector(".slick-track"); - - // const ul = document.createElement("ul"); - // carrossel.appendChild(ul); fetch( "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319" )