From 6b82cc5fe7fb8d2675ea3387fcda061b11ae39f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cain=C3=A3=20Milech?= Date: Wed, 7 Dec 2022 19:20:11 -0300 Subject: [PATCH] feat: adiciona o minicart --- src/arquivos/js/app/app.js | 2 +- src/arquivos/js/app/components/Minicart.js | 14 +-- src/arquivos/js/app/partials/Menu.js | 6 +- src/arquivos/sass/components/_mini-cart.scss | 91 +++++++++++++++---- src/arquivos/sass/partials/_header.scss | 44 +-------- .../sub-templates/caina-header.html | 14 ++- 6 files changed, 98 insertions(+), 73 deletions(-) diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js index 0fef959..a04444f 100644 --- a/src/arquivos/js/app/app.js +++ b/src/arquivos/js/app/app.js @@ -64,7 +64,7 @@ const app = new Container({ ], }); -app.bind(Minicart.name, ".carrinho .mini-cart"); +app.bind(Minicart.name, ".minicart__drawer"); app.bind(Newsletter.name, { elemento: ".news-form", textButtom: "Cadastre-se", diff --git a/src/arquivos/js/app/components/Minicart.js b/src/arquivos/js/app/components/Minicart.js index f45f291..50d1c0c 100644 --- a/src/arquivos/js/app/components/Minicart.js +++ b/src/arquivos/js/app/components/Minicart.js @@ -16,7 +16,9 @@ export default class Minicart {
- +
@@ -57,7 +59,7 @@ export default class Minicart {
  • - ${ + <img src= @@ -115,10 +117,10 @@ export default class Minicart { orderItems(items); $(".mini-cart-container").addClass("have-item"); } else { - emptyMessage(); + //emptyMessage(); } } catch (e) { - emptyMessage(); + //emptyMessage(); console.warn("couldnt list items. " + e.message); } } @@ -290,8 +292,6 @@ export default class Minicart { } this.createMiniCartStructure(element); - this.configureEvents( - "header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart" - ); + this.configureEvents(".minicart__button"); } } diff --git a/src/arquivos/js/app/partials/Menu.js b/src/arquivos/js/app/partials/Menu.js index 5199aff..1d34fca 100644 --- a/src/arquivos/js/app/partials/Menu.js +++ b/src/arquivos/js/app/partials/Menu.js @@ -37,7 +37,11 @@ export default class Menu { event.preventDefault(); //nao adicionar nada na url por ex # const link = $(event.target); //para saber qual link foi clicado - link.siblings(".submenu").addClass("is-open"); //pegar o irmao + link.parents(".main-menu__department") + .find(".submenu") + .addClass("is-open"); //pega o pai, acha o filho submenu, mesmo clicando no icone + //link.siblings(".submenu").addClass("is-open"); //pegar o irmao , POREM DESSE JEITO NAO PEGA NO ICONE + //mas a solucao poderia ser apenas colocar um point events none no icone, la no css } closeSubmenu(event) { diff --git a/src/arquivos/sass/components/_mini-cart.scss b/src/arquivos/sass/components/_mini-cart.scss index ee1757f..f93b3dc 100644 --- a/src/arquivos/sass/components/_mini-cart.scss +++ b/src/arquivos/sass/components/_mini-cart.scss @@ -1,21 +1,66 @@ -.mini-cart { - height: 475px; - max-height: 200px; - opacity: 0; - position: absolute; - right: 0px; - top: 50px; - transition: all 0.3s ease-in-out; - visibility: hidden; - width: 375px; - z-index: 16; +.minicart { + position: relative; - @include mq(md, max) { - bottom: 0; - height: 100%; - left: 0; - position: fixed; - top: 0; + &__button { + position: relative; + padding: 0; + border: 0; + outline: 0; + background: transparent; + cursor: pointer; + + .portal-totalizers-ref { + .title, + .amount-products, + .amount-items strong, + .amount-kits, + .total-cart { + display: none; + } + } + + .cart-info { + margin: 0; + } + + .amount-items-em { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 4px; + right: -4px; + width: 15px; + height: 15px; + border-radius: 50%; + font-style: normal; + font-weight: 700; + font-size: 9px; + line-height: 11px; + color: $white-500; + background: $blue-500; + } + } + + &__drawer { + height: 475px; + max-height: 200px; + opacity: 0; + position: absolute; + right: 0px; + top: 80px; + transition: all 0.3s ease-in-out; + visibility: hidden; + width: 375px; + z-index: 16; + + @include mq(md, max) { + bottom: 0; + height: 100%; + left: 0; + position: fixed; + top: 0; + } } } @@ -380,7 +425,7 @@ } .finish-order { - background-color: #2fab61; + background-color: $black-500; color: #fff; display: block; font-weight: 700; @@ -392,12 +437,18 @@ width: 100%; &:hover { - background-color: lighten(#2fab61, 2.5); + background-color: lighten($black-500, 2.5); } &:active { - background-color: darken(#2fab61, 10); + background-color: darken($black-500, 10); } } } + + &.have-item { + .totals-container { + display: block; + } + } } diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index 20d1699..37a8c1a 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -26,45 +26,6 @@ } } - .busca { - display: flex; - align-items: center; - - margin: 0; - - legend, - label, - select { - display: none; - } - - .fulltext-search-box { - flex: 1; - height: 23px; - padding: 0; - border: 0; - background: transparent; - outline: 0; - color: $white-500; - font-size: 10px; - line-height: 12px; - } - - .btn-buscar { - width: 23px; - height: 23px; - padding: 0; - border: 0; - outline: 0; - font-size: 0; - background-color: transparent; - - /*quando ja tem estrutuura, e temos que substituir*/ - @extend .sprite; - @extend .sprite-search-icon; - } - } - .user-items { display: flex; align-items: center; @@ -107,13 +68,16 @@ } } } + } - &__minicart-button { + .minicart { + &__button { position: relative; padding: 0; border: 0; outline: 0; background: transparent; + cursor: pointer; .portal-totalizers-ref { .title, diff --git a/src/template-pagina/sub-templates/caina-header.html b/src/template-pagina/sub-templates/caina-header.html index e9e0383..fa3db4d 100644 --- a/src/template-pagina/sub-templates/caina-header.html +++ b/src/template-pagina/sub-templates/caina-header.html @@ -25,10 +25,16 @@ - +
    + + +
    +
    + +