Product template model - Voyado Elevate Docs

The template model defines attribute names and functions that can be used inside the template. The base model is a product. It allows access to product attributes including price and title. The template model also allows for advanced features such as data manipulation and accessing settings or URL parameters.

The template model introduces advanced features. The most important part of the template model is how it treats values and how they can be used. For more information, see Conditional content.

Product

Product attributes can be accessed from product, a top-level field of the template model. The following product attributes are available:

brand
custom_{attribute_name} — a custom attribute is prefixed with custom_
department
discount
image
listPrice
pattern
rating
releaseDate
sellingPrice
swatches
thumbnails
title
url

It isn’t required to write the product prefix each time, such as in {{product.sellingPrice}}. The prefix can be omitted if the attribute is inside the product context. In the example below, both sellingPrice and discount will be treated as product attributes.

{{#product}}
    {{#discount}}{{sellingPrice}}{{/discount}}
{{/product}}

However, when nesting contexts it is important to be careful, as there is a risk of missing product attributes. In the example below, product does not contain cmp or string as product attributes. This is because cmp is a top-level field that itself contains string.

{{#product}}
    {{#cmp}}{{string}}{{/cmp}}
{{/product}}

Lambda expressions

Lambda expressions come directly from Mustache. The value for the key of a section can be either a function or a lambda expression. The complete lambda expression is invoked by passing the content within the section itself as a parameter to the lambda expression.

All functions use a common syntax with the colon character, :, as an argument separator. If a source argument can contain a colon, all arguments should have colons present. If the last argument is an empty string or contains only space characters, an additional colon should be added.

ellipsis

An ellipsis, ..., is used to shorten a string. Always set the maximum length of a string before shortening it. Compared to the CSS3 text-overflow: ellipsis, the ellipsis function works on a template level but cannot measure the text size.

Syntax

{{#ellipsis}}{source}:{max-len}{{/ellipsis}}

Description

{source} — Any string, for example {{product.description}}. {max-len} — The maximum number of characters before the ellipsis is inserted.

Example

Template	Result
`{{#ellipsis}}12345:5{{/ellipsis}}`	12345
`{{#ellipsis}}1 2345678910:5{{/ellipsis}}`	1 234…
`{{#ellipsis}}1  2345678910:5{{/ellipsis}}`	1 23…

encodeUri

The encodeUri lambda section encodes a URI by replacing each instance of certain characters with one, two, three, or four escape sequences representing the UTF-8 encoding of the character. There will only be four escape sequences for characters composed of two “surrogate” characters.

Syntax

{{#encodeUri}}{URI}{{/encodeUri}}

Example

Template
Result

{{#encodeUri}}https://example.com/path with spaces?q=^|^{{/encodeUri}}

https://example.com/path%20with%20spaces?q=%5E%7C%5E

encodeUriComponent

The encodeUriComponent lambda section encodes a URI component. It encodes spaces and the following special characters: ,/?:@&=+$#

Syntax

{{#encodeUriComponent}}{URI}{{/encodeUriComponent}}

Example

Template
Result

{{#encodeUriComponent}}?x=te + st&{{/encodeUriComponent}}

%3Fx%3Dte%20%2B%20st%26

escapeHtml

The escapeHtml lambda section escapes special HTML characters. By default, all product attributes are escaped, but this can be disabled.

Raw	Escaped
`"`	`"`
`'`	`'`
`&`	`&`
`<`	`<`
`>`	`>`

Syntax

{{#escapeHtml}}{text}{{/escapeHtml}}

Example

Template
Result

{{#escapeHtml}}<tagInText>{"json":true}</tagInText>{{/escapeHtml}}

&lt;tagInText&gt;{&quot;json&quot;:true}&lt;/tagInText&gt;

escapeColon

The escapeColon lambda section escapes a colon, :, character. Colons will be replaced by :.

Syntax

{{#escapeColon}}{text possibly containing a colon character}{{/escapeColon}}

Example

Inline styles require a colon character. To use one inside a lambda expression with arguments, colons should be escaped. In the following example, {{product.sellingPrice}} will be the sole argument of the formatDecimal function.

{{#formatDecimal}}
%q
{{#escapeColon}}
<div class="fraction" style="background: url('{{product.fraction_image}}')"/>
{{/escapeColon}}
%r
</div>
:{{product.sellingPrice}}
{{/formatDecimal}}

formatDecimal

The formatDecimal lambda section provides the ability to add styles for the integer and fractional parts separately. This function can be used for currency and mostly overrides the functionality of formatPrice.

Syntax

{{#formatDecimal}}{format}:{decimal value}[:{source decimal separator}[:{result decimal separator}]]{{/formatDecimal}}

Description

{format} — Formats a string. The format specifiers work with one value, and some of them are used as predicates in the resulting pattern. For more information, see Format details. {decimal value} — The decimal value to format. {source decimal separator} — The decimal separator used to split the integer and fractional parts in the input decimal value. The dot, ., is used by default. {result decimal separator} — The decimal separator to be printed instead of a %s format specifier. The {source decimal separator} is used by default.

Format details

%[ [grouping symbol]]q — Prints the quotient of the decimal value. Can be grouped by thousands if it has a space, , flag and possibly a grouping symbol after it. %[c|d|u|n][0][-][{width}]r — Prints the remainder, that is, the fractional part, of the decimal value if the - flag is not present. Because of rounding, %r can be used only once, unlike %q or any other format specifier. c|d|u|n — The rounding mode. If {width} is present and the fractional part is longer than it, the value will be rounded and can even change the quotient value if, after rounding, the fractional part equals 1.

Rounding mode	Description
`c`	CEIL — always rounds the value up to the nearest integer.
`d`	HALF_DOWN — rounds the value down to the nearest integer, even when the value is `x.5`, for example `4.5` → `4.0`.
`u`	HALF_UP — rounds the value up to the nearest integer when the value is `x.5` and over, for example `4.5` → `5.0`. The default rounding mode.
`n`	NOTHING — no rounding is applied to the value.

0 — Flags that there is no need to display the fractional part if it is zero. - — Flags that the fractional part is present only to set rounding; nothing will be rendered. {width} — The number of digits to display. If there are not enough digits, the value will be padded with zeros. %s — A placeholder for the result decimal separator. Displays nothing if the 0 flag for the remainder is present and the remainder is zero. %i — A paired conditional specifier. If the value is an integer, displays the text after the first %i up to the next %i, or to the end of the {format} argument. %f — A paired conditional specifier. If the value has a non-zero fractional part, displays the text after the first %f up to the next %f, or to the end of the {format} argument. %% — Prints the percentage symbol, %.

Example

Show the fractional part of the price only if it isn’t zero. Set a two-digit position for the fractional part.

{{#formatDecimal}}<div class="price-integer">%q</div>%f<div class="price-fractional">%2r</div>:{{product.sellingPrice}}{{/formatDecimal}}

formatPrice

Formats a decimal value. Allows decimals to change to zero-fraction display, decimal separator, and/or add a grouping separator.

Syntax

{{#formatPrice}}{source}[:{zero fraction}[:{grouping separator}[:{result decimal separator}[:{source decimal separator}]]]]{{/formatPrice}}

Description

{source} — A decimal number. {zero fraction} — Defines behavior if the fractional part is zero. 0 — two zeros will be added after the decimal separator. 1 — cuts the zero fraction along with the decimal separator. Any other string will be printed instead of the decimal separator and fractional part. {grouping separator} — The character used as a thousands separator. Can only be one character, or no character at all. {result decimal separator} — The string printed between the integer and fractional parts in the result; . is used by default. {source decimal separator} — The decimal separator used to parse the original value.

Example

Template	Result	Description
`{{#formatPrice}}100.00{{/formatPrice}}`	100	Zero fraction cut by default.
`{{#formatPrice}}99,1:00:::,{{/formatPrice}}`	99.10	Non-standard decimal separator in the source value.
`{{#formatPrice}}253500:: :,{{/formatPrice}}`	253 500,00	Adding zero fraction, separating thousands by space, and using a non-standard decimal separator.
`{{#formatPrice}}15.0::~: :,{{/formatPrice}}`	15:~	Special ending zero fraction.

replace

Replaces each substring of a string that matches the literal target sequence with the specified literal replacement sequence. The replacement proceeds from the beginning of the string to the end. For example, replacing aa with b in the string aaa results in ba rather than ab.

Syntax

{{#replace}}{source}:{target}:{replacement}{{/replace}}

Description

{source} — The source string. {target} — The source substring to be replaced. {replacement} — The replacement value.

Example

Template	Result
`{{#replace}}abbab:ab:a{{/replace}}`	aba

replaceFirst

Replaces the first substring of this string that matches the literal target sequence with the specified literal replacement sequence. The replacement proceeds from the beginning of the string to the end. For example, replacing aa with b in the string aaa results in ba rather than ab.

Syntax

{{#replaceFirst}}{source}:{target}:{replacement}{{/replaceFirst}}

Description

{source} — The source string. {target} — The source substring to be replaced. {replacement} — The replacement value.

Example

Template	Result
`{{#replaceFirst}}abbab:ab:a{{/replaceFirst}}`	abab

replaceLast

Replaces the last substring of this string that matches the literal target sequence with the specified literal replacement sequence. The replacement proceeds from the beginning of the string to the end. For example, replacing aa with b in the string aaa results in ba rather than ab.

Syntax

{{#replaceLast}}{source}:{target}:{replacement}{{/replaceLast}}

Description

{source} — The source string. {target} — The source substring to be replaced. {replacement} — The replacement value.

Example

Template	Result
`{{#replaceLast}}abbab:ab:a{{/replaceLast}}`	abba

regexReplace

Replaces each substring of this string that matches the given regular expression with the given replacement.

Syntax

{{#regexReplace}}{source}:{regex}:{replacement}{{/regexReplace}}

Description

{source} — The source string. {regex} — The regular expression to which this string is matched. The decimal HTML entity : can be used instead of the colon character, :, in the regular expression. {replacement} — The string to be substituted for each match.

Example

Template	Result
`{{#regexReplace}}2020-04-01:(\d{4})-(\d{2})-(\d{2}):$3.$2.$1{{/regexReplace}}`	01.04.2020

regexReplaceFirst

Replaces the first substring of this string that matches the given regular expression with the given replacement.

Syntax

{{#regexReplaceFirst}}{source}:{regex}:{replacement}{{/regexReplaceFirst}}

Description

Example

In this example, the first number of the source string is known to be a brand ID, but the string contains other numbers as well, and the brand ID needs to be replaced with the brand name. The source string can contain colon characters, :.

Template
Model
Result

{{#regexReplaceFirst}}Brand: 13179, Article: 107882:\d+:{{product.brand_name}}{{/regexReplaceFirst}}

product.brand_name = "Seafall"

Brand: Seafall, Article: 107882

slice

Extracts part of a string starting from the beginning (index inclusive) up to the end (index exclusive). Safe to use with arguments outside the source string’s bounds.

Syntax

{{#slice}}{source}:{begin}[:{end}]{{/slice}}

Description

{source} — The source string to be sliced. {begin} — The zero-based index at which to begin extraction. A negative index can be used to indicate an offset from the end of the source string. Default value is 0. {end} — The zero-based index before which to end extraction. A negative index can be used to indicate an offset from the end of the source string. Default value is the source string’s length.

Example

Template	Result
`{{#slice}}01234:3{{/slice}}`	34
`{{#slice}}01234:-2{{/slice}}`	34
`{{#slice}}01234::-1{{/slice}}`	34
`{{#slice}}01234:-3:-1{{/slice}}`	23
`{{#slice}}01234:1:2{{/slice}}`	1
`{{#slice}}01234:3:10{{/slice}}`	34 (arguments can be out of the source’s bounds)
`{{#slice}}01234:5:-1{{/slice}}`	(empty)

trim

Removes whitespace from both ends of a string. Can be used when combining values after a replacement.

Syntax

{{#trim}}{source}{{/trim}}

Example

Template
Model
Result

{{#formatPrice}}{{#trim}}{{store.operation1}}{{/trim}}.{{#trim}}{{store.operation2}}{{/trim}}:: :{{/formatPrice}}

store.operation1 = "1000    "
store.operation2 = "    39  "

1 000.39

URL

Each user request URL query parameter can be accessed through the url top-level template model field. It contains an all field, which prints a query string excluding special parameters such as campaign, position, block, customer_key, timestamp, ts, mobile, and products. This field plays an important role in product image templates. Different images will be used for different values of the query parameters used.

Settings

The settings field allows access to template configuration.

enableHtmlEscape

The enableHtmlEscape lambda section enables or disables product attribute escaping. It is enabled by default, and all product attributes are escaped automatically. It can be disabled at any time by providing false as an argument: {{#settings.enableHtmlEscape}}false{{/settings.enableHtmlEscape}}. After manipulating the raw value, it is possible to escape the result manually. HTML escaping can be enabled again by providing true or an empty string as an argument.

Conditions

Conditions can be used to compare and test values to change things in the template. The cmp field contains several lambdas for comparisons, and one field to store the result.

test

This field contains the result of the comparison operation and is an integer value. Zero, 0, means the compared values are equal. A value greater than zero means the first value is bigger, and a value less than zero means the first value is smaller than the second.

string

Compares two strings lexicographically. The comparison is based on the Unicode value of each character in the strings. The character sequence represented by the first string is compared lexicographically to the character sequence represented by the second string. The result is a negative integer if the first string lexicographically precedes the second string, a positive integer if it follows the second string, and zero, 0, if the strings are equal.

Syntax

{{#cmp.string}}{value1}:{value2}{{/cmp.string}}

Example

All examples are made inside the {{#cmp}} section.

Template	`{{cmp.test}}`
`{{#string}}#000000:#000000{{/string}}`	0
`{{#string}}aqua:sand{{/string}}`	-18

str

Shortcut for string.

integer

Compares two int values numerically. The test result is 0 if value1 == value2, less than 0 if value1 < value2, and greater than 0 if value1 > value2.

Syntax

{{#cmp.integer}}{value1}:{value2}{{/cmp.integer}}

decimal

Compares two decimal values numerically. The test result is 0 if value1 == value2, -1 if value1 < value2, and 1 if value1 > value2.

Syntax

{{#cmp.decimal}}{value1}:{value2}{{/cmp.decimal}}

testEq

A boolean value indicating that the last comparison was between two identical values. It is true when the test field is 0; {{#testEq}} is equivalent to {{^test}}.

testAbove

A boolean value indicating that test > 0.

testBelow

A boolean value indicating that test < 0.

testAE

A boolean value indicating that test is equal to or above 0.

testBE

A boolean value indicating that test is equal to or below 0.

intSub

Subtracts one integer value from another. The test field is an int value and can store the result of any integer arithmetic operation. More complex operations can be done with combinations of the calc field, the store field, and the iterator field.

Syntax

{{#cmp.intSub}}{value1}:{value2}{{/cmp.intSub}}

intAdd

Adds one integer value to another. The test field is an int value and can store the result of any integer arithmetic operation. More complex operations can be done with combinations of the calc field, the store field, and the iterator field.

Syntax

{{#cmp.intAdd}}{value1}:{value2}{{/cmp.intAdd}}

intDiv

Divides one integer value by another and stores the integer part of the operation in the test field. The test field is an int value and can store the result of any integer arithmetic operation. More complex operations can be done with combinations of the calc field, the store field, and the iterator field.

Syntax

{{#cmp.intDiv}}{value1}:{value2}{{/cmp.intDiv}}

intMod

Calculates the modulus of one integer value for another and stores the integer part of the operation in the test field. The test field is an int value and can store the result of any integer arithmetic operation. More complex operations can be done with combinations of the calc field, the store field, and the iterator field.

Syntax

{{#cmp.intMod}}{value1}:{value2}{{/cmp.intMod}}

Calculations

Allows for performing arithmetic operations.

intMax

Prints the maximum value of two integers.

Syntax

{{#calc.intMax}}{value1}:{value2}{{/calc.intMax}}

intMin

Prints the minimum value of two integers.

Syntax

{{#calc.intMin}}{value1}:{value2}{{/calc.intMin}}

intAdd

Prints the sum of two integers.

Syntax

{{#calc.intAdd}}{value1}:{value2}{{/calc.intAdd}}

intSub

Prints the difference between two integers.

Syntax

{{#calc.intSub}}{value1}:{value2}{{/calc.intSub}}

intDiv

Prints the integer part of the division between two integers.

Syntax

{{#calc.intDiv}}{value1}:{value2}{{/calc.intDiv}}

intMod

Prints the modulus of one integer for another.

Syntax

{{#calc.intMod}}{value1}:{value2}{{/calc.intMod}}

decimalMax

Prints the maximum of two decimals.

Syntax

{{#calc.decimalMax}}{value1}:{value2}{{/calc.decimalMax}}

decimalMin

Prints the minimum of two decimals.

Syntax

{{#calc.decimalMin}}{value1}:{value2}{{/calc.decimalMin}}

decimalAdd

Prints the sum of two decimals.

Syntax

{{#calc.decimalAdd}}{value1}:{value2}{{/calc.decimalAdd}}

decimalSub

Prints the difference between two decimals.

Syntax

{{#calc.decimalSub}}{value1}:{value2}{{/calc.decimalSub}}

decimalFromPercent

Calculates a percentage of the specified number. The rounding mode is defined by constants similar to those of Java RoundingMode .

Syntax

{{#calc.decimalFromPercent}}{value}:{percent}[:{RoundingMode}[:{precision}]]{{/calc.decimalFromPercent}}

Description

{value} — A decimal value. {percent} — A percent to calculate. {precision} — A whole number of digits. Default value is 10. {RoundingMode} — Specifies the rounding behavior. Default value is FLOOR.

Example

Template	Result
`{{#decimalFromPercent}}999.99:10{{/decimalFromPercent}}`	99.999

decimalPercent

Alias for decimalFromPercent.

decimalToPercent

Calculates the percentage of the first number relative to the second, that is, the part relative to the whole. The rounding mode is defined by constants similar to those of Java RoundingMode .

Syntax

{{#calc.decimalToPercent}}{part}:{whole}[:{RoundingMode}[:{precision}]]{{/calc.decimalToPercent}}

Description

{part} — A decimal value used to calculate what percentage of the whole it is. {whole} — A decimal value used to calculate what percentage of it the part value represents. {precision} — A whole number of digits. Default value is 10. {RoundingMode} — Specifies the rounding behavior. Default value is FLOOR.

Example

Template	Result
`{{#decimalToPercent}}5:10{{/decimalToPercent}}`	50

Iterator

Allows splitting any value and accessing any part separately. The first step is to split the value. Then the iterator field can be accessed through the collection extension.

split

Splits a string around matches of the given regular expression.

Syntax

{{#iterator.split}}{value}[:{regex}]{{/iterator.split}}

Description

{value} — Any value. {regex} — The delimiting regular expression. The decimal HTML entity : can be used instead of the colon character, :, in the regular expression.

Example

Splits the product selling price grouped by thousands and styles each group individually.

{{#iterator.split}}{{#formatDecimal}}%q:{{product.sellingPrice}}{{/formatDecimal}}: :{{/iterator.split}}
{{#iterator}}
<div class='price-group-{{-index}}'>{{.}}</div>
{{/iterator}}

Store

When the result of complex transformations needs to be used several times, it can be saved once into the store instead of repeating the transformation. The following example subtracts the percentage discount from the original price and stores it as sellingPrice.

{{#product}}
{{#calc}}
    {{#store.put.sellingPrice}}
        {{#decimalSub}}
            {{listPrice}}:
            {{#decimalPercent}}{{listPrice}}:{{discount}}:FLOOR{{/decimalPercent}}
        {{/decimalSub}}
    {{/store.put.sellingPrice}}
{{/calc}}
{{/product}}
...
{{store.sellingPrice}}

The store model consists of a map for results and several methods for storing results.

put

Allows adding named variables to the store map.

Syntax

{{#store.put.{name}}}{value}{{/store.put.{name}}}

Description

{name} — The name of the stored variable. The value is accessed using this name. A name cannot contain dots or consist only of space characters. {value} — Any value. A stored value will be trimmed.

get

Allows retrieving a value from the store.

Syntax

{{store.get.{name}}} — Name can be a reserved word (put, get, set). {{store.{name}}} — Name cannot be a reserved word. A name cannot contain dots or consist only of space characters.

set

If there is no need to name the variable, set can be used instead of put. This stores the default value, which can then be retrieved/printed by referencing {{store}}.

Syntax

{{#store.set}}{value}{{/store}}

Collection extension

The collection extension wraps a collection to allow selecting part of it. This is done using special lambda expressions.

minIdx

Sets the starting index of the wrapped collection. Numbering starts from 1.

Syntax

{{#{name}.minIdx}}{integer}{{/{name}.minIdx}}

maxIdx

Sets the maximum index of the wrapped collection. Numbering starts from 1.

Syntax

{{#{name}.maxIdx}}{integer}{{/{name}.maxIdx}}

selected

Direct access to the selected sub-collection. The collection extension wrap will iterate this object by default. In most cases there is no need for direct calls: {{#{name}.selected}}...{{/{name}.selected}} is equivalent to {{#{name}}}...{{/{name}}}, and {{{name}.selected.size}} equals {{#{name}.size}}.

all

Direct access to the wrapped collection. minIdx and/or maxIdx can be set to iterate over the whole collection without changing the back indexes.

idx

Direct access to elements.

Syntax

{{#{name}.idx.{number}}}{text}{{/{name}.idx.{number}}}

Example

Accesses the second element inside the iterator. This line will not be shown if the iterator only has one item.

{{#iterator.idx.2}}The second element value is "{{.}}"{{/iterator.idx.2}}

​Product

​Lambda expressions

​ellipsis

​Syntax

Description

​Example

​encodeUri

​Syntax

​Example

​encodeUriComponent

​Syntax

​Example

​escapeHtml

​Syntax

​Example

​escapeColon

​Syntax

​Example

​formatDecimal

​Syntax

​Description

​Format details

​Example

​formatPrice

​Syntax

​Description

​Example

​replace

​Syntax

​Description

​Example

​replaceFirst

​Syntax

​Description

​Example

​replaceLast

​Syntax

​Description

​Example

​regexReplace

​Syntax

​Description

​Example

​regexReplaceFirst

​Syntax

​Description

​Example

​slice

​Syntax

​Description

​Example

​trim

​Syntax

​Example

​URL

​Settings

​enableHtmlEscape

​Conditions

​test

​string

​Syntax

​Example

​str

​integer

​Syntax

​decimal

​Syntax

​testEq

​testAbove

​testBelow

​testAE

​testBE

​intSub

​Syntax

​intAdd

​Syntax

​intDiv

​Syntax

​intMod

​Syntax

Product

Lambda expressions

ellipsis

Syntax

Example

encodeUri

Syntax

Example

encodeUriComponent

Syntax

Example

escapeHtml

Syntax

Example

escapeColon

Syntax

Example

formatDecimal

Syntax

Description

Format details

Example

formatPrice

Syntax

Description

Example

replace

Syntax

Description

Example

replaceFirst

Syntax

Description

Example

replaceLast

Syntax

Description

Example

regexReplace

Syntax

Description

Example

regexReplaceFirst

Syntax

Description

Example

slice

Syntax

Description

Example

trim

Syntax

Example

URL

Settings

enableHtmlEscape

Conditions

test

string

Syntax

Example

str

integer

Syntax

decimal

Syntax

testEq

testAbove

testBelow

testAE

testBE

intSub

Syntax

intAdd

Syntax

intDiv

Syntax

intMod

Syntax

Calculations