Sorting options within a filter in Shopify

Sorting an array of numbers correctly in liquid just doesn’t seem possible, at least it’s not straightforward.

Liquid only seems to sort array elements as strings, meaning it looks at what the string starts with and then sorts according to that, for instance 1 comes before 2, so 10 is considered to be less than 2 or 3.5.

So, to sort an array of numbers correctly in liquid, some maneuvering needs to be done depending on each case.

One way to handle this case would be as follows:

All shoe sizes are either a whole number (2, 3, 7, 11 …), or a .5 decimal (2.5, 9.5, 10.5, …). They’re also all less than 100 (their biggest whole number is no more than 2 digits)

Now the sorting issue, in this case, is due to the fact that some sizes have a 2-digit whole number, or have a floor (a method used to round off the number passed as a parameter to its nearest integer in a downward direction of rounding) that consists of 2 digits, while other sizes have a floor of 1 digit.

So, if we can separate these 2 sets of sizes into their own arrays, sort those 2 arrays individually, and then combine the 2 arrays into 1 array (with the array of smaller sizes first), then the resulting array should consist of the correct sorting of all sizes.

Here’s a piece of code that will do just that:

{% comment %} array of all the sizes shown above - I believe this would be the equivalent of the filter.values array {% 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 %}

The resulting sorted_array is:

[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]

And now the rest of your code can be applied to it:

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