From 5b91f096ba0d8a305dae3ecb66dbe11a2e1b0562 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 16 Feb 2021 18:44:47 +0100 Subject: [PATCH 1/4] Add unit price information into the cart - .total-price element must be a div (display: block) to be text right aligned (and not being float: right) - use .option-text to display a grey text - use display: flex to display question mark icon and text information --- app/assets/stylesheets/darkswarm/cart-dropdown.scss | 9 ++++++++- app/views/shared/menu/_cart_sidebar.html.haml | 10 +++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/cart-dropdown.scss b/app/assets/stylesheets/darkswarm/cart-dropdown.scss index ca3dd6a1a2..8584e3fa44 100644 --- a/app/assets/stylesheets/darkswarm/cart-dropdown.scss +++ b/app/assets/stylesheets/darkswarm/cart-dropdown.scss @@ -52,6 +52,12 @@ font-size: 1.5em; } } + + .unit-price { + justify-content: flex-end; + align-items: baseline; + } + } .go-shopping { @@ -82,7 +88,8 @@ padding: 0.5em 0 0.5em 1em; } - span { + span, + .total-price { color: $grey-800; font-size: 16px; line-height: 1.4em; diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 10bef792ab..3ddd4bd7a4 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -22,7 +22,15 @@ %td.text-right %span.quantity {{ line_item.quantity }} %td - %span.total-price.right {{ line_item.total_price | localizeCurrency }} + .total-price.text-right {{ line_item.total_price | localizeCurrency }} + .flex.unit-price + %div{:style => "margin-right: 5px"} + %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", + "question-mark-with-tooltip-append-to-body" => "true", + "question-mark-with-tooltip-placement" => "top", + "question-mark-with-tooltip-animation" => true} + .options-text + {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }} .cart-empty{"ng-show" => "Cart.line_items.length == 0"} %p From 5914e6c885c08d3b1ec148828b0f098905a76818 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 17 Feb 2021 14:42:50 +0100 Subject: [PATCH 2/4] Add a context to question mark icon with tooltip to display it adjusted - This behavior permit use to create custom CSS specifications to display this tooltip best fitted to the context. --- .../directives/question_mark_tooltip.js.coffee | 2 +- .../templates/question_mark_with_tooltip.html.haml | 2 +- .../stylesheets/darkswarm/question-mark-icon.scss | 10 ++++++++++ app/views/shared/menu/_cart_sidebar.html.haml | 3 ++- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee b/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee index b1693369af..e93a9779fe 100644 --- a/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee +++ b/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee @@ -3,7 +3,7 @@ Darkswarm.directive "questionMarkWithTooltip", ($tooltip)-> # Subsequently we patch the scope, template and restrictions tooltip = $tooltip 'questionMarkWithTooltip', 'questionMarkWithTooltip', 'click' tooltip.scope = - variant: "=" + context: "=" tooltip.templateUrl = "question_mark_with_tooltip_icon.html" tooltip.replace = true tooltip.restrict = 'E' diff --git a/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml index b96ce49b50..ea0ee22f6b 100644 --- a/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml +++ b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml @@ -1,4 +1,4 @@ -.joyride-tip-guide.question-mark-tooltip{ng: {class: "{ in: tt_isOpen, fade: tt_animation }", show: "tt_isOpen"}} +.joyride-tip-guide.question-mark-tooltip{class: "{{ context }}", ng: {class: "{ in: tt_isOpen, fade: tt_animation", show: "tt_isOpen"}} .background{ng: {click: "tt_isOpen = false"}} .joyride-content-wrapper {{ "js.shopfront.unit_price_tooltip" | t }} diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss index 25a4e59ca3..7c33a25d58 100644 --- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss +++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss @@ -56,4 +56,14 @@ left: 7.4rem; z-index: -1; } + + &.cart-sidebar { + // Small size (used in the cart sidebar) + width: 13rem; + margin-left: -10.4rem; + + .joyride-nub.bottom { + left: 10.4rem; + } + } } diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index 3ddd4bd7a4..a511faaffa 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -28,7 +28,8 @@ %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", "question-mark-with-tooltip-append-to-body" => "true", "question-mark-with-tooltip-placement" => "top", - "question-mark-with-tooltip-animation" => true} + "question-mark-with-tooltip-animation" => true, + context: "'cart-sidebar'"} .options-text {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }} From ee4943f6e21c6a07cf4d3ff3029b038eaf4eca9b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 18 Feb 2021 14:59:54 +0100 Subject: [PATCH 3/4] Display unit price on /cart page - Use a new class to specify css customization - Add to `line_item.rb` a fake method: `unit_price_price_and_unit` @andrewpbrett will change it with real values. - Add a new variable: $text-xs to specify small font-size squash "Display unit price on /cart page" --- app/assets/stylesheets/darkswarm/cart-page.scss | 6 ++++++ app/assets/stylesheets/darkswarm/variables.scss | 2 ++ app/models/spree/line_item.rb | 6 ++++++ app/views/spree/orders/_line_item.html.haml | 4 ++++ 4 files changed, 18 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/cart-page.scss b/app/assets/stylesheets/darkswarm/cart-page.scss index 7f715f4aab..5d0f833759 100644 --- a/app/assets/stylesheets/darkswarm/cart-page.scss +++ b/app/assets/stylesheets/darkswarm/cart-page.scss @@ -44,6 +44,12 @@ } } + .unit-price { + color: $grey-500; + font-size: $text-xs; + } + + input { &.ng-invalid-stock, &.ng-invalid-number { diff --git a/app/assets/stylesheets/darkswarm/variables.scss b/app/assets/stylesheets/darkswarm/variables.scss index b5039804e1..2a799ed935 100644 --- a/app/assets/stylesheets/darkswarm/variables.scss +++ b/app/assets/stylesheets/darkswarm/variables.scss @@ -45,3 +45,5 @@ $shop-sidebar-overlay: rgba(0, 0, 0, 0.5); $transition-sidebar: 250ms ease-in-out 0s; $padding-small: 0.5rem; + +$text-xs: 0.75rem; diff --git a/app/models/spree/line_item.rb b/app/models/spree/line_item.rb index c2da5814d6..0098c31a4a 100644 --- a/app/models/spree/line_item.rb +++ b/app/models/spree/line_item.rb @@ -219,6 +219,12 @@ module Spree final_weight_volume / quantity end + def unit_price_price_and_unit + price = Spree::Money.new((rand * 10).round(2), currency: currency) + unit = ["item", "kg"].sample + price.to_html + " / " + unit + end + def scoper @scoper ||= OpenFoodNetwork::ScopeVariantToHub.new(order.distributor) end diff --git a/app/views/spree/orders/_line_item.html.haml b/app/views/spree/orders/_line_item.html.haml index 19292cb219..6ac6c9a7ff 100644 --- a/app/views/spree/orders/_line_item.html.haml +++ b/app/views/spree/orders/_line_item.html.haml @@ -18,6 +18,10 @@ %td.text-right.cart-item-price{"data-hook" => "cart_item_price"} = line_item.single_display_amount_with_adjustments.to_html + - if feature? :unit_price, spree_current_user + %br + %span.unit-price + = line_item.unit_price_price_and_unit %td.text-center.cart-item-quantity{"data-hook" => "cart_item_quantity"} - finalized_quantity = @order.completed? ? line_item.quantity : 0 = item_form.number_field :quantity, From dd0ef0d59976dc856c3e3f6def1ba10e053c4d76 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 18 Feb 2021 15:05:40 +0100 Subject: [PATCH 4/4] Display unit price info if feature is enabled --- app/views/shared/menu/_cart_sidebar.html.haml | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/app/views/shared/menu/_cart_sidebar.html.haml b/app/views/shared/menu/_cart_sidebar.html.haml index a511faaffa..8a1561903c 100644 --- a/app/views/shared/menu/_cart_sidebar.html.haml +++ b/app/views/shared/menu/_cart_sidebar.html.haml @@ -23,15 +23,16 @@ %span.quantity {{ line_item.quantity }} %td .total-price.text-right {{ line_item.total_price | localizeCurrency }} - .flex.unit-price - %div{:style => "margin-right: 5px"} - %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", - "question-mark-with-tooltip-append-to-body" => "true", - "question-mark-with-tooltip-placement" => "top", - "question-mark-with-tooltip-animation" => true, - context: "'cart-sidebar'"} - .options-text - {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }} + - if feature? :unit_price, spree_current_user + .flex.unit-price + %div{:style => "margin-right: 5px"} + %question-mark-with-tooltip{"question-mark-with-tooltip" => "_", + "question-mark-with-tooltip-append-to-body" => "true", + "question-mark-with-tooltip-placement" => "top", + "question-mark-with-tooltip-animation" => true, + context: "'cart-sidebar'"} + .options-text + {{ line_item.variant.unit_price_price | localizeCurrency }} / {{ line_item.variant.unit_price_unit }} .cart-empty{"ng-show" => "Cart.line_items.length == 0"} %p