Logic
From Shopify Wiki
Logic are conditional Liquid statements.
Contents |
Example of a logic statement
Lets say we are working on product.liquid template and want to display the message "Free shipping", but only on products whose price is greater than $100. Since the product will either have a price greater than $100 or less than $100, the if logic statement is the most appropriate statement to use...
{% if product.price > 100 %}
Free Shipping
{% else %}
No free shipping
{% end if %}
Notice how we use the {% %} logic tags and not the {{ }} output tags
Operators
You can use different operators when using logic statements...
- == - Equal
- != - Not equal
- > - Bigger than
- < - Smaller than
- >= - Bigger than or equal
- <= - Less than or equal
- or - either this or that
- and - must be this and that
- contains - includes the substring if used on a string, or element if used on an array
If/Else Logic
You can use use 3 statements inside of your if statement: {% if %}, {% elsif %} or {% else %}. Let's go through some examples:
Simple If statement
{% if product.price > 5000 %}
Free shipping
{% endif %}
If / Else
{% if product.available %}
This product is available
{% else %}
Sorry, this product is not available
{% endif %}
If / Else If / Else
{% if product.price > 5000 %}
Free shipping
{% elsif product.price == 5000 %}
half price shipping
{% else %}
Shipping is $20
{% endif %}
Note that “else if” is actually spelled “elsif” without the e, and all together in one word, in the Liquid syntax.
Case Statements
If you need to test more than one condition. Here is the liquid syntax:
{% case condition %}
{% when 1 %}
red
{% when 2 %}
blue
{% else %}
green
{% endcase %}
Example case statement...
{% case template %}
{% when 'index' %}
Welcome
{% when 'product' %}
{{ product.vendor | link_to_vendor }} / {{ product.title }}
{% else %}
{{ page_title }}
{% endcase %}
Cycle
If you need to alternate between things. Example of a cycle statement....
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
one two three one
You can give a cycle a group name. This is useful if you use multiple cycles in your template...
{% cycle 'group 1': 'one', 'two', 'three' %}
{% cycle 'group 1': 'one', 'two', 'three' %}
{% cycle 'group 2': 'one', 'two', 'three' %}
{% cycle 'group 2': 'one', 'two', 'three' %}
one two one two
For Loop
A loop is used when you need to repeat something multiple times. Here is an example of the liquid syntax
{% for item in array %}
do something
{% endfor %}
There is also some loop objects you can use to help style your layout
- forloop.length - length of the entire for loop
- forloop.index - index of the current iteration
- forloop.index0 - index of the current iteration (zero based)
- forloop.rindex - how many items are still left?
- forloop.rindex0 - how many items are still left? (zero based)
- forloop.first - is this the first iteration?
- forloop.last - is this the last iteration?
You can use 2 attributes to change how your loop works:
- Limit - restricts the number of times the loop repeats
- Offset - lets you start the loop on whatever number you want
Lets say we are viewing a collection with a total of 5 products (a,b,c,d,e). Using the example below...
{% for product in collections.frontpage.products limit:2 offset:2 %}
Product Name: {{ product.name }}
{% endfor %}
Product Name: c Product Name: d
We can also define a range of numbers to loop through. The range can be define literally or variable numbers. Here is an example if item.quantity is 4...
{% for i in (1..item.quantity) %}
'''Bold text'''{{ i }}
{% endfor %}
1, 2, 3, 4
Tables
Liquid can automatically generate table row and cells. Use this syntax:
{% tablerow product in collection.frontpage cols: 3 limit: 12 %}
{{ product.name }}
{% endtablerow %}
There are two attributes you can use with tablerow
- Limit: limits the number of whatever you are generating (in the exampel above it's products)
- Cols: specifies the number of columns you want in your table
You can also use a series of tablerowloop objects to help style your design:
- tablerowloop.length - length of the entire for loop
- tablerowloop.index - index of the current iteration
- tablerowloop.index0 - index of the current iteration (zero based)
- tablerowloop.rindex - how many items are still left?
- tablerowloop.rindex0 - how many items are still left? (zero based)
- tablerowloop.first - is this the first iteration?
- tablerowloop.last - is this the last iteration?
- tablerowloop.col - index of column in the current row
- tablerowloop.col0- index of column in the current row (zero based)
- tablerowloop.col_first - is this the first column in the row?
- tablerowloop.col_last - is this the last column in the row?
Example on how to use tablerowloop.col_first:
{% tablerow product in collections.frontpage.products cols: 3 %}
{% if col_first %}
This is the first column
{% else %}
This is not the first column
{% endif %}
{% endtablerow %}
Variable Assignment
You can store data in your own variables to be used in output or other tags. The easiest way to create a variable is the assign tag which looks like this...
{% assign name = 'bananas' %}
{% for product in collections.frontpage.products %}
{% if product.title == name %}
The product name matches my variable!
{% endif %}
{% endfor %}
You can also store a true or false value in your variable:
{% assign bananas = false %}
{% for product in collections.frontpage.products %}
{% if product.name == 'bananas' %}
{% assign bananas = true %}
{% endif %}
{% endfor %}
{% if bananas %}
Yes we have a banana!
{% endif %}
You can also store a number in a variable with assign:
{% assign number = 3 %}
{% for product in collections.frontpage.products %}
{% if forloop.index == number %}
This is the 3rd iteration!
{% endif %}
{% endfor %}
If you want to combine a number of strings into a single string and save it to a variable, you can do that with the capture tag. This tag is a block which "captures" whatever is rendered inside it and assigns it to the given variable instead of rendering it to the screen. Here's how it works:
{% capture attribute_name %}{{ product.title | handleize }}-{{ i }}-color{% endcapture %}
<label for="{{ attribute_name }}">Color:</label>
<select name="attributes[{{ attribute_name }}]" id="{{ attribute_name }}">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Note: what you store in a variable using capture is always a string (text). You have to remember this!
{% capture value %}10{% endcapture %}
{% if value == 10 %}
This will never be output.
{% endif %}
{% if value == '10' %}
This will be output.
{% endif %}
