More Array Filters: sort, sort_natural, reverse, uniq, and where

Shopify Liquid offers a variety of array filters that make it easy to manipulate and organize data.

sort

The 'sort' filter sorts an array in ascending order based on the specified property. If no property is given, it sorts the elements themselves.

{% assign products = collections.all.products %}
{% assign sorted_products = products | sort: 'price' %}
{{ sorted_products }}

In the example above, we sort the products by their price in ascending order.

sort_natural

The 'sort_natural' filter sorts an array of strings in a case-insensitive, natural way. This filter does not accept a property parameter.

{% assign fruits = "apple, Orange, banana" | split: ", " %}
{% assign sorted_fruits = fruits | sort_natural %}
{{ sorted_fruits }}

The example above sorts an array of fruit names in a natural, case-insensitive order: 'apple, banana, Orange'.

reverse

The 'reverse' filter reverses the order of the elements in an array.

{% assign numbers = "1, 2, 3, 4, 5" | split: ", " %}
{% assign reversed_numbers = numbers | reverse %}
{{ reversed_numbers }}

In the example above, we reverse the order of the numbers array: '5, 4, 3, 2, 1'.

uniq

The 'uniq' filter removes duplicate elements from an array, returning a new array with unique elements.

{% assign duplicate_numbers = "1, 1, 2, 2, 3, 3" | split: ", " %}
{% assign unique_numbers = duplicate_numbers | uniq %}
{{ unique_numbers }}

The example above removes duplicates from the array, resulting in a unique array: '1, 2, 3'.

where

The 'where' filter gets an array of objects based on a given property and value. This filter is particularly useful for filtering collections, menus, and other lists of objects.

{% assign products = collections.all.products %}
{% assign available_products = products | where: "available", true %}
{{ available_products }}

The example above filters the products array to display only the available products.

Using Filters Together

These filters can be used together to achieve complex operations on arrays. For example, you might want to sort a list of products types, reverse the order, and then display only the unique product types.

{% assign products = collections.all.products %}
{% assign product_types = products | map: 'type' %}
{% assign sorted_product_types = products | sort %}
{% assign reversed_sorted_product_types = sorted_product_types | reverse %}
{% assign unique_sorted_product_types = reversed_sorted_products | uniq %}
{{ unique_sorted_product_types }}

In the example above, we first map the products by type, sort the types, then reverse the order, and finally remove any duplicates to display a unique list of product types.

Whether you're organizing collections, displaying product listings, or manipulating data for custom features, these filters will help you achieve the desired results with ease.