How to Sort items of Array by Given Attribute in Liquid in Shopify
Drive 20-40% of your revenue with Avada
Sorting items in an array by a specific attribute can be a real challenge, especially when you’re dealing with a large pool of related products. You want to find that one product quickly, but without a clear sorting method, it becomes a time-consuming task. This post will guide you through sorting items of an array by a given attribute in Liquid, helping you streamline your search process and improve your store’s functionality.
Table of content
- What is Liquid template language?
- What is array filter?
- How to sort items of array by given attribute in liquid
What is Liquid template language?
Refering to Shopify’s template language, Liquid is the popular one which is used by a lot of website developers. Liquid is used as the backbone of Shopify to upload dynamic content on the front page. Liquid has been sold since 2006 and now become a good source for a lot of hosted website application such as Jekyll, salesforce desk, and zendesk.
What is array filter?
Filter is a useful function when you use Liquid on Shopify platform. Filter feature offers callback function for each character in an array and build a new array that can also give the value back to confirm the true feature of that element. Callback is available with three arguments: the value of element, the index of element and the array objects.
In addition, the range of elements demonstrated by filter is set by the first petition of callback. If existing elements are changed or eliminated, their value will be passed to the filter hence when filter check these elements, their value is remained.
Liquid code can be classified into three different categories: objects, tags and filters. Objects annouce Liquid where to show content on a page. Objects and variable names are denoted by double curly braces { and }}. The main function of tags is to control the flow of the template. Tags are presented by one curly brace and a percent sign {% and %}. Filters are used to change the output of a Liquid object and seperated by a straight flash |.
Moreover, you can show products_array elsewhere on the page. Therefore, it can be said that Liquid is a flexible language.
The function of sorting items is to classify elements by an assigned attribute of an array.
How to sort items of array by given attribute in liquid
Look at this example:
Input:
{% assign products = collection.products | sort: 'price' %}
{% for product in products %}
<h4>{{ product.title }}</h4>
{% endfor %}
An advanced case is provided like your reference: Input:
<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
{{ product.title }}
{% endfor %}
Output:
A B a b
Conclusion
To wrap up, sorting items of an array by a given attribute in Liquid is a powerful way to enhance the shopping experience on your Shopify store. By organizing products efficiently, you help customers find what they need quickly, leading to higher satisfaction and potentially more sales. Apply these simple sorting techniques to streamline your store’s navigation and make your customers’ journey smoother.
Liquid
