diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index f5bc92d..665d0c2 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,10 +8,8 @@ export default class Footer { async init() { await this.selectors(); await this.carrinho(); - this.requestApi(); - this.addCarrossel(); - - // this.onUpdate(); + this.prateleira(); + this.onUpdate(); } async selectors() { @@ -27,15 +25,32 @@ export default class Footer { this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); } + async prateleira() { + if (this.checkoutVazio.style.display == "none") { + this.requestApi(); + this.addCarrossel(); + window.addEventListener("hashchange", () => { + if (window.location.hash !== "#/cart") { + this.removePrateleira(); + } + if (window.location.hash == "#/cart") { + this.requestApi(); + this.addCarrossel(); + } + }); + } + } + + async removePrateleira() { + let prateleira = this.footerPrateleira; + prateleira.innerHTML = ``; + } + async requestApi() { let prateleira = this.footerPrateleira; prateleira.innerHTML = `

Você também pode gostar:

`; - /*let prateleira = `

TESTE

- `; - this.footerPrateleira.innerHTML = prateleira;*/ - const url = `https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319`; fetch(url) .then((response) => { @@ -62,7 +77,8 @@ export default class Footer { } async addCarrossel() { - const prateleira = await waitElement(".carrosel-items"); + const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); + if (window.screen.width > 1024) { $(prateleira).slick({ slidesToShow: 4, @@ -73,25 +89,32 @@ export default class Footer { } } - carrinho() { - this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; - this.continuarCompra.innerHTML = `continuar comprando`; - this.frete.innerHTML = `Frete`; - this.unidade.innerHTML = `Unidade`; - } - - onUpdate() { + async 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 config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); + mutations.map((mutation) => { + const display = mutation.target.attributes.style.nodeValue; + console.log(mutation); + + if (display == "display: none;") { + this.prateleira(); + } else if (display == "display: block;") { + this.removePrateleira(); + } }); }); observer.observe(target, config); } + + carrinho() { + this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; + this.continuarCompra.innerHTML = `continuar comprando`; + this.frete.innerHTML = `Frete`; + this.unidade.innerHTML = `Unidade`; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 94b4110..211fbbf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -529,7 +529,9 @@ h1#orderform-title { } } + /*PAGAMENTO*/ .payment-data { + /*ICONE DE EDITAR CAIXA*/ .payment-edit-link { display: flex !important; margin-left: auto; @@ -551,21 +553,6 @@ h1#orderform-title { } } } - /*position: relative; - .accordion-group { - &::before { - content: ""; - display: flex; - width: 20.26px; - height: 20.89px; - background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") - no-repeat center center; - background-size: contain; - cursor: pointer; - position: absolute; - left: 90%; - } - }*/ } .box-client-info-pj {