From ebd0c95a9f8f1c1a898cf71f554e47c985e359d7 Mon Sep 17 00:00:00 2001 From: Andrea Matsunaga Date: Sat, 10 Dec 2022 23:27:20 -0300 Subject: [PATCH] Adiciona o minicart --- src/arquivos/js/app/app.js | 2 +- src/arquivos/js/app/components/Minicart.js | 32 +++++-- src/arquivos/sass/components/_mini-cart.scss | 91 +++++++++++++++---- src/arquivos/sass/partials/_header.scss | 40 -------- .../sub-templates/andrea-header.html | 12 ++- 5 files changed, 106 insertions(+), 71 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..b9f0f24 100644 --- a/src/arquivos/js/app/components/Minicart.js +++ b/src/arquivos/js/app/components/Minicart.js @@ -20,11 +20,8 @@ export default class Minicart {
-
- Total de 0 itens -
- Subtotal: R$00,00 + TOTAL: R$00,00
+ // 1 + // + //
+ // + //
+ // + //
+ // + // + $(".mini-cart-container .product-list").append(orderItem); } @@ -291,7 +311,7 @@ export default class Minicart { this.createMiniCartStructure(element); this.configureEvents( - "header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart" + ".minicart__button" ); } } diff --git a/src/arquivos/sass/components/_mini-cart.scss b/src/arquivos/sass/components/_mini-cart.scss index 3dc0d1b..2e712f8 100644 --- a/src/arquivos/sass/components/_mini-cart.scss +++ b/src/arquivos/sass/components/_mini-cart.scss @@ -1,21 +1,65 @@ -.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; + &__button { + position: relative; + padding: 0; + border: 0; + outline: 0; + background: transparent; + cursor: pointer; - @include mq(md, max) { - bottom: 0; - height: 100%; - left: 0; - position: fixed; - top: 0; + .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%; + line-height: 11px; + font-size: 9px; + font-weight: bold; + font-style: normal; + color: $white-500; + background-color: $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 +424,7 @@ } .finish-order { - background-color: $color-green; + background-color: $black-500; color: $color-white; display: block; font-weight: 700; @@ -392,12 +436,19 @@ width: 100%; &:hover { - background-color: lighten($color-green, 2.5); + background-color: lighten($black-500, 2.5); } &:active { - background-color: darken($color-green, 10); + background-color: darken($black-500, 10); } } } + + + &.has-item { + .totals-container { + display: block; + } + } } diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index c5803fe..7c57dc4 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -72,46 +72,6 @@ } } } - - &__minicart-button { - position: relative; - padding: 0; - border: 0; - outline: 0; - background: transparent; - - .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%; - line-height: 11px; - font-size: 9px; - font-weight: bold; - font-style: normal; - color: $white-500; - background-color: $blue-500; - } - } } &__search-box { diff --git a/src/template-pagina/sub-templates/andrea-header.html b/src/template-pagina/sub-templates/andrea-header.html index 14b5038..4ae0a80 100644 --- a/src/template-pagina/sub-templates/andrea-header.html +++ b/src/template-pagina/sub-templates/andrea-header.html @@ -23,10 +23,14 @@ - +
+ + +
+