From 0080bdeb415841aec726daf507b0b70c9435a078 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Fri, 16 Dec 2022 01:00:00 -0300 Subject: [PATCH] =?UTF-8?q?feat(empty-cart):=20estiliza=20a=20p=C3=A1gina?= =?UTF-8?q?=20de=20carrinho=20vazio=20e=20adiciona=20MutationObserver?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 68 +++++++++++++------ .../sass/checkout/_checkout-vazio.scss | 57 ++++++++++------ .../src/arquivos/sass/partials/_footer.scss | 14 ++-- .../src/arquivos/sass/partials/_header.scss | 1 + .../src/arquivos/sass/utils/_variaveis.scss | 4 +- 5 files changed, 95 insertions(+), 49 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index bdd33c5..b4bd9d7 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -3,43 +3,71 @@ import { waitElement } from "m3-utils"; export default class Footer { constructor() { this.init(); - this.stampsHTML(); - this.developedByHTML(); } async init() { await this.selectors(); - // this.onUpdate(); + this.replaceEmptyCartContent(); + this.stampsHTML(); + this.developedByHTML(); + this.onUpdate(); } async 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.prateleira = await waitElement(".footerCheckout__prateleira"); + } + + replaceEmptyCartContent() { + if (this.checkoutVazio) { + this.emptyCartTitle.textContent = "Seu Carrinho está vazio"; + this.continueShopping.textContent = "Continuar comprando"; + } } 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); + if(this.checkoutVazio) { + let target = this.checkoutVazio; + let config = { attributes: true }; + + this.cartTitle.style.display = "none"; + this.prateleira.style.display = "none"; + + let observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + console.log("mutation type: ", mutation.typ) + console.log("rolou mutation") + if(this.checkoutVazio.style.display == "block") { + console.log("Carrinho está vazio") + this.cartTitle.style.display = "none"; + this.prateleira.style.display = "none"; + } else { + console.log("Carrinho NÃO está vazio"); + this.cartTitle.style.display = "block"; + this.prateleira.style.display = "block"; + } + }); }); - }); - observer.observe(target, config); + observer.observe(target, config); + } } - async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ - slidesToShow: 4, - slidesToScroll: 1, - }); - } + // async addCarrossel() { + // const elemento = await waitElement("#my-element"); + // $(elemento).slick({ + // slidesToShow: 4, + // slidesToScroll: 1, + // }); + // } async stampsHTML() { const stamps = await waitElement('.footerCheckout__stamps'); @@ -89,7 +117,7 @@ export default class Footer { async developedByHTML() { const developedBy = await waitElement('.footerCheckout__developedBy'); - console.log(developedBy.children[0].children[0]); + // console.log(developedBy.children[0].children[0]); const vtexIcon = ` Powered By @@ -104,8 +132,8 @@ export default class Footer { developedBy.children[0].children[0].innerHTML = vtexIcon; developedBy.children[1].children[0].innerHTML = m3Icon; - developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link') - developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link') + // developedBy.children[0].children[0].addClass('footerCheckout__developedBy__link') + // developedBy.children[1].children[0].addClass('footerCheckout__developedBy__link') } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index c6d8e28..35360d4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,38 +1,53 @@ .empty-cart { - font-family: $font-family; - &-content { - color: $black-300; - text-align: center; + + &-content { + margin: 170px 0 262px; + text-align: center; + text-transform: uppercase; @include mq(md, max) { - padding: 0 16px; + padding: 0 16px; } } &-title { - font-size: 20px; + margin: 0 0 32px; + line-height: 33px; + font-family: $font-family; + font-size: 24px; + color: $black-500; } + &-message { + display: none; + } + &-links { - .link-choose-products { - background: $black-300; - border: none; - border-radius: 5px; + width: 325px; + height: 46px; + margin: 0 auto; + border: 1px solid $black-500; + + .link-choose-products { + padding: 0; + line-height: 16px; + font-family: $font-family-secundary; + font-size: 14px; + border: none; + border-radius: 0; + color: $black-500; + background: $color-white; transition: ease-in 0.22s all; - outline: none; - font-family: $font-family; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-white; - text-transform: uppercase; + + box-shadow: none; + + // outline: none; + // letter-spacing: 0.05em; &:hover { - background: lighten($black-300, 5); + background: lighten($blue-300, 5); } + } } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index ff0002d..1b1c50e 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,20 +1,20 @@ /* _footer.scss */ .footerCheckout { width: 100%; - position: fixed; - bottom: 0; display: flex; flex-direction: column; + gap: 54px; // background: cyan; // border-top: none; // color: $color-gray2; - // &__prateleira { - // height: 100px; - // background-color: green; - // width: 100%; - // } + &__prateleira { + // margin-top: 101px; + height: 448px; + background-color: green; + width: 100%; + } &__wrapper { margin: 0; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index fc9d501..7820251 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -3,6 +3,7 @@ // position: relative; margin: 0; padding: 30px 131px; + width: 100%; border-bottom: 1px solid $black-500; .container { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 791e94c..1881bf7 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -10,13 +10,15 @@ $black-500: #000000; $color-white: #fff; +$color-gray-rename: #c4c4c4; +$blue-300: #00C8FF; + $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; -$color-gray-rename: #c4c4c4; $color-blue: #4267b2;