Shoperb for Developers

# Liquid Filters

Filters are simple methods, which modify your data. Filters have the following syntax:

{{ product.title | upcase }}

OUTPUT:

PINK DRESS

where upcase is a filter (which is just a method), product is an object, which is supplied for your template, and title is a property of this object.

Sometimes you might want to pass a parameter to your filter:

{{ product.description | truncate: 40 }}

OUTPUT:

This product has long description, whic

(which is a text, truncated to only first 40 characters).

In case it you want to pass several parameters to a filter:

{{ product.description | truncate: 40, '...' }}

OUTPUT:

This product has long description, w...

You can always concatenate several filters. They are applied from left to right.

{{ product.description | upcase | truncate: 40, '...' }}

OUTPUT:

THIS PRODUCT HAS LONG DESCRIPTION, W...

You can find the list of all available filters below:

# json

Displays your object in a json form; only work on collections.

Example:

{{ category | json }}

Output:

{ "id": 1, "handle": "shoes", "name": "Shoes"}

# money

Displays a number with a store currency symbol or its code. Cents precision is '0' if the number if whole, and '2' otherwise.

Example:

{{ product.price | money }}

Output: $15

# money_with_currency

Displays a number with a store currency code and symbol.

Example:

{{ product.price | money_with_currency }}

Output: $15.00 USD

# money_with_cents

Same as money, but cents precision is always '2'.

Example:

{{ product.price | money_with_cents }}

Output: $15.00

# money_without_currency

Just formatted number.

Example:

{{ product.price | money_without_currency }}

Output: 15.00

# without_cents

Price without cents.

Example:

{{ product.price | without_cents }}

Output: 14

# weight_with_unit

Item weight with correct unit

Example:

{{item.weight | weight_with_unit}}

Output: 2 kg

with precision points:

{{item.weight | weight_with_unit: 2}}

Output: '2.00 kg'

# dimension_with_unit

Item dimensions with correct unit

Example:

{{item.weight | dimension_with_unit}}

Output: 2 cm

# upcase

Upcases text.

Example:

{{ product.title | upcase }}

Output: PINK DRESS

# downcase

Downcases text.

Example:

{{ product.title | downcase }}

Output: pink dress

# titleize

Titleizes text.

Example:

{{ product.title | titleize }}

Output: Pink Dress

# size

Length of string.

Exmaple:

{{ "Shoes" | size }}

Output: 5

# date

Formats date, using ruby formatting options.
Formatting available here: ruby date reference (opens new window)

Example:

{{ product.created_at | date }}

Output: 2018-01-01

Example:

{{ 'now' | date: '%d %b %Y' }}

Output: 13 Sep 2018 (today's date)

# pluck

Fetches a specific value from collection.

Example:

{{ products | pluck: 'name' }}

Output: ["Shoes", "Hats", "Dresses"]

# numeric

Casts string to number.

Example:

{{ '4' | numeric }}

Ouput: 4

# plus

Adds up another number.

Example:

{{ 4 | plus: 1 }}

Ouput: 5

# minus

Substracts another number.

Example:

{{ 4 | minus: 1 }}

Ouput: 3

# times

Multiplies by another number.

Example:

{{ 5 | times: 5 }}

Output: 25

# append

Append a string:

{{ "a" | append: "b" }}

Output: ab

# prepend

Prepend a string. Adds a string to the beginning of the specified string.

{{ "a" | prepend: "b" }}

Output: ba

# escape

Escapes html

Example:

{{ '<span class="large">Hello World</span>' | escape }}

Output:

<span class="large">Hello World</span>

# divided_by

Integer division by the specified number. The result is rounded down to the nearest integer.

{{ 11 | divided_by: 5 }}

Output: 2

# first

Fetches first element of an array.

{% assign array = "shoes, hat, pants, shirt" | split: ", " %}

{{ array.first }}

Output: shoes

can also be used to fetch first drop in a collection:

{% assign product = products.first %}

{{ product }}

Output: ProductDrop

# last

Fetches last element of an array.

{% assign array = "shoes, hat, pants, shirt" | split: ", " %}

{{ array.last }}

Output: shirt

# floor

Rounds a number down to the nearest integer.

{{ 4.0 | floor }}

Output: 4

{{ 22.512 | floor }}

Output: 22

# ceil

Rounds a number up to the nearest integer.

{{ 4.0 | ceil }}

Output: 4

{{ 22.512 | ceil }}

Output: 23

# join

Joins elements of an array into a single string using the argument as a separator.

{% assign cars = "BMW, Audi, Mercedes, Volkswagen" | split: ", " %}

{{ cars | join: " or " }}

Output: BMW or Audi or Mercedes or Volkswagen

# lstrip

Removes all whitespaces (spaces, tabs and newlines) from the the left side of a string. Does not affect spaces between the words.

{{ "          Shoperb is a dream to use!          " | lstrip }}

Output:

"Shoperb is a dream to use!          "

# map

Creates an array of values by extracting the values of a named property from another object.

Example:

{% assign names = products | map: 'name' %}
{% for name in names %}
  {{ name }}<br>
{% endfor %}

# modulo

Returns the remainder of a division.

{{ 25 | modulo: 8 }}

Output: 1

{{ 123.456 | modulo: 12 }}

Output: 3.456

# newline_to_br

Converts newlines to <br>

# remove

Remove each occurance from the string

{{ "ababab" | remove: 'a' }}

Output: bbb

# remove_first

{{ "ababab" | remove_first: 'a' }}

Output: babab

Remove first occurnace from the string

# replace

Replaces each occurance of string with another string

{{ "ababab" | replace: 'c' }}

Output: cbcbcb

# replace_first

Replaces first occurance of string with another string

{{ "ababab" | replace_first: 'c' }}

Output: cbabab

# reverse

Reverses string

{{ "string" | reverse }}

Output: gnirts

# round

Rounds up integer

{{ 14.6 | round }}

Output: 15

# rstrip

Removes all whitespaces (spaces, tabs and newlines) from the the right side of a string. Does not affect spaces between the words.

{{ "          Shoperb is a dream to use!          " | rstrip }}

Output:

          Shoperb is a dream to use!

# slice

Returns a substring of 1 character beginning at the index specified by the first argument. An optional second argument specifies the length of the substring to be returned. If the first argument is a negative number, the indices are counted from the end of the string:

{{ "hello" | slice: -3, 3 }}

Ouput: llo

# split

Creates an array from a string, using the first argument as a separator

{{ "a;b;a" | split: ';' }}

Ouput: ["a", "b", "c"]

# strip_html

Removes html tags from string

{{ "<p>Hello</p>" | strip_html }}

Output: Hello

# truncate

Truncates a string to X letters, ending with ellipsis (included in number of characters)

{{ "truncate" | truncate: 5 }}

Output: tr...

to truncate without ellipsis, or changing it, you need to pass suffix or empty string

{{ "truncate" | truncate: 5, ""}}

Output: trunc

# truncatewords

Truncates a string to X words.

Example:

{{ "Shoperb is a dream to use!" | truncatewords: 4 }}

Output:

Shoperb is a dream...

a second argument can be added to change the ellipsis:

{{ "Shoperb is a dream to use!" | truncatewords: 4, "" }}

Shoperb is a dream

# sort

Sorts data in given array or hash. If you have array of objects then you can send a property to sort by it. If you have hash then you can send variable "key" or "value" to sort by key of value.

Examples:

{% assign arr = "c,b,a" | split "," %}
{{arr | sort}} #=> ["a","b","c"]

{% assign arr_arr = [Product#(handle: "b"),Product#(handle: "a")] %}
{{arr_arr | sort: "handle"}} #=> [Product#(handle: "a"),Product#(handle: "b")]

{% assign hash = {b: :b, a: :a} %}
{{hash | sort: "key"}} => {a: :a, b: :b}

# url_encode

Convert url to encoded url string

Example:

{{ 'https://shoperb.dev' | url_encode }}

Output:

https%3A%2F%2Fshoperb.dev

Link to category. Requires an category drop

Example:

{{ category | link_to_category }}

Link to product. Requires an product drop

Example:

{{ product | link_to_order }}

# link_to_page

Link to page. Requires an page drop

Example:

{{ page | link_to_page }}

Link to collection. Requires an collection drop

Example:

{{ collection | link_to_collection }}

Link to order. Requires an order drop

Example:

{{ Order | link_to_order }}

Link to current page, in given locale

Example: (on page /account)

{{ 'Eesti' | link_to_locale: 'ee' }}

Output:

<a href="/ee/account">Eesti</a>

Link to home page in current language

Example:

{{ 'Home Page' | link_to_root }}

Output:

<a href="/">Home Page</a>

Create a link to a url.

{{ 'Shoperb' | link_to: 'https://shoperb.com' }}

Output:

<a href="https://shoperb.com">Shoperb</a>

← Liquid Drops →