在 Shopify 中的过滤器内对选项进行排序

Question

我在 Shopify 上有一家商店，我正在尝试修复。客户销售鞋子并将其鞋子列为“英国尺码 1、英国尺码 2、英国尺码 3”等。问题是“英国尺码 10”的鞋子尺码位于英国尺码 1 和英国尺码 2 选项之间。我假设这是因为它知道里面有数字 1，所以它试图正确排序。问题是，这对我们商店不起作用。

我尝试使用 sort、sort_natural 等调整过滤器的选项，但无济于事。

代码片段

{%- for filter_value in filter.values | sort: 'asc' -%}
                      {%- capture filter_value_id -%}@@@@-{{ filter_value.param_name | append: filter_value.value | handle }}{%- endcapture -%}

                      <li class="Linklist__Item">
                        <input class="Linklist__Checkbox u-visually-hidden" id="{{ filter_value_id | escape }}" type="checkbox" name="{{ filter_value.param_name }}" value="{{ filter_value.value }}" {% if filter_value.active %}checked{% endif %}>
                        <label for="{{ filter_value_id | escape }}" class="Text--subdued Link Link--primary">
                          {{- filter_value.label }} ({{ filter_value.count -}})
                        </label>
                      </li>
                    {%- endfor -%}

目前的外观：https://blockp.co.uk/collections/shoes

您可以看到选项是如何列出的：

UK 1.5 PS (1)

UK 10 (16)

UK 10.5 (12)

UK 11 (18)

UK 11.5 (7)

UK 12 (5)

UK 13 (2)

UK 13.5 PS (1)

UK 2 PS (1)

UK 3 (4)

UK 3.5 (9)

UK 3.5 GS (1)

UK 4 (5)

UK 4 (GS) (1)

UK 4.5 (8)

UK 4.5 (GS) (1)

UK 4.5 TD (2)

UK 5 (4)

UK 5 (GS) (1)

UK 5.5 (7)

UK 6 (25)

UK 6.5 (17)

UK 7 (26)

UK 7.5 (42)

UK 7.5 QS TD (1)

UK 8 (47)

UK 8.5 (34)

UK 8.5 TD (1)

UK 9 (34)

UK 9.5 (25)

尺寸 10、11、12、13 等都需要位于底部。

如有任何帮助，我们将不胜感激。

Answer 1

在液体中正确地对数字数组进行排序似乎是不可能的，至少它并不简单。

Liquid 似乎只将数组元素作为字符串进行排序，这意味着它会查看字符串以什么开头，然后根据该字符串进行排序，例如 1 在 2 之前，因此 10 被认为小于 2 或 3.5。

因此，要在液体中对数字数组进行正确排序，需要根据具体情况进行一些操作。

处理这种情况的一种方法如下：

所有鞋码均为整数（2、3、7、11 …）或 0.5 小数（2.5、9.5、10.5、…）。而且都小于100（最大整数不超过2位）

在这种情况下，排序问题是由于某些尺寸具有 2 位整数或具有下限（一种用于将作为参数传递的数字四舍五入到其最接近的整数的方法）舍入方向）由 2 位数字组成，而其他尺寸的下限为 1 位数字。

因此，如果我们可以将这 2 组大小分成各自的数组，分别对这 2 个数组进行排序，然后将这 2 个数组组合成 1 个数组（首先是较小大小的数组），那么结果数组应该由所有尺寸的正确排序。

这里有一段代码可以做到这一点：

{% comment %} array of all the sizes shown above {% endcomment %}
{% assign sizes = '1.5, 10, 10.5, 11, 11.5, 12, 13, 13.5, 2, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5'
  | split: ', '
%}

{% comment %} declare the first array - this is the array of sizes that have a floor of 1 digit {% endcomment %}
{% assign smaller_sizes = '' | split: '' %}

{% comment %} decalre the second array - this is the array of sizes that have a floor of 2 digits {% endcomment %}
{% assign larger_sizes = '' | split: '' %}

{% comment %} lopp through the sizes array and store each size in the appropriate array based on floor number of digits, and sort the arrays as they are being created {% endcomment %}
{% for size in sizes %}
  {% assign temp_size = size | join: ',' | split: ',' %}
  {% assign floor_of_size = size | floor | json %}
  {% if floor_of_size.size == 2 %}
    {% assign larger_sizes = larger_sizes | concat: temp_size | sort %}
  {% else %}
    {% assign smaller_sizes = smaller_sizes | concat: temp_size | sort %}
  {% endif %}
{% endfor %}

{% comment %} combine the 2 arrays {% endcomment %}
{% assign sorted_sizes = smaller_sizes | concat: larger_sizes %}

排序后的数组为：

[1.5, 2, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 13, 13.5]

现在可以将其余代码应用于它：

{% for sorted_size in sorted_sizes %}
  your code here...
{% endfor %}