Output Tags

Output tag

Output tag is used to output information. It looks like this: {{ output }}, and it displays or execute liquid statement that is found between its curly braces.

Filters

Filters manipulate what output tag generates. For example, if you want to show an amount of 289 and you want to display them in a currency format in Versaccounts.

You will write the liquid statement like this

{{ variablename | currency: invoice.currency }}

currency in this example is a filter and it manipulate the value stored in variablename and then
display a new format.

Filter types available are:

• Math Filters
• Manipulation filters
• Currency filters

Math filters

Math filters available are:

• times (input, operand)
• divided_by (input, operand)
• minus (input, operand)
• plus (input, operand)

times (input, operand)

Multiplies input by operand.

You save {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price }}%}

(Return to top of page)

divided_by (input, operand)

Divides input by operand. In the example below, operand is 2 and 100.0

output is {{ line.amount | times: 100.0 | divided_by: 2 }}%

(Return to top of page)

minus (input, operand)

Subtracts input from operand.

You save {{ product.compare_at_price | minus: product.price | money }}!

(Return to top of page)

plus (input, operand)

Adds input to operand.

Showing {{ paginate.current_offset }}-{{ paginate.current_offset | plus: paginate.page_size }} items.

(Return to top of page)

Manipulation filters

Manipulation filters available to you are:

• append (input)
• capitalize
• date (input, format)
• downcase
• first
• join (input, segmenter = '')
• last
• newline_to_br
• prepend
• remove
• remove_first
• replace
• replace_first
• size
• sort (input, property = nil)
• split
• strip
• lstrip
• rstrip
• truncate (input, characters = x)
• truncatewords (input, words = x)
• upcase
• as_text

append (input)

Use this filter to append characters to a string.

Input

{{ 'bob' | append: ' doe' }}

Output

bob doe

(Return to top of page)

capitalize

Capitalizes the first word of text

Input

{{ 'bob doe' | capitalize }}

Output

Bob doe

(Return to top of page)

date (input, format)

Changes the date format.

%a

%A

%b

%B

%c

%d

%-d

%e

%H

%I

%j

%K

%m

%M

%p

%S

%U

%W

%w

%x

%X

%y

%Y

%Z

%%

Combinations

{{ invoice.create_at| date: "%a, %b %d, %y" }}

(Return to top of page)

downcase

Converts text into lowercase.

Input

{{ 'BOB' | downcase }}

Ouput

bob

(Return to top of page)

first

Gets the first element in an array.

{{ invoice.invoice_items | first }}

(Return to top of page)

join (input, segmenter = '')

Joins an array with a specified character (e.g. ',').

Input

{{ names | join: ',' }}

Output

name1, name2, name3

(Return to top of page)

last

Gets the last element passed in an array.

{{ product.images | last }}

(Return to top of page)

newline_to_br

Inserts a <br /> linebreak tag in front of every \n line break character.

{{ comment | newline_to_br }}

(Return to top of page)

prepend

Prepends characters to a string.

Input

{{ 'sales' | prepend: 'get ' }}

Output

(Return to top of page)

remove

Removes all occurences of the substring from the input.

{{ "hello world" | remove: 'hello }}

(Return to top of page)

remove_first

Removes only the first occurence of the substring from the input.

{{ "hello world hello" | remove_first: 'hello' }}

(Return to top of page)

replace

Replaces all occurences of a string with another.

{{ product.description | replace: 'super', 'mega' }}

(Return to top of page)

replace_first

Replaces the first occurence of a string with another.

{{ product.description | replace_first: 'super', 'mega' }}

(Return to top of page)

size

Returns the size of a string or an array.

Input

{{ 'hello' | size }}

Output

5

(Return to top of page)

sort (input, property = nil)

Sort elements of the array provide optional property with which to sort an array of hashes or drops.

Example:

{% assign variants = product.variants | sort: 'price' %}
{% for variant in variants %}
  <li>{{ variant.title }} - {{ variant.price | money }}</li>
{% endfor %}

(Return to top of page)

split

Takes a string and divides it into substrings based on a delimiter.

{% assign words = "Uses cheat codes, calls the game boring." | split: ' ' %}
First word: {{ words.first }}
First word: {{ words[0] }}
Second word: {{ words[1] }}
Last word: {{ words.last }}
All words: {{ words | join: ', ' }}
{% for word in words %}
{{ word }}
{% endfor %}

Output

First word: Uses
First word: Uses
Second word: cheat
Last word: boring.
All words: Uses, cheat, codes,, calls, the, game, boring.
Uses
cheat
codes,
calls
the
game
boring.

strip

Strips tabs, spaces, and newlines (all whitespace) from the left and right sides of strings. Example:

{{ '   too many spaces      ' | strip }}

(Return to top of page)

lstrip

Strips tabs, spaces, and newlines (all whitespace) from the left side of strings. Example:

{{ '   too many spaces      ' | strip }}

(Return to top of page)

rstrip

Strips tabs, spaces, and newlines (all whitespace) from the right side of strings. Example:

{{ '   too many spaces      ' | strip }}

(Return to top of page)

truncate (input, characters = x)

Truncates a string down to 'x' characters.

{{ article.content | strip_html | truncate: 50 }}

(Return to top of page)

truncatewords (input, words = x)

Truncates a string down to 'x' words.

{{ article.content | strip_html | truncatewords: 20 }}

(Return to top of page)

upcase

Converts a string to UPPER CASE.

Input

{{ 'i want this to be uppercase' | upcase }}

Output

I WANT THIS TO BE UPPERCASE

(Return to top of page)

as_text

Display text and preserve line breaks in the text

Input

{{ 'text with line breaks' | as_text }}

(Return to top of page)

Currency filters

Money filters available to you are:

• currency

currency

Display a number according to the currency passed in.

{{ 33 | currency: USD_currency_object }}

Output

(Return to top of page)