You can personalize the content of your popups on the fly with dynamic variables. By using filters, you can apply transformations to the variables.

Syntax of filters

To apply a filter to a variable:

{{ variable | filter }}

Filters can take a parameter, as in the following:

{{ variable | filter: parameter }}

They can also be chained to combine multiple transformations:

{{ variable | filter1 | filter2 }}

List of available filters

default: Allows you to specify a fallback in case a value doesn’t exist.

{{ product.price | default: 99 }}

Output if product.price is not defined, or an empty string:

99

You can also use it for a first name:

Hi {{ customer.first_name  | default: "there" }}

You can change the case of strings with the following filters.

capitalize: Makes the first character of a string capitalized.

{{ "my sentence" | capitalize }}

Output:

My sentence

upcase: Makes each character in a string uppercase.

{{ "my sentence" | upcase }}

Output:

MY SENTENCE

downcase: Makes each character in a string lowercase.

{{ "My Sentence" | downcase }}

Output:

my sentence

Filters can also perform simple calculations.

plus: Adds a number to another number.

{{ 40 | plus: 2 }}

Output:

42

minus: Subtracts a number from another number.

{{ 40 | minus: 2 }}

Output:

38

round: Rounds a number to the nearest integer or, if a number is passed as an argument, to that number of decimal places.

{{ 40.155 | round: 2 }}

Output:

40.16

The following filters let you safely insert any content by escaping the variables.

escape: Escapes a string by replacing HTML special characters with escape sequences.

{{ "<b>my sentence</b>" | escape }}

Output:

&lt;b&gt;my sentence&lt;/b&gt;

url_encode: Converts any URL-unsafe characters into percent-encoded characters.

{{ "my sentence=123?" | url_encode }}

Output:

my%20sentence%3D123%3F

Did this answer your question?