Tags

Overview

Review of ZMP platform tags

Comment

It allows you to leave un-rendered code in content. Any text within the opening and closing comment blocks will not be output, and any ZML code within will not be executed.

Input

Anything you put between {% comment %} and {% endcomment %} tags

is turned into a comment.

Output

Anything you put between tags is turned into a comment.

Control Flow

Control flow tags can change the information ZML shows using logic.

If

Executes a block of code only if a certain condition is true.

Input

{% if first_name %} Hello {{ first_name }}! {% endif %}

Output

Hello Ryan!

Unless

The opposite of if – executes a block of code only if a certain condition is not met.

Input

{% unless first_name == "Ryan" %}

Hello {{ first_name }}! {% endunless %}

Because first_name is equal to Ryan, the output is empty.

Output

Elsif / Else

Adds more conditions within an if or unless block. Note the missing 'e' in elsif. This is intentional.

Input

{% if first_name == "Ryan" %} Hello {{ first_name }}!

{% elsif first_name == "Jeremy" %}

This guys name is Jeremy.

{% else %}

This person's name is neither Ryan nor Jeremy.

{% endif %}

Case / When

Creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.

Input

{% assign handle = 'cake' %}

{% case handle %}

{% when 'cake' %}

This is a cake

{% when 'cookie' %}

This is a cookie

{% else %}

This is not a cake nor a cookie

{% endcase %}

Output

This is a cake

Iteration

Iteration tags run blocks of code repeatedly.

For

Repeatedly executes a block of code. For a full list of attributes available within a for loop, see forloop (object).

Input

<!-- subscription_preferences = "newsletter", "promotions" --> 

{% for preference in subscription_preferences %} {{ preference }}

{% endfor %}

Output

newsletter promotions

Break

Causes the loop to stop iterating when it encounters the break tag.

Input

{% for i in (1..5) %}

{% if i == 4 %} {% break %}

{% else %}

{{ i }} {% endif %}

{% endfor %}

Output

1 2 3

Continue

Causes the loop to skip the current iteration when it encounters the continue tag. 

Input

{% for i in (1..5) %}

{% if i == 4 %}

{% continue %}

{% else %}

{{ i }}

{% endif %}

{% endfor %}

Output

1 2 3  5

For (Parameters)

Limit

Limits the loop to the specified number of iterations.

Input

<! -- array = [1,2,3,4,5,6] -->

{% for item in array limit:2 %}

{{ item }}

{% endfor %}

Output

1 2

Offset

Begins the loop at the specified index.

Input

<! -- array = [1,2,3,4,5,6] -->

{% for item in array offset:2 %}

{{ item }}

{% endfor %}

Output

3 4 5 6

Range

Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.

Input

{% for i in (3..5) %}

{{ i }}

{% endfor %}

{% assign num = 4 %}

{% for i in (1..num) %}

{{ i }}

{% enddfor %}

Output

3 4 5 

1 2 3 4

Reversed

Reverses the order of the loop. Note that the flag’s spelling is different to the filter reverse.

Input

<!-- if array = [1,2,3,4,5,6] -->

{% for item in array reversed %}

{{ item }}

{% endfor %}

Output

6 5 4 3 2 1

Cycle

Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time cycle is called, the next string that was passed as a parameter is output.

cycle must be used within a for loop block.

Input

<!-- if array = [1,2,3,4,5,6] -->

{% for item in array reversed %}

{{ item }}

{% endfor %}

Output

one

two

three

one

Uses for cycle include:

  • Alternating between odd/even rows

  • applying a unique class to the last product thumbnail in a row

Cycle (Parameters)

cycle accepts a parameter called cycle group in cases where you need multiple cycle blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group. More information on cycle groups can be found here.

Tablerow

See here for more information on creating tables with ZML.

Raw

Raw temporarily disables tag processing. This is useful for generating content (eg, Mustache, Handlebars) which uses conflicting syntax but may not have much usefulness within content end users will see.

Input

{% raw %}

In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

{% endraw %}

Output

In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

Variable

Variable tags create new ZML variables.

Assign

Creates a new variable.

Input

{% assign my_variable = false %}

{% if my_variable != true %}

This statement is valid.

{% endif %}

Output

This statement is valid.

Wrap a variable in quotations " to save it as a string.

Input

{% assign foo = "bar" %}

{{ foo }}

Output

bar

Capture

Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through {% capture %} are strings.

Input

{% capture my_variable %}I am being captured.{% endcapture %}

{{ my_variable }}

Output

I am being captured.

Using capture, you can create complex strings using other variables created with assign.

Input

{% assign favorite_food = 'pizza' %}

{% assign age = 35 %}

{% capture about_me %}

I am {{ age }} and my favorite food is {{ favorite_food }}.

{% endcapture %}

{{ about_me }}

Output

I am 35 and my favorite food is pizza.

Increment

Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.

Input

{% increment my_counter %}

{{my_counter}}

{% increment my_counter %}

{{my_counter}}

{% increment my_counter %}

{{my_counter}}

Output

0

1

2

Variables created through the increment tag are independent from variables created through assign or capture.

In the example below, a variable named “var” is created through assign. The increment tag is then used several times on a variable with the same name. Note that the increment tag does not affect the value of “var” that was created through assign.

Input

{% assign var = 10 %} {% increment var %} {% increment var %} {% increment var %} {{ var }}

Output

10

Decrement

Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1. Like increment, variables declared inside decrement are independent from variables created through assign or capture.