How to Merge Two Arrays into One in Liquid in Shopify
Drive 20-40% of your revenue with Avada
Would you want to create a better user experience on your website? One of the most common ways is that you turn two lines in one, which may save space for other information. If you are using Liquid template language, it is easy to improve the customer experience by utilizing the array filters. This tutorial aims to guide you to merge two arrays into one in Liquid.
Table of content
Brief guide to Liquid
For more than a decade, Liquid is a great tool for website developers to build a good page. Liquid is one of the open-source template languages in Shopify. 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
Array filters are used to create a new array from a provided array including names or items which meet the demand of the condition set by the argument function.
Filter feature is used to offer 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. The callback is compatible with three arguments: the value of the element, the index of the element, and the array objects being traversed.
In addition, the range of elements demonstrated by a filter is set by the first petition of the 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 kept.
Array filters consist of 11 types, each of which holds a specific function to upload the content. You can apply: join, first, last, concat, index, map, reverse, size, sort, where, and uniq. This tutorial focuses on concat.
Let’s move to the next part to see steps to merge two arrays.
How to Merge Two Arrays into One in Liquid
First, what is concat? Concat or concatenate helps to combine an array with another array. Therefore, the new array will include all elements in the original array. concat will not duplicate entries from the concatenated array unless you use the uniq filter.
In the example, if you want to combine fruits and vegetables, then you follow this sample:
Input
{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}
{% assign plants = fruits | concat: vegetables %}
{{ plants | join: ", " }}
Output
apples, oranges, peaches, tomatoes, broccoli, carrots, lettuce, tomatoes
Moreover, concat can combine more than three arrays. You can add three arrays of fruits, vegetables and animals in one:
Input
{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce" | split: ", " %}
{% assign animals = "dogs, cats, birds" | split: ", " %}
{% assign things = fruits | concat: vegetables | concat: animals %}
{{ things | join: ", " }}
Output
apples, oranges, peaches, broccoli, carrots, lettuce, dogs, cats, birds
Conclusion
To sum up, concat assists in combining two or multiple lines in one. In liquid, concat supports to save space for other pieces of information; hence you can create a better customer journey on your website. If you have any difficulties, let us know, and we will address them.
Liquid
