Skip to main content

Handlebars Helpers

In order to make it easier to create unique templates in handlebars, we've extended the built-in helpers with all helpers available in https://github.com/helpers/handlebars-helpers.

We've also created a few of our own that we think are useful for creating templates.

findObject​

Helps you get an object from an array based on a key and a value, this can be used if you want to merge data from your customQuery with the data from the event payload.

The following examples show how to get an image (from your custom query) for each product in your order.items.

#with is a handlebars native helper that allows you to scope 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​

Allow you to get a list of values from an array based on a key of the objects in the array.

This is handy when you want to extract a list of productIds from the orderItems to use in your queryVariables.

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

toLocaleString​

Used to convert any value into a locale string representation. Handy to display dates and numbers (currency format).

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

utcDateFormat​

Helps to convert a UTC data to a timezone specific date.

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

glue​

Helps to glue multiple strings together with a delimiter (first argument). Will remove extra whitespaces created by null/undefined/empty values.

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