Skip to main content

Mobile Commons: Advanced Liquid

Eric Shin
Updated
Environment

Mobile Commons




Resolution Summary

Provided Information on the Advanced Liquid




Details

All Filters

  • default - use a default value e.g. Dear {{ first_name | default: 'Customer' }}, #=> 'Dear Customer,'
  • date - format a date. See all supported date formats here
  • timezone - convert a date to a different timezone. Expects a timezone name parameter, eg ('Eastern' or 'Pacific'). Useful for converting UTC to a local time.
  • capitalize - capitalize words in the input sentence
  • downcase - convert an input string to lowercase
  • upcase - convert an input string to uppercase
  • first - get the first element of the passed in array
  • last - get the last element of the passed in array
  • join - join elements of the array with certain character between them
  • sort - sort elements of the array
  • map - map/collect an array on a given property
  • size - return the size of an array or string
  • escape - escape a string
  • escape_once - returns an escaped version of html without affecting existing escaped entities
  • strip - strip any whitespace from right and left of string (can also use lstrip and rstrip)
  • strip_html - strip HTML from string
  • strip_newlines - strip all newlines (\n) from string
  • newline_to_br - replace each newline (\n) with html break
  • replace - replace each occurrence e.g. {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'
  • replace_first - replace the first occurrence e.g. {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
  • remove - remove each occurrence e.g. {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'
  • remove_first - remove the first occurrence e.g. {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
  • timezone - convert timezone e.g. {{'2014-09-01 09:00:00 EDT' | timezone:'pacific'}}
  • truncate - truncate a string down to x characters
  • truncatewords - truncate a string down to x words
  • prepend - prepend a string e.g. {{ 'bar' | prepend:'foo' }} #=> 'foobar'
  • append - append a string e.g. {{ 'foo' | append:'bar' }} #=> 'foobar'
  • minus - subtraction e.g. {{ 4 | minus:2 }} #=> 2
  • plus - addition e.g. {{ '1' | plus:'1' }} #=> '11', {{ 1 | plus:1 }} #=> 2
  • times - multiplication e.g {{ 5 | times:4 }} #=> 20
  • divided_by - division e.g. {{ 10 | divided_by:2 }} #=> 5
  • split - split a string on a matching pattern e.g. {{ "a~b" | split:~ }} #=> ['a','b']
  • modulo - remainder, e.g. {{ 3 | modulo:2 }} #=> 1

 

Tags

Tags are used for the logic in your template.

Here is a list of currently supported tags:

  • if - Standard if/else block
  • assign - Assigns some value to a variable
  • capture - Block tag that captures text into a variable
  • case - Block tag, its the standard case...when block
  • comment - Block tag, comments out the text in the block
  • cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
  • for - For loop
  • include - Includes another template; useful for partials
  • raw - temporarily disable tag processing to avoid syntax conflicts.
  • unless - Mirror of if statement

 

Case Statement

If you need more conditions, you can use the case statement:

{% case condition %} {% when 1 %}

Hit 1

{% when 2 or 3 %}

Hit 2 or 3

{% else %}

Not a hit

{% endcase %}

 

Match Substrings, case sensitive

{% if string contains 'hello' %}

string includes 'hello'

{% endif %}

 

Regex

Regular expression matches are case-insensitive.

Example:

{% if first_name regex '\brobert|bob\b' %}

Your name is either Bob or Robert. Not Roberta

{% endif %}

 

Comments

Comment is the simplest tag. It just swallows content. 

Example: 

We made 1 million dollars {% comment %} in losses {% endcomment %} this year.

Inline Image

 

For Loops

Liquid allows for loops over collections.

Example:

{% for item in array %}
 {{ item }}
{% endfor %}

During every for loop, the following helper variables are available for extra styling needs:

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?

There are several attributes you can use to influence which items you receive in your loop

limit:int lets you restrict how many items you get. offset:int lets you start the collection with the nth item.

# array = [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
 {{ item }}
{% endfor %}
# results in 3,4

Reversing the loop

{% for item in collection reversed %} {{item}} {% endfor %}

Instead of looping over an existing collection, you can define a range of numbers to loop through. The range can be defined by both literal and variable numbers:

# if item.quantity is 4...
{% for i in (1..item.quantity) %}
 {{ i }}
{% endfor %}
# results in 1,2,3,4

 

Variable Assignment

You can store data in your own variables, to be used in output or other tags as desired. The simplest way to create a variable is with the assign tag, which has a pretty straightforward syntax:

{% assign states = 'NC, WA, OR, NV, ID, MT'%}
{% if states contains state %}
We have that state!
{% else %}
We don't have that state!
{% endif %}

Inline Image




Inline Image


Another way of doing this would be to assign true / false values to the variable:

{% assign freestyle=false %}
{% for t in collections.tags %}{% if t == 'freestyle' %}
 {% assign freestyle=true %}
{% endif %}{% endfor %}
{% if freestyle %}
 <p>Freestyle!</p>
{% endif %}

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, then assigns the captured value to the given variable instead of rendering it to the screen.

{% capture attribute_name %}{{ item.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>

 

Check Dates based on Today

Check if a date is greater than 14 days away. Days are calculated using seconds: 14 days * 24 hours * 60 minutes * 60 seconds = 1209600

{% assign today = 'now' | date: "%s" %}{% assign fourteen_days = 1209600 %}{% assign fourteen_days_from_now = fourteen_days | plus: today | date: "%Y-%m-%d" %}{% if my_date is_after fourteen_days_from_now %}Your date is after 14 days from now.{% else %}Your date is before 14 days from now.{% endif %}

Check if we're currently outside business hours:

{% assign hour = 'now' | date: '%H' | plus: 0 %}{%if hour > 8 and hour < 18 %}We're in the office!{%else%}We're closed :({%endif%}

Confirm required fields for a user in one message:

{% assign the_word_and = ''%}{% if email == null or dob == null or postal_code == null %}We just need one more thing. Plz reply with your {% if email == null %}{{the_word_and}}email{% assign the_word_and = ' and ' %}{% endif %}{% if dob == null %}{{the_word_and}}birthdate{% assign the_word_and = ' and ' %}{% endif %}{% if postal_code == null %}{{the_word_and}}zip{% assign the_word_and = ' and ' %}{% endif %}

Ask for birthdate and have liquid responses based on age:
Capture DOB in the first message, and then add to the second message:

{% capture time_now %}{{ 'now' | date: '%s' }}{% endcapture %}
{% capture time_dob %}{{ dob | date: '%s' }}{% endcapture %}
{% assign age = time_now |minus:time_dob | divided_by: 31536000 %}

{% if age >= 14 and age <= 28 %}

Great, anyone between the ages of 14 and 28 can register!

{% else %}

You must be between 14-28 to register – sorry!

{% endif %}

 

Ask for birthdate, capture the response to a date custom field and then use nested if statement to cover these scenarios:

-one message if under 25
-one message if  over 25
-one message if we don't have the age/birthdate saved to the custom field.

{% capture time_now %}{{ 'now' | date: '%s' }}

{% endcapture %}{% capture time_dob %}{{ dob | date: '%s' }}

{% endcapture %}{% assign age = time_now |minus:time_dob | divided_by: 31536000 %} 

{%if dob != null%}

  {% if age >25 %}

Message for the users over 25 

  {% elsif age <25 %}

Message for the users under  25 

  {%endif%}

{%elsif dob == null%}

Message for the users with no DOB saved

{%endif%}

Counter

Write a quiz and score it:
Create one custom yes/no type column for each quiz question, and save each response to your new custom column. Then, in the message you send back with the user's score/results:

{% assign counter = 0 %}{% if Q1 == 'Yes' %}{% assign counter = counter |plus: 1 %}{% endif %}{% if Q2 == 'Yes' %}{% assign counter = counter |plus: 1 %}{% endif %}{% if Q3 == 'Yes' %}{% assign counter = counter |plus: 1 %}{% endif %}{% if Q4 == 'Yes' %}{% assign counter = counter |plus: 1 %}{% endif %}{% if Q5 == 'Yes' %}{% assign counter = counter |plus: 1 %}{% endif %}
 {% if counter == 1 %} YOU GOT 1
 {% elsif counter == 2 %} YOU GOT 2 
 {% elsif counter == 3 %} YOU GOT 3 
 {% elsif counter == 4 %} YOU GOT 4 
 {% elsif counter == 5 %} YOU GOT 5 
 {% endif %}

Documentation adopted from the excellentLiquid for Designerswiki.


Liquid Webinar PDF




Internal Information


Resolution Category


Related articles