diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ad5a611..e7f8f0f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,42 +7,58 @@ export default class Footer { async init() { await this.selectors(); - this.replaceEmptyCartContent(); - this.renderPrateleira(); - this.stampsHTML(); - this.developedByHTML(); - this.onUpdate(); + await this.stampsHTML(); + await this.developedByHTML(); + await this.onUpdate(); + await this.renderPrateleira(); + await this.replaceCartContent(); + // await this.replaceProfileContent(); } async selectors() { + console.log("iniciando 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.cartTitle = await waitElement("#cart-title"); this.checkoutVazio = await waitElement(".empty-cart-content"); - this.emptyCartTitle = await waitElement(".empty-cart-title"); - this.continueShopping = await waitElement("#cart-choose-products"); + this.cart = await waitElement(".cart"); + this.cartTitle = await waitElement("#cart-title"); this.frete = await waitElement(".shipping-date"); this.unidade = await waitElement(".product-price"); - this.iconMinus = await waitElement(".icon-minus-sign"); - this.iconPlus = await waitElement(".icon-plus-sign"); + + this.prateleira = await waitElement(".footerCheckout__prateleira"); - this.naoSeiMeuCep = await waitElement(".ship-postalCode"); + // this.prateleiraSlick = await waitElement(".prateleira__carousel") } - replaceEmptyCartContent() { - if (this.checkoutVazio) { - console.log("entrou no if do replaceContent()") - this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; - this.continueShopping.textContent = "Continuar comprando"; - this.frete.textContent = "Frete"; - this.unidade.textContent = "Unidade"; - this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal"; + async replaceCartContent() { + console.log("entrou no replaceCart") + if(this.cart) { + console.log("entrou no if do replaceCart()") + console.log(this.cart) + this.frete.textContent = "Frete"; + console.log(this.frete) + this.unidade.textContent = "Unidade"; + console.log(this.unidade) } } - onUpdate() { + // async replaceProfileContent() { + // if(this.identificacao) { + + // } + // const identificacao = await waitElement(".accordion-heading"); + // if(identificacao) { + // console.log("entrou no if identificacao") + + // identificacao.children[0].children[1].textContent = "Identificação"; + // console.log(identificacao) + // } + // } + + async onUpdate() { + console.log("chamada do 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 @@ -52,20 +68,27 @@ export default class Footer { let target = this.checkoutVazio; let config = { attributes: true }; - // this.cartTitle.style.display = "none"; - // this.prateleira.style.display = "none"; + if(this.checkoutVazio.style.display == "block") { + console.log("Carrinho está vazio ou não está no #/cart") + this.cartTitle.style.display = "none"; + this.prateleira.style.display = "none"; + + } else { + console.log("Carrinho NÃO está vazio e está no #/cart"); + this.cartTitle.style.display = "block"; + this.prateleira.style.display = "block"; + } let observer = new MutationObserver((mutations) => { mutations.forEach(() => { if(this.checkoutVazio.style.display == "block") { - console.log("Carrinho está vazio") + console.log("Carrinho está vazio ou não está no #/cart") this.cartTitle.style.display = "none"; this.prateleira.style.display = "none"; } else { - - console.log("Carrinho NÃO está vazio"); + console.log("Carrinho NÃO está vazio e está no #/cart"); this.cartTitle.style.display = "block"; this.prateleira.style.display = "block"; } @@ -74,6 +97,18 @@ export default class Footer { observer.observe(target, config); } + + window.addEventListener("hashchange", () => { + + if (window.location.hash == "#/cart") { + this.cartTitle.style.display = "none"; + this.prateleira.style.display = "block"; + // this.renderPrateleira(); + } else { + this.cartTitle.style.display = "block"; + this.prateleira.style.display = "none"; + } + }) } async renderPrateleira() { @@ -141,11 +176,15 @@ export default class Footer { this.prateleira.appendChild(prateleiraSlick); prateleiraSlick.innerHTML = cardsStructure; - if(window.innerWidth > 1024) { + // if(window.innerWidth > 1024) { this.addCarrossel(prateleiraSlick); - } + // } } } + + // else { + // this.prateleira.style.display = none; + // } } async addCarrossel(element) { @@ -154,11 +193,27 @@ export default class Footer { $(element).slick({ slidesToShow: 4, slidesToScroll: 1, - infinite: false + infinite: false, + responsive: [ + { + breakpoint: 1025, + settings: { + slidesToShow: 3, + } + }, + { + breakpoint: 768, + settings: { + slidesToShow: 2, + } + } + ] }); } async stampsHTML() { + console.log("entrou no stamps") + const stamps = await waitElement('.footerCheckout__stamps'); // console.log(stamps.children[0], stamps.children[2]); @@ -204,6 +259,8 @@ export default class Footer { } async developedByHTML() { + console.log("entrou no developedBy") + const developedBy = await waitElement('.footerCheckout__developedBy'); // console.log(developedBy.children[0].children[0]); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index fbea03f..466e0ac 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -7,18 +7,22 @@ export default class Header { } async init() { + console.log("entrou no init do header") await this.selectors(); - this.progressBarStructure(); + await this.progressBarStructure(); await this.progressBarMove(); } async selectors() { // this.header = await waitElement(".headerCheckout"); this.progressBar = await waitElement("#progressBar"); + console.log("progressBar await element") } - progressBarStructure() { + async progressBarStructure() { if (this.progressBar && window.innerWidth > 1024) { + console.log("entrou no if do progressBarStructure") + this.progressBar.innerHTML = `