Shopify just announced some new handy liquid filters for handling array data, which makes it way easier to deal with data in your themes. These little helpers can clean up your code, improve maintainability and speed. Let's check out a few of the most useful ones.
Finding Product via Tags
Previously, locating a product with a specific tag (like 'featured') required a somewhat hacky loop. Let's compare the old and new approaches:
Old: 7 lines
{% assign featured_index = -1 %}
{% for product in collection.products %}
{% if product.tags contains 'featured' %}
{% assign featured_index = forloop.index0 %}
{% break %}
{% endif %}
{% endfor %}This code iterates through each product, checking its tags. If 'featured' is found, the index is stored, and the loop breaks.
New: 1 line
{% assign featured_index = collection.products | find_index: 'tags', 'featured' %}This single line achieves the same result! The find_index filter efficiently searches for the product and returns its index. If no 'featured' product exists, find_index returns nil. This new method is not only more concise but also potentially more performant, especially for larger collections. It significantly simplifies your code and makes it easier to read and maintain.
map - Snagging Specific Info
The map filter lets you grab a specific piece of info from each item and create a new array with just that info. Say you have a bunch of products and just want their titles:
{% assign product_titles = collection.products | map: 'title' %}compact - Remove the nulls (Big Improvement Here!)
Sometimes, you end up with null values hanging around in your arrays. compact all null values leaving you with a nice, clean array. This used to be a bit more complicated. Check this out:
Old (not pretty)
Let's say you wanted to collect product prices, but some products might not have a price set yet (resulting in a null value). Before compact, you might have done something like this:
{% assign prices = collection.products | map: 'price' %}
{% assign clean_prices = "" | split: "" %} // Initialize an empty array
{% for price in prices %}
{% if price != null %}
{% assign clean_prices = clean_prices | push: price %}
{% endif %}
{% endfor %}Ugh, that's a lot of code just to remove null values!
New (so much better)
Now, with compact, it's just one line:
{% assign clean_prices = collection.products | map: 'price' | compact %}Way cleaner, right?
sort - Getting Things in Order
Need to arrange your array? sort does the trick, putting things in order (alphabetical or numerical). You can even sort by a specific property if your array has objects:
{% assign sorted_products = collection.products | sort: 'price' %}reverse - Flip the output
Want your array backwards? reverse flips it for you:
{% assign reversed_products = collection.products | reverse %}join - Making a String
join takes all the stuff in your array and smashes it together into a single string, using whatever separator you want:
{% assign tag_string = product.tags | join: ', ' %}uniq - Ditching the Duplicates
Got doubles in your array? uniq gets rid of them:
{% assign unique_tags = product.tags | uniq %}Putting it All Together
The cool thing is, you can chain these filters together for some serious data manipulation. Like, if you want a comma-separated list of unique, sorted product tags:
{% assign tag_string = product.tags | uniq | sort | join: ', ' %}These array filters are your secret weapons for working with data in Shopify Liquid. Using them wisely will make your code cleaner, faster, and way easier to deal with. Check out the official Liquid docs for the full rundown on filters and their options.