diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fb88494..a30f34b 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,11 +6,14 @@ export default class Footer { } async init() { + this.API = await this.FechtAPI() await this.selectors(); + this.createHtmlCarrosel(); + this.prateleiraul = await waitElement(".prateleira_carroselul"); + this.onUpdate(); + this.createli() this.adicionaPayments(); - //await this.removeh1checkout(); - await this.adicionandoDevelopBy() - // this.onUpdate(); + await this.adicionandoDevelopBy(); } async selectors() { @@ -18,6 +21,10 @@ export default class Footer { this.payments = await waitElement(".footerCheckout__payments"); this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.devolperBy = await waitElement(".footerCheckout__developedBy"); + this.prateleira = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); } adicionaPayments() { @@ -67,31 +74,89 @@ export default class Footer { //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 config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { + let removeClassh3 = document.getElementById("removeClassh3") + let removeClassul = document.getElementById("removeClassul") mutations.forEach(function (mutation) { - console.log(mutation.type); + const checkoutTarget = mutation.target.attributes.style.nodeValue; + console.log(checkoutTarget) + if(checkoutTarget === "display: none;"){ + removeClassh3.classList.remove("displayNone") + removeClassul.classList.remove('displayNone') + console.log("iou") + }else if(checkoutTarget === "display: block;"){ + removeClassh3.classList.add("displayNone") + removeClassul.classList.add("displayNone") + } }); }); observer.observe(target, config); } + + createHtmlCarrosel (){ + if(this.prateleira){ + this.prateleira.innerHTML = ` +