From 475fdadb93c9da3081baeba11a9b7d6a53dff28f Mon Sep 17 00:00:00 2001 From: matheus Date: Fri, 16 Dec 2022 12:02:00 -0300 Subject: [PATCH 1/5] feat(checkout, footer): coupon css, footer onUpdate --- checkout/src/arquivos/js/components/Footer.js | 16 +- checkout/src/arquivos/js/components/Header.js | 4 +- .../sass/checkout/_checkout-carrinho.scss | 212 ++++++++---------- 3 files changed, 107 insertions(+), 125 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 0648800..a2b0ade 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -19,13 +19,18 @@ export default class Footer { //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.checkoutVazio = await waitElement(".empty-cart-content"); + this.cartTitulo = await waitElement("#cart-title"); + this.titleSlick = await waitElement(".transactions-container"); + this.list = await waitElement(".footerCheckout__prateleira", { timeout: 5000, interval: 1000, }); + this.payments = await waitElement(".footerCheckout__payments"); this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.cartTitle = await waitElement("#cart-title"); } fetchApiData() { @@ -47,7 +52,6 @@ export default class Footer { data.map((item) => { let colors = ""; for (let i = 0; i < item.items.length; i++) { - console.log(colors); colors += `

${item.items[i].name}

`; } const li = document.createElement("li"); @@ -186,10 +190,14 @@ export default class Footer { // 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 lista = this.list; + let cartTitle = this.cartTitulo; + let slickTitle = this.titleSlick; + if (target.style.display == "none" && window.location.hash == "#/cart") { lista.style.display = "block"; this.fetchApiData(); } else { + this.cartTitulo.style.display = "none"; lista.style.display = "none"; } let config = { childList: true, attributes: true }; @@ -200,7 +208,11 @@ export default class Footer { mutations.forEach(function (mutation) { if (target.style.display != "none") { lista.style.display = "none"; - } else lista.style.display = "block"; + cartTitle.style.display = "none"; + } else { + cartTitle.style.display = "block"; + lista.style.display = "block"; + } }); }); diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index ad07941..94337c1 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -20,7 +20,7 @@ export default class Header { if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = `