Making an object in Liquid

Full disclosure, this is a faux object, but works similarly to an object. Here's the code: 

{% assign first_names = "" %}
{% assign last_names = "" %}
{% assign eye_colors = "" %}
{% assign ages = "" %}

{% assign first_names = first_names | append: "John" | append: "|" %}
{% assign last_names = last_names | append: "Smith" | append: "|" %}
{% assign eye_colors = eye_colors | append: "blue" | append: "|" %}
{% assign ages = ages | append: "50" | append: "|" %}

{% assign first_names = first_names | append: "Jane" | append: "|" %}
{% assign last_names = last_names | append: "Doe" | append: "|" %}
{% assign eye_colors = eye_colors | append: "" | append: "|" %}
{% assign ages = ages | append: "" | append: "|" %}

{% assign first_names = first_names | append: "Joe" | append: "|" %}
{% assign last_names = last_names | append: "Pichardo" | append: "|" %}
{% assign eye_colors = eye_colors | append: "brown" | append: "|" %}
{% assign ages = ages | append: "28" | append: "|" %}

{% assign first_names = first_names | split: "|" %}
{% assign last_names = last_names | split: "|" %}
{% assign eye_colors = eye_colors | split: "|" %}
{% assign ages = ages | split: "|" %}

First we assign blank variables with descriptive names. The variable will have a string of values separated by a character. After we add all our values, we will use the liquid "split" with the character to make the values into an array. Notice we left the middle values with some empty values, this will still work and can be seen in the output. Finally, the faux object works when we loop through the first array and use forloop.index0 on the other arrays to get the corresponding values.

<ul>
  {% for first_name in first_names %}
    <li>
      {{ first_name }} {{ last_names[forloop.index0] }}<br>
      Eye color: {{ eye_colors[forloop.index0] }} <br>
      Age: {{ ages[forloop.index0] }}
    </li>
  {% endfor %}
</ul>

The output:

Faux Object output

All the values show up with their correct values and notice that if there is a blank value the output is blank as well. There are other ways to do this, but in my opinion they can be less manageable, readable, and messy. Here are some of those examples.

Creating each array separate makes this harder to manage because you have to go to each array to delete the value. Where in my first snippet you just need to delete the values that are next to each other. 

{% assign first_names = "" %}
{% assign last_names = "" %}
{% assign eye_colors = "" %}
{% assign ages = "" %}

{% assign first_names = first_names | append: "John" | append: "|" %}
{% assign first_names = first_names | append: "Jane" | append: "|" %}
{% assign first_names = first_names | append: "Joe" | append: "|" %}

{% assign last_names = last_names | append: "Smith" | append: "|" %}
{% assign last_names = last_names | append: "Doe" | append: "|" %}
{% assign last_names = last_names | append: "Pichardo" | append: "|" %}

{% assign eye_colors = eye_colors | append: "blue" | append: "|" %}
{% assign eye_colors = eye_colors | append: "" | append: "|" %}
{% assign eye_colors = eye_colors | append: "brown" | append: "|" %}

{% assign ages = ages | append: "50" | append: "|" %}
{% assign ages = ages | append: "" | append: "|" %}
{% assign ages = ages | append: "28" | append: "|" %}

{% assign first_names = first_names | split: "|" %}
{% assign last_names = last_names | split: "|" %}
{% assign eye_colors = eye_colors | split: "|" %}
{% assign ages = ages | split: "|" %}

Another way to create faux objects is using one liner code for each array. This is less code, but I feel it is harder to read, especially when you deal with blank values and when you it starts to get bigger than 10 values. I repeat the previous opinion of it being harder to update by going through each array. 

{% assign first_names = "John|Jane|Joe" | split: "|" %}

{% assign last_names = "Smith|Doe|Pichardo" | split: "|" %}

{% assign eye_colors = "blue||brown" | split: "|" %}

{% assign ages = "50||28" | split: "|" %}
Joe Pichardo | Shopify Developer

About Joe Pichardo

Joe Pichardo is a Shopify Developer creating themes and apps to help other programmers succeed on the ecommerce platform.

Leave a comment

Please note, comments must be approved before they are published