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
openfoodfoundation · Feb 16, 2021 · 037e9d6 · 037e9d6
1 parent 6a8d2c5
commit 037e9d6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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
@@ -219,6 +219,12 @@ def unit_value
       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
@@ -18,6 +18,9 @@
 
   %td.text-right.cart-item-price{"data-hook" => "cart_item_price"}
     = line_item.single_display_amount_with_adjustments.to_html
+    %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,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;