Skip to content

Commit 9859e3e

Browse files
sunblazesunblaze
committed
Add unit price display component for variants
This improved handling allows for languages to customize the format and also display and handle the unit being generic and not unit based in the case of item/count Also includes: - Removes whitespace around the / (eg. $1/g) - Removes styling that capitalizes the unit (eg. $1/G) - Update 4 translation files
1 parent f2cc05a commit 9859e3e

File tree

8 files changed

+284
-19
lines changed

8 files changed

+284
-19
lines changed

‎assets/component-price.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,5 @@
9696
letter-spacing: 0.04rem;
9797
line-height: calc(1 + 0.2 / var(--font-body-scale));
9898
margin-top: 0.2rem;
99-
text-transform: uppercase;
10099
color: rgba(var(--color-foreground), 0.7);
101100
}

‎locales/en.default.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,47 @@
164164
"sale_price": "Sale price",
165165
"unit_price": "Unit price"
166166
},
167+
"unit_price": {
168+
"per_item": {
169+
"single": "{{price}} each",
170+
"one": "{{price}} per {{count}} item",
171+
"other": "{{price}} per {{count}} items"
172+
},
173+
"per_unit": {
174+
"single": "{{price}}/{{unit}}",
175+
"one": "{{price}}/{{unit}}",
176+
"other": "{{price}}/{{count}}{{unit}}"
177+
},
178+
"per_unit_accessibility": {
179+
"single": "{{price}} per {{unit}}",
180+
"one": "{{price}} per {{unit}}",
181+
"other": "{{price}} per {{count}}{{unit}}"
182+
},
183+
"unit": {
184+
"mg": "mg",
185+
"g": "g",
186+
"kg": "kg",
187+
"ml": "ml",
188+
"cl": "cl",
189+
"l": "L",
190+
"m3": "m³",
191+
"mm": "mm",
192+
"cm": "cm",
193+
"m": "m",
194+
"m2": "m²",
195+
"oz": "oz",
196+
"lb": "lb",
197+
"floz": "fl oz",
198+
"pt": "pt",
199+
"qt": "qt",
200+
"gal": "gal",
201+
"in": "in",
202+
"ft": "ft",
203+
"yd": "yd",
204+
"ft2": "ft²",
205+
"item": "item"
206+
}
207+
},
167208
"share": "Share this product",
168209
"sold_out": "Sold out",
169210
"unavailable": "Unavailable",

‎locales/hu.json

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,48 @@
177177
},
178178
"taxes_included": "Tartalmazza az adókat.",
179179
"duties_included": "Tartalmazza a vámokat.",
180-
"duties_and_taxes_included": "Tartalmazza a vámokat és az adókat."
180+
"duties_and_taxes_included": "Tartalmazza a vámokat és az adókat.",
181+
"unit_price": {
182+
"per_item": {
183+
"single": "{{price}} termékenként",
184+
"one": "{{price}}/{{count}} termék",
185+
"other": "{{price}}/{{count}} termék"
186+
},
187+
"unit": {
188+
"mg": "mg",
189+
"g": "g",
190+
"kg": "kg",
191+
"ml": "ml",
192+
"cl": "cl",
193+
"l": "l",
194+
"m3": "m³",
195+
"mm": "mm",
196+
"cm": "cm",
197+
"m": "m",
198+
"m2": "m²",
199+
"oz": "oz",
200+
"lb": "lb",
201+
"floz": "fl oz",
202+
"pt": "pt",
203+
"qt": "qt",
204+
"gal": "gal",
205+
"in": "in",
206+
"ft": "ft",
207+
"yd": "yd",
208+
"ft2": "ft²",
209+
"item": "termék"
210+
},
211+
"per_unit": {
212+
"single": "{{price}}/{{unit}}",
213+
"one": "{{price}}/{{unit}}",
214+
"other": "{{price}}/{{count}} {{unit}}"
215+
},
216+
"per_unit_accessibility": {
217+
"single": "{{price}}/{{unit}}",
218+
"one": "{{price}}/{{unit}}",
219+
"other": "{{price}}/{{count}} {{unit}}"
220+
}
221+
}
181222
},
182223
"modal": {
183224
"label": "Médiatár"

‎locales/lt.json

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,54 @@
179179
},
180180
"taxes_included": "Mokesčiai įtraukti.",
181181
"duties_included": "Muito mokesčiai įtraukti.",
182-
"duties_and_taxes_included": "Muito ir kiti mokesčiai įtraukti."
182+
"duties_and_taxes_included": "Muito ir kiti mokesčiai įtraukti.",
183+
"unit_price": {
184+
"per_item": {
185+
"single": "{{price}} už kiekvieną",
186+
"one": "{{price}} už {{count}} prekę",
187+
"other": "{{price}} už {{count}} prekę (-es/-ių)",
188+
"few": "{{price}} už {{count}} prekę (-es/-ių)",
189+
"many": "{{price}} už {{count}} prekę (-es/-ių)"
190+
},
191+
"unit": {
192+
"mg": "mg",
193+
"g": "g",
194+
"kg": "kg",
195+
"ml": "ml",
196+
"cl": "cl",
197+
"l": "l",
198+
"m3": "m³",
199+
"mm": "mm",
200+
"cm": "cm",
201+
"m": "m",
202+
"m2": "m²",
203+
"oz": "unc.",
204+
"lb": "sv.",
205+
"floz": "sk. unc.",
206+
"pt": "pint.",
207+
"qt": "kvart.",
208+
"gal": "gal.",
209+
"in": "col.",
210+
"ft": "pėd.",
211+
"yd": "jard.",
212+
"ft2": "pėd.²",
213+
"item": "prekė"
214+
},
215+
"per_unit": {
216+
"single": "{{price}}/{{unit}}",
217+
"one": "{{price}}/{{unit}}",
218+
"other": "{{price}}/{{count}} {{unit}}",
219+
"few": "{{price}}/{{count}} {{unit}}",
220+
"many": "{{price}}/{{count}} {{unit}}"
221+
},
222+
"per_unit_accessibility": {
223+
"single": "{{price}} už {{unit}}",
224+
"one": "{{price}} už {{unit}}",
225+
"other": "{{price}} už {{count}} {{unit}}",
226+
"few": "{{price}} už {{count}} {{unit}}",
227+
"many": "{{price}} už {{count}} {{unit}}"
228+
}
229+
}
183230
},
184231
"modal": {
185232
"label": "Medijų galerija"

‎locales/nb.json

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,48 @@
177177
"product_variants": "Produktvarianter",
178178
"taxes_included": "Inkludert avgifter.",
179179
"duties_included": "Inkluder tollplikter.",
180-
"duties_and_taxes_included": "Inkludert tollplikter og avgifter."
180+
"duties_and_taxes_included": "Inkludert tollplikter og avgifter.",
181+
"unit_price": {
182+
"per_item": {
183+
"single": "{{price}} hver",
184+
"one": "{{price}} per {{count}} vare",
185+
"other": "{{price}} per {{count}} varer"
186+
},
187+
"unit": {
188+
"mg": "mg",
189+
"g": "g",
190+
"kg": "kg",
191+
"ml": "ml",
192+
"cl": "cl",
193+
"l": "L",
194+
"m3": "m³",
195+
"mm": "mm",
196+
"cm": "cm",
197+
"m": "m",
198+
"m2": "m²",
199+
"oz": "oz",
200+
"lb": "lb",
201+
"floz": "fl oz",
202+
"pt": "pt",
203+
"qt": "qt",
204+
"gal": "gal",
205+
"in": "tommer",
206+
"ft": "fot",
207+
"yd": "yard",
208+
"ft2": "fot²",
209+
"item": "vare"
210+
},
211+
"per_unit": {
212+
"single": "{{price}}/{{unit}}",
213+
"one": "{{price}}/{{unit}}",
214+
"other": "{{price}}/{{count}}{{unit}}"
215+
},
216+
"per_unit_accessibility": {
217+
"single": "{{price}} per {{unit}}",
218+
"one": "{{price}} per {{unit}}",
219+
"other": "{{price}} per {{count}}{{unit}}"
220+
}
221+
}
181222
},
182223
"modal": {
183224
"label": "Mediegalleri"

‎locales/ru.json

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,54 @@
179179
"product_variants": "Варианты товара",
180180
"taxes_included": "Налоги включены.",
181181
"duties_included": "Пошлины включены.",
182-
"duties_and_taxes_included": "Пошлины и налоги включены."
182+
"duties_and_taxes_included": "Пошлины и налоги включены.",
183+
"unit_price": {
184+
"per_item": {
185+
"single": "{{price}} за шт.",
186+
"one": "{{price}} за {{count}} ед. товара",
187+
"other": "{{price}} за {{count}} ед. товара",
188+
"few": "{{price}} за {{count}} ед. товара",
189+
"many": "{{price}} за {{count}} ед. товара"
190+
},
191+
"unit": {
192+
"mg": "мг",
193+
"g": "г",
194+
"kg": "кг",
195+
"ml": "мл",
196+
"cl": "сл",
197+
"l": "л",
198+
"m3": "м³",
199+
"mm": "мм",
200+
"cm": "см",
201+
"m": "м",
202+
"m2": "м²",
203+
"oz": "унц.",
204+
"lb": "фунт.",
205+
"floz": "жидк. унц.",
206+
"pt": "пинт.",
207+
"qt": "кварт.",
208+
"gal": "гал.",
209+
"in": "дюйм.",
210+
"ft": "фут.",
211+
"yd": "ярд.",
212+
"ft2": "кв. фут.",
213+
"item": "ед. товара"
214+
},
215+
"per_unit": {
216+
"single": "{{price}}/{{unit}}",
217+
"one": "{{price}}/{{unit}}",
218+
"other": "{{price}}/{{count}}{{unit}}",
219+
"few": "{{price}}/{{count}}{{unit}}",
220+
"many": "{{price}}/{{count}}{{unit}}"
221+
},
222+
"per_unit_accessibility": {
223+
"single": "{{price}} за {{unit}}",
224+
"one": "{{price}} за {{unit}}",
225+
"other": "{{price}} за {{count}}{{unit}}",
226+
"few": "{{price}} за {{count}}{{unit}}",
227+
"many": "{{price}} за {{count}}{{unit}}"
228+
}
229+
}
183230
},
184231
"modal": {
185232
"label": "Галерея мультимедиа"

‎snippets/price.liquid

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -108,20 +108,9 @@
108108
{{ money_price }}
109109
</span>
110110
</div>
111-
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
112-
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
113-
<span class="price-item price-item--last">
114-
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
115-
<span aria-hidden="true">/</span>
116-
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
117-
<span>
118-
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
119-
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
120-
{%- endif -%}
121-
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
122-
</span>
123-
</span>
124-
</small>
111+
{%- if use_variant -%}
112+
{% render 'unit-price', variant: target %}
113+
{%- endif -%}
125114
</div>
126115
{%- if show_badges -%}
127116
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">

‎snippets/unit-price.liquid

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{%- assign measurement = variant.unit_price_measurement -%}
2+
<small class="unit-price caption{% if measurement == nil %} hidden{% endif %}">
3+
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
4+
<span class="price-item price-item--last">
5+
{%- assign price = variant.unit_price | money -%}
6+
{%- assign count = measurement.reference_value -%}
7+
{%- if measurement.measured_type == 'count' -%}
8+
{%- if count == 1 -%}
9+
{{- 'products.product.unit_price.per_item.single' | t: price: price -}}
10+
{%- else -%}
11+
{{- 'products.product.unit_price.per_item' | t: price: price, count: count -}}
12+
{%- endif -%}
13+
{%- else -%}
14+
{%- case measurement.reference_unit -%}
15+
{%- when 'ml',
16+
'cl',
17+
'l',
18+
'm3',
19+
'pt',
20+
'qt',
21+
'gal',
22+
'floz',
23+
'mg',
24+
'g',
25+
'kg',
26+
'oz',
27+
'lb',
28+
'mm',
29+
'cm',
30+
'm',
31+
'ft',
32+
'yd',
33+
'in',
34+
'm2',
35+
'ft2',
36+
'item'
37+
-%}
38+
{%- comment -%}theme-check-disable TranslationKeyExists{%- endcomment -%}
39+
{%- assign unit = 'products.product.unit_price.unit.' | append: measurement.reference_unit | t -%}
40+
{%- comment -%}theme-check-enable TranslationKeyExists{%- endcomment -%}
41+
{%- else -%}
42+
{%- assign unit = measurement.reference_unit -%}
43+
{%- endcase -%}
44+
<span aria-hidden="true">
45+
{%- if count == 1 -%}
46+
{{- 'products.product.unit_price.per_unit.single' | t: price: price, unit: unit -}}
47+
{%- else -%}
48+
{{- 'products.product.unit_price.per_unit' | t: price: price, count: count, unit: unit -}}
49+
{%- endif -%}
50+
</span>
51+
<span class="visually-hidden">
52+
{%- if count == 1 -%}
53+
{{- 'products.product.unit_price.per_unit_accessibility.single' | t: price: price, unit: unit -}}
54+
{%- else -%}
55+
{{- 'products.product.unit_price.per_unit_accessibility' | t: price: price, count: count, unit: unit -}}
56+
{%- endif -%}
57+
</span>
58+
{%- endif -%}
59+
</span>
60+
</small>

0 commit comments

Comments
 (0)