From Shopify Wiki

Revision as of 17:25, 20 December 2011

Logic are conditional Liquid statements.

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

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 statement

{% if product.available %}
  This product is available
{% else %}  
  Sorry, this product is not available
{% endif %}

if/elseif/else statement

{% if product.price > 5000 %}
  Free shipping
{% elsif product.price == 5000 %}
  half price shipping
{% else %}  
  Shipping is $20
{% endif %}

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 %}