Shopify店铺鞋码筛选排序异常求助（大码位置错误）

问题根源 #

字符串排序会把"UK 10"识别为以"1"开头的字符串，导致它排在"UK 1.5"之后、"UK 2"之前，而非正确的数值顺序。

解决方案1：按鞋码数值升序排序 #

通过提取鞋码中的数字部分并转换为数值，以此为依据排序，彻底解决字符串排序的问题：

{%- assign temp_size_list = '' | split: '' -%}
{%- for filter_value in filter.values -%}
  {%- capture size_text -%}{{ filter_value.label | split: ' ' | shift | first }}{%- endcapture -%}
  {%- assign size_number = size_text | plus: 0.0 -%}
  {%- assign size_item = filter_value | merge: { 'sort_num': size_number } -%}
  {%- assign temp_size_list = temp_size_list | push: size_item -%}
{%- endfor -%}

{%- assign sorted_size_values = temp_size_list | sort: 'sort_num' -%}

{%- for filter_value in sorted_size_values -%}
  {%- 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 -%}

代码说明 #

1. 遍历所有筛选值，从label中提取数字部分：用split: ' '分割字符串，shift移除开头的"UK"，first获取数字字符串。
2. 用plus: 0.0将数字字符串转换为数值（兼容整数和小数）。
3. 给每个筛选值添加自定义属性sort_num存储数值，再按该属性升序排序。
4. 最后循环输出排序后的筛选选项。

解决方案2：将UK 10及以上大码统一移至底部 #

如果需要把所有>=10的大码单独放在列表末尾，可按以下方式分组排序：

{%- assign small_sizes = '' | split: '' -%}
{%- assign large_sizes = '' | split: '' -%}

{%- for filter_value in filter.values -%}
  {%- capture size_text -%}{{ filter_value.label | split: ' ' | shift | first }}{%- endcapture -%}
  {%- assign size_number = size_text | plus: 0.0 -%}
  {%- if size_number < 10 -%}
    {%- assign small_sizes = small_sizes | push: filter_value -%}
  {%- else -%}
    {%- assign large_sizes = large_sizes | push: filter_value -%}
  {%- endif -%}
{%- endfor -%}

{%- assign sorted_small_sizes = small_sizes | sort_natural -%}
{%- assign sorted_large_sizes = large_sizes | sort_natural -%}
{%- assign sorted_size_values = sorted_small_sizes | concat: sorted_large_sizes -%}

{%- for filter_value in sorted_size_values -%}
  {%- 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 -%}

代码说明 #

1. 按数值将尺码分为两组：小于10的小码、大于等于10的大码。
2. 分别对两组使用sort_natural做自然排序（保证小码内部、大码内部顺序正确）。
3. 拼接小码组和大码组，小码在前，大码在后。
4. 循环输出拼接后的筛选选项。

内容的提问来源于stack exchange，提问作者Mat