Merge pull request #7428 from jibees/7426-show-unit-price-in-the-bulk-modal

Show unit price in the bulk buy modal

app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee

@@ -4,4 +4,5 @@ Darkswarm.directive "shopVariantWithUnitPrice", ->
   templateUrl: 'shop_variant_with_unit_price.html'
   scope:
     variant: '='
+    show_unit_price: '=showunitprice'
   controller: 'ShopVariantCtrl'

app/assets/javascripts/templates/bulk_buy_modal.html.haml

@@ -2,12 +2,21 @@
   .columns.small-12
     %h3{"ng-bind" => "::variant.extended_name"}
 
-.row.variant-bulk-buy-price-summary
-  .columns.small-6
-    .variant-unit {{ ::variant.unit_to_display }}
-  .columns.small-6
+.flex.variant-bulk-buy-price-summary{style: "justify-content: space-around;"}
+  .variant-unit
+    {{ ::variant.unit_to_display }}
+  .div
     {{ variant.line_item.total_price | localizeCurrency }}
 
+  .unit-price{"ng-if": "show_unit_price"}
+    %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,
+    style: "margin-right: 5px",
+    key: "'js.shopfront.unit_price_tooltip'"} 
+    {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
+
 .row
   .columns.small-12.medium-6
     .variant-bulk-buy-quantity-label

app/assets/stylesheets/shared/question-mark-icon.scss

@@ -37,8 +37,6 @@
       content: "";
       color: $white;
       vertical-align: super;
-      position: relative;
-      top: 2px;
     }
   }
 }
@@ -58,6 +56,7 @@
   margin-left: -7.4rem;
   margin-top: -0.1rem;
   background-color: transparent;
+  z-index: $modal-zIndex + 1;
 
   .background {
     position: fixed;

app/assets/stylesheets/shared/variables/variables.scss

@@ -4,6 +4,9 @@ $white: #fff;
 $dynamic-blue: #3d8dd1;
 $teal-500: #0096ad;
 
+/* Defined in foundation-rails components/_reveal.scss */
+$modal-zIndex: 1005;
+
 @font-face {
 	font-family: 'OFN';
 	src: font-url('OFN-v2.eot');
@@ -22,4 +25,4 @@ $teal-500: #0096ad;
   font-style: normal;
   font-variant: normal;
   text-transform: none;
-}
+}

app/views/shop/products/_form.html.haml

@@ -14,7 +14,7 @@
                 = render "shop/products/summary"
                 .shop-variants
                   - if feature? :unit_price, spree_current_user
-                    %shop-variant-with-unit-price{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
+                    %shop-variant-with-unit-price{showunitprice: 'true', variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
                   - else
                     %shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
               %product{"ng-show" => "Products.loading"}