Skip to main content

Handlebars helpers

To make it easier to create templates, the built-in Handlebars helpers are extended with all helpers available in the handlebars-helpers library.

Propeller also provides a few custom helpers for common template tasks.

findObject​

Gets an object from an array based on a key and value. Useful for merging data from your customQuery with the event payload.

The following example shows how to get an image (from your custom query) for each product in your order items. #with is a native Handlebars helper that scopes the result of findObject in a product variable.

{{#each data.order.items}}
  <tr>
    <td>
      {{#with (findObject ../custom.products.items "productId" this.productId) as |product|}}
        {{!-- Now we have "product" instead of "this" --}}
        {{#if product}}
          <img src="{{product.media.images.items.[0].imageVariants.[0].url}}" />
        {{else}}
          <a href="http://www.propeller-commerce.com/img/image-not-found.png">
        {{/if}}
      {{/with}}
  </tr>
{{/each}}

mapValues​

Gets a list of values from an array based on a key of the objects in the array. Useful for extracting a list of productIds from the order items to use in your queryVariables.

{ "productIds": [{{mapValues data.order.items "productId"}}] }

toLocaleString​

Converts any value into a locale string representation. Useful for displaying dates and numbers in currency format.

<p>{{toLocaleString data.order.postageData.gross "nl-NL" style="currency" currency="EUR"}}</p>

utcDateFormat​

Converts a UTC date to a timezone-specific date.

<p>{{#utcDateFormat data.order.date "Europe/Amsterdam" "DD-MM-YYYY HH:mm:ss" }}</p>

glue​

Joins multiple strings together with a delimiter (first argument). Removes extra whitespace created by null, undefined or empty values.

<p>{{glue " " "string1" "string2" "string3"}}</p>

HTML decoding with triple braces​

Renders HTML content such as formatted text, HTML entities or markup from your data (e.g. &amp;, &lt;, &gt;, &quot;).

<p>{{{company &amp; co}}}</p>