From fb3b5ddb5bc88921e0c3bdac1632709df5bf0eac Mon Sep 17 00:00:00 2001 From: Vinicius Date: Mon, 19 Dec 2022 00:33:15 -0200 Subject: [PATCH] feat(footer):adiciona funcao footer --- checkout/src/arquivos/js/components/Footer.js | 51 +++++++++---------- 1 file changed, 23 insertions(+), 28 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index d9e3c0a..04b5231 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -5,14 +5,16 @@ export default class Footer { this.init(); } - async Init() { - this.list = await this.fetchPrat(); + async init() { + this.list = await this.fetchPrateleira(); await this.selectors(); - //this.onUpdate(); - this.createPrat(); + // this.onUpdate(); + this.createPrateleira(); this.prateleira = await waitElement(".footerCheckout__carrossel-itens"); - this.itensPrat(); + this.itensPrateleira(); + this.addCarrossel(); + this.creditCardIconsHTML(); this.developedByIconsHTML(); } @@ -26,29 +28,22 @@ export default class Footer { this.developedByIcons = await waitElement(".footerCheckout__developedBy"); } - // onUpdate() { - // 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) { - // const checkoutTarget = mutation.target.attributes.style.nodeValue; - // console.log(checkoutTarget); - // if (checkoutTarget === "display: none;") { - // removeClassh3.classList.remove("displayNone"); - // removeClassul.classList.remove("displayNone"); - // } else if (checkoutTarget === "display: block;") { - // removeClassh3.classList.add("displayNone"); - // removeClassul.classList.add("displayNone"); - // } - // }); - // }); + 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; + letconfig = { childList: true, attributes: true }; + letobserver = new MutationObserver((mutations) => { + mutations.forEach(function (mutation) { + console.log(mutation.type); + }); + }); - // observer.observe(target, config); - // } + observer.observe(target, config); + } - createPrat() { + createPrateleira() { if (this.itensShelf) { this.itensShelf.innerHTML = `
@@ -59,7 +54,7 @@ export default class Footer { } } - async itensPrat() { + async itensPrateleira() { letstructure = ""; this.list.forEach((response) => { @@ -77,7 +72,7 @@ export default class Footer { this.prateleira.innerHTML = structure; } - async fetchPrat() { + async fetchPrateleira() { constapi = "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; return fetch(api)