raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add new template to manage variant

Browse Source 
- The aim of this template is to display unit price
 - Duplicate the angular directive
 - Add a question mark icon and its own file
 - Add some needed colors in the branding file
This commit is contained in:
Jean-Baptiste Bellet
2021-02-12 17:14:30 +01:00
parent 8c42388af1
commit 7442d06bed
6 changed files with 58 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/darkswarm/directives/shop_variant_with_unit_price.js.coffee Normal file
View File

@@ -0,0 +1,7 @@
Darkswarm.directive "shopVariantWithUnitPrice", ->
restrict: 'E'
replace: true
templateUrl: 'shop_variant_with_unit_price.html'
scope:
variant: '='
controller: 'ShopVariantCtrl'

19
app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml Normal file
View File

@@ -0,0 +1,19 @@
.variants.row
.small-4.medium-4.large-5.columns.variant-name
.inline{"ng-if" => "::variant.display_name"} {{ ::variant.display_name }}
.variant-unit {{ ::variant.unit_to_display }}
.small-3.medium-3.large-2.columns.variant-price
%price-breakdown{"price-breakdown" => "_", variant: "variant",
"price-breakdown-append-to-body" => "true",
"price-breakdown-placement" => "bottom",
"price-breakdown-animation" => true}
{{ variant.price_with_fees | localizeCurrency }}
.variant-unit-price
%span.question-mark-icon
{{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
.medium-2.large-2.columns.total-price
%span{"ng-class" => "{filled: variant.line_item.total_price}"}
{{ variant.line_item.total_price | localizeCurrency }}
%ng-include{src: "'partials/shop_variant_no_group_buy.html'"}
%ng-include{src: "'partials/shop_variant_with_group_buy.html'"}

6
app/assets/stylesheets/darkswarm/_shop-product-rows.scss
View File

@@ -65,6 +65,12 @@
}
}
.variant-unit-price {
color: $grey-700;
font-size: 0.9rem;
margin-top: 15px;
}
// Total price
.total-price {
padding-left: 0rem;

4
app/assets/stylesheets/darkswarm/branding.scss
View File

@@ -42,8 +42,10 @@ $black: #000;
$white: #fff;
$grey-050: #f7f7f7;
$grey-075: #f3f8fc;
$grey-100: #e6e6e6;
$grey-200: #ddd;
$grey-250: #cfe1f3;
$grey-300: #ccc;
$grey-400: #bbb;
$grey-500: #999;
@@ -53,6 +55,8 @@ $grey-650: #666;
$grey-700: #555;
$grey-800: #333;
$tiny-blue: #80b2e1;
$teal-300: #80d3df;
$teal-400: #4cb5c5;
$teal-500: #0096ad;

18
app/assets/stylesheets/darkswarm/question-mark-icon.scss Normal file
View File

@@ -0,0 +1,18 @@
.question-mark-icon {
position: relative;
top: 1px;
&::before {
content: "?";
padding-left: 1px;
display: inline-block;
color: $tiny-blue;
border: 1px solid $grey-250;
border-radius: 50%;
text-align: center;
background-color: $grey-075;
width: 18px;
height: 18px;
font-weight: bold;
font-size: 1rem;
}
}

6
app/views/shop/products/_form.html.haml
View File

@@ -13,8 +13,10 @@
%product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
= render "shop/products/summary"
.shop-variants
%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}"}
- 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}"}
- 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"}
.summary
.small-12.columns.text-center