WIP

Author: sunblaze

locales/en.default.json

@@ -164,6 +164,39 @@
         "sale_price": "Sale price",
         "unit_price": "Unit price"
       },
+      "unit_price": {
+        "per_item": {
+          "single": "{{price}} each",
+          "one": "{{price}} per {{count}} item",
+          "other": "{{price}} per {{count}} items"
+        },
+        "per_unit": "{{price}} / {{count}}{{unit}}",
+        "per_unit_accessibility": "{{price}} per {{count}}{{unit}}",
+        "unit": {
+          "mg": "mg",
+          "g": "g",
+          "kg": "kg",
+          "ml": "ml",
+          "cl": "cl",
+          "l": "L",
+          "m3": "m³",
+          "mm": "mm",
+          "cm": "cm",
+          "m": "m",
+          "m2": "m²",
+          "oz": "oz",
+          "lb": "lb",
+          "floz": "fl oz",
+          "pt": "pt",
+          "qt": "qt",
+          "gal": "gal",
+          "in": "in",
+          "ft": "ft",
+          "yd": "yd",
+          "ft2": "ft²",
+          "item": "item"
+        }
+      },
       "share": "Share this product",
       "sold_out": "Sold out",
       "unavailable": "Unavailable",

snippets/price.liquid

@@ -108,20 +108,9 @@
           {{ money_price }}
         </span>
       </div>
-      <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
-        <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
-        <span class="price-item price-item--last">
-          <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
-          <span aria-hidden="true">/</span>
-          <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
-          <span>
-            {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
-              {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
-            {%- endif -%}
-            {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
-          </span>
-        </span>
-      </small>
+      {%- if use_variant -%}
+        {% render 'unit-price', variant: target %}
+      {%- endif -%}
     </div>
     {%- if show_badges -%}
       <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">

snippets/unit-price.liquid

@@ -0,0 +1,55 @@
+{%- assign measurement = variant.unit_price_measurement -%}
+<small class="unit-price caption{% if measurement == nil %} hidden{% endif %}">
+  <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
+  <span class="price-item price-item--last">
+    {%- assign price = variant.unit_price | money -%}
+    {%- if measurement.measured_type == 'count' -%}
+      {%- assign count = measurement.reference_value -%}
+      {%- if measurement.reference_value == 1 -%}
+        {{- 'products.product.unit_price.per_item.single' | t: price: price -}}
+      {%- else -%}
+        {{- 'products.product.unit_price.per_item' | t: price: price, count: count -}}
+      {%- endif -%}
+    {%- else -%}
+      {%- case measurement.reference_unit -%}
+        {%- when 'ml',
+          'cl',
+          'l',
+          'm3',
+          'pt',
+          'qt',
+          'gal',
+          'floz',
+          'mg',
+          'g',
+          'kg',
+          'oz',
+          'lb',
+          'mm',
+          'cm',
+          'm',
+          'ft',
+          'yd',
+          'in',
+          'm2',
+          'ft2',
+          'item'
+        -%}
+          {% comment %}theme-check-disable TranslationKeyExists{% endcomment %}
+          {%- assign unit = 'products.product.unit_price.unit.' | append: measurement.reference_unit | t -%}
+          {% comment %}theme-check-enable TranslationKeyExists{% endcomment %}
+        {%- else -%}
+          {%- assign unit = measurement.reference_unit -%}
+      {%- endcase -%}
+      {%- if measurement.reference_value != 1 -%}
+        {%- assign count = measurement.reference_value -%}
+      {%- endif -%}
+      <span aria-hidden="true">
+        {{- 'products.product.unit_price.per_unit' | t: price: price, count: count, unit: unit -}}
+      </span>
+      <span class="visually-hidden">
+        {{- 'products.product.unit_price.per_unit_accessibility' | t: price: price, count: count, unit: unit -}}
+      </span>
+    {%- endif -%}
+  </span>
+</small>