Append, Prepend, and Split

Filters append and prepend are essential for concatenating strings, while the split filter is used to divide strings into arrays. The functionality of append, prepend, and split filters can be combined to support each other.

Appending and Prepending Strings in Liquid

Append and prepend filters are used to concatenate strings in Liquid, either by adding a string to the end (append) or to the beginning (prepend) of another string. These filters are particularly useful when you need to format text or create dynamic strings based on your store's data.

Append Filter: Adds a string to the end of another string:

{{ 'Hello' | append: ', World!' }} {# Output: 'Hello, World!' #}

Prepend Filter: Adds a string to the beginning of another string:

{{ 'World!' | prepend: 'Hello, ' }} {# Output: 'Hello, World!' #}

Using the Split Filter to Divide Strings into Arrays

The split filter is used to divide a string into an array of substrings based on a specified delimiter. This filter is especially helpful when you need to work with lists of items, such as product tags or categories, in a more structured format.

For example, let's say you have a string of product tags, and you want to create an array from them:

{% assign tags = "tag1, tag2, tag3" | split: ", " %}
{# tags array: ["tag1", "tag2", "tag3"] #}

In this example, we use the split filter to divide the string into an array based on the comma and space delimiter.

Combining Append, Prepend, and Split Filters

Let's say you want to create a string of product IDs from a collection's products with a custom separator, which can be split later for further processing. In this example, we will use the append and prepend filters to add a custom separator to the product IDs.

{% assign custom_separator = '|||' %}
{% assign product_ids = '' %}

{% for product in collections.all.products %}
  {% assign product_id_string = product.id | prepend: custom_separator %}
  {% assign product_ids = product_ids | append: product_id_string %}
{% endfor %}

{{ product_ids }}

With the above code, we loop through the products in a collection and prepend the custom separator to each product ID. Then, we append the resulting string to the 'product_ids' variable. The final output will be a string containing all product IDs, separated by the custom separator:

|||123456|||789012|||345678

To split the string of product IDs back into an array, use the split filter:

{% assign product_id_array = product_ids | split: custom_separator %}
{# product_id_array: ["", "123456", "789012", "345678"] #}

Keep in mind that, in this case, the first element of the array will be an empty string because of the initial custom separator in the 'product_ids' string. You can either remove the first element from the array or modify the loop logic to exclude the separator before the first product ID.

The previous example was to show an issue that may occur with using split on empty string in the first index. A better way to write this code, is to use append for product IDs.

{% assign custom_separator = '|||' %}
{% assign product_ids = '' %}

{% for product in collections.all.products %}
  {% assign product_id_string = product.id | append: custom_separator %}
  {% assign product_ids = product_ids | append: product_id_string %}
{% endfor %}

{{ product_ids }}

The final output will be a string containing all product IDs, separated by the custom separator:

123456|||789012|||345678|||

To split the string of product IDs back into an array, use the split filter:

{% assign product_id_array = product_ids | split: custom_separator %}
{# product_id_array: ["123456", "789012", "345678"] #}

In this modified example, the last element of the array should be an empty string, as there's a custom separator appended after the last product ID. The split filter removes the last element from the array after the last product ID. Just a quick tip for your programming journey.