Merge pull request #6905 from jibees/6498-show-unit-price-in-checkout

Show unit price in checkout process (both cart page and cart sidebar)

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'

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 }}

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;

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 {

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;
+    }
+  }
 }

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;

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

app/views/shared/menu/_cart_sidebar.html.haml

@@ -22,7 +22,17 @@
           %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 }}
+            - 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

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,