Basic Usage

Handlebars are a low code way of being able to pass through information to templates and integrations. An example is below:

{{{ description }}}

<b>Ingredients:</b>
{{ ingredients }}

 The above entered in the Description mapping field will add the description of the product followed by the title of "Ingredients:" and the list of ingredients associated to a product. 

You will note the description has 3 curly braces {{{ }}}, this means the text will not be escaped. This is useful for fields like the description field which may contain HTML code within it. The 2 curly braces {{ }} used for the ingredients will be escaped. Escaping means any character in the field will be shown will be visible in the product description. Using 2 curly braces {{ }} on a field which contains HTML will lead to the HTML code itself being visible on the product page of the integration. 

You will also notice in the example we have included some HTML code. Basic HTML tags are supported such as <p><b><br><a> and a number of others. Some tags may be removed if not supported.

 

IF Statements

Supply'd also supports only showing information if there is a value present. For example if you wanted to show the ingredients and allergens only when they are present in Supply'd you could do the following:

{{{ description }}}
{{# ingredients }}<p><b>Ingredients:</b> {{ ingredients }}</p>{{/ ingredients }}
{{# allergens }}<p><b>Allergen Information:</b> {{ allergens }}</p>{{/ allergens }}

You will not we now have {{# field_name }} and {{/ field_name }} elements. The {{# field_name }} acts as an if statement, asking if the field has content then show the code between the {{# field_name }} and {{/ field_name }} elements. You must close a {{# field_name }} with the matching {{/ field_name }}.

 

Else Statements

You can also perform "else" scenarios, such as if there is a value present show X, else show Y. An example of how to do this is below:

{{{ description }}}
<p><b>Ingredients:</b> 
{{# ingredients }}
   {{ ingredients }}
{{/ ingredients }}
{{^ ingredients }}
   No ingredients listed
{{/ ingredients }}</p>
{{# allergens }}<p><b>Allergen Information:</b> {{ allergens }}</p>{{/ allergens }}

In this example we are asking to show the ingredients if they are present, else we will show the text "No ingredients listed". The else is signified by a ^ referring back to the related if statement. Any contents within the tags for {{^ XXXX }} {{/ XXXX }} will be shown if there is no result for the related if statement. 

 

Templates

For templating, some more advanced options are available to use. In particular there is a number of functions which can perform manipulations of your data. 

 

Functions

Below are a list of functions that are available to use within templating in Supply'd.

{{# trim }} Trim Whitespace Around Me {{/ trim }}
{{# strtolower }} Convert Me to All Lowercase {{/ strtolower }}
{{# strtoupper }} Convert Me to All Uppercase {{/ trim }}
{{# truncate_20 }} Truncate the text to 20 characters {{/ truncate_20 }}
{{# truncate_40 }} Truncate the text to 40 characters {{/ truncate_40 }}
{{# truncate_50 }} Truncate the text to 50 characters {{/ truncate_50 }}
{{# truncate_60 }} Truncate the text to 60 characters {{/ truncate_60 }}
{{# truncate_75 }} Truncate the text to 75 characters {{/ truncate_75 }}
{{# truncate_100 }} Truncate the text to 100 characters {{/ truncate_100 }}
{{# truncate_150 }} Truncate the text to 150 characters {{/ truncate_150 }}
{{# truncate_200 }} Truncate the text to 200 characters {{/ truncate_200 }}

As you can see, these functions are performed in the same way an IF statement is. Using any of these functions as a wrapper will manipulate the contents which can be text or handlebars. 

Below the template editor will be a list of handlebars available for the selected template type. You can simply click on a handlebar you wish to use to copy it to your clipboard. You can then place it within your template as you wish. 

 

Product Descriptions

Under integration settings for WooCommerce, Shopify and Square you can now use Description Mapping to send additional information when syncing products. 

Available fields are as follows:

  • {{brand}}
  • {{name}}
  • {{size}}
  • {{category}}
  • {{{description}}}
  • {{ingredients}}
  • {{allergens}}
  • {{storage_type}}
  • {{manufacture_country}}
  • {{shelf_life}}
  • {{carton_qty}}
  • {{carton_size}}
  • {{carton_weight}}

 

You can use these handlebars in tandem with HTML content to customise how descriptions are sent to a third party. HTML is not supported on some integrations such as Square.

Any changes applied to the description mapping will only apply when the product is next synced. If the product is not modified it will not sync automatically.