Operators and Order of Operations

We recapped the operators earlier; let’s look closer at some of the trickier ones. Most of the operators used with tags are fairly intuitive: == means equals, and contains means… well, that the string contains something! However, it’s helpful to have a deeper understanding of operators and how they work when using conditional tags.

Operators in conditional tags

Operators tell Liquid to do comparisons to determine whether conditions are met in conditional tags. Here’s a simple example using the if tag and the customer.purchased.most_recent key, the value of which is the last product the customer purchased:

{% if customer.purchased.most_recent == "leash" %}
Thank you for your recent purchase of a leash!
{% endif %}

To evaluate the first line of code, Liquid looks at the value of the customer.purchased.most_recent key and then compares it to “leash.” Since you’ve used the == operator, Liquid checks to see if they are the same. If they are, Liquid outputs your copy! If they aren’t, Liquid outputs nothing.

Using and and or operators to do multiple comparisons

To do multiple comparisons, you can use the and and or operators, like this: 

{% if customer.purchased.most_recent == "leash" or "collar" %}
Now that your good boy has a {{ customer.purchased.most_recent }}, consider buying an ID tag!
{% endif %}

Here, Liquid is comparing the or statement with the key’s value; if they match, it will output the copy. If not, nothing happens. 

Liquid evaluates all and and or statements in pairs. With or, if either the left or the right side matches the key’s value, the condition is met. For and, the condition is not met unless both the left and the right side match the key’s value. 

This is simple and intuitive when you’re dealing with just one and or or operator. However, Liquid allows you to string together multiple pairs to create complex conditionals. 

Multiple and and or operators

In tags with more than one and or or, Liquid reads the pairs from right to left. This can be some tricky business to remember—it’s the opposite of how Liquid reads filters, and it’s not what we learned in math class about order of operations! 

Let’s look at an example. The customer.purchased key’s value is an array of a customer’s purchases: “leash”, “collar”. Here’s the code:

{% if customer.purchased == "bowl" or "leash" and "collar" %}
Click to see our selection of ID tags and bowl elevators!
{% endif %}

Liquid will read it like this: 

1. Read the first pairs, starting on the right (leash, collar): Does the key’s value contain leash and collar? Yes.

2. Go to the next pair to the left (bowl, leash): Does the key’s value contain bowl or leash? Yes.

3. Are there any more and or or operators? No.

4. The condition is met because all the and and or pairs matched with the key’s value.

Practice problem: multiple and and or pairs

Let’s practice using multiple and or statements. 

We’ll use the customer.purchased key. For this problem, its value is: “bowl elevator”, “vitamins”, “brush”, “shampoo”, “leash”. 

Look at the code below and choose which output will result. 

{% if customer.purchased contains "shampoo" and "brush" or "collar" and "vitamins" %}
Keep your pet healthy with gentle exercise!
{% endif %}

That’s not right; try again!

Up Next: Intermediate Tags – Truthy and Falsy