Handlebars Helpers Reference
On this page
This is a reference for Stencil supported Handlebars helpers. It includes custom helper documentation and usage examples and a list of whitelisted standard helpers.
Custom helpers
BigCommerce’s open source helpers defined in paper-handlebars/helpers/ (GitHub).
Helper | Category | Description |
---|---|---|
limit | array | Limits array to second argument. |
pluck | array | Uses search key to get values from collections. |
cdn | assets | Url transform for content delivery networks. |
money | currency | Formats number length, thousands delimiter, and decimal delimiter. |
getFontLoaderConfig | fonts | Returns font loader config as JSON string. |
getFontsCollection | fonts | Returns <link> elements for configured fonts. |
encodeHtmlEntities | html | Encodes HTML entities. |
nl2br | html | Converts newline characters to <br> tags. |
pre | html | Renders preformatted text. |
resourceHints | html | Prefetch Google fonts. |
stylesheet | html | Renders link tag for inserting a stylesheet. |
lang | i18n | Maps keys to translation files. |
langJson | i18n | Returns language translation keys as JSON string. |
getContentImage | images | Returns sized image URL from store /content directory. |
getContentImageSrcset | images | Returns source set of URLs for images in /content . |
getImage | images | Returns image URL for specified size. |
getImageManagerImage | images | Returns sized image URL for /product_images/uploaded_images images.. |
getImageManagerImageSrcset | images | Returns image srcset for /product_images/uploaded_images images. |
getImageSrcset | images | Returns single image URL or list of URLs for different sizes. |
any | logic | Renders block if any params are true. |
all | logic | Renders block if all params are true. |
compare | logic | Compares values with JavaScript operators, including typeof . |
contains | logic | Renders block if first param is in second param. |
for | logic | Iterates for range a to b . |
if | logic | Renders block if statement is true. |
or | logic | Renders block if on more param evaluates to true. |
unless | logic | Renders block if statement is false. |
concat | string | Concatenates two strings. |
join | string | Joins array of string items; returns a string. |
json | string | JSON.stringify() s an object. |
replace | string | Replaces all instances of first param in second param. |
setURLQueryParam | string | Appends keys values to a URL. |
stripQuerystring | string | Removes query string. |
toLowerCase | string | Converts string to lowercase. |
truncate | string | Truncates a string. |
block | template | Defines a content block. |
dynamicComponent | template | Inserts dynamic partial at the path passed in. |
inject | template | Injects key values into jsContext. |
jsContext | template | Returns JSON for all data injected by inject helper. |
partial | template | Overrides content defined by a block helper. |
region | template | Specifies a widget region. |
assignVar | variables | Saves value to a variable. |
getVar | variables | Returns variable value. |
decrementVar | variables | Decrements a variable by 1. |
incrementVar | variables | Increments a variable by 1. |
{{limit}}
It limits the number of items returned from an array variable, and returns a new array.
Parameters
data
: {Array}limit
: {Number}
Example
Assume that {{cart.items}}
would return 10 items. You could use this helper to limit that behavior to only the first four items, by specifying:
{{#each (limit cart.items 4)}}
<li class="previewCartItem">
<div class="previewCartItem-image">
{{#if type '==' 'GiftCertificate'}}
<img src="{{cdn ../../theme_settings.default_image_gift_certificate}}" alt="GiftCertificate" title="GiftCertificate">
{{else}}
{{> components/common/responsive-img
image=image
fallback_size=../../theme_settings.productthumb_size
lazyload=../../theme_settings.lazyload_mode
default_image=../../theme_settings.default_image_product
}}
{{/if}}
...
{{pluck}}
For one specified search key(s), it retrieves corresponding values from some or all elements in a specified collection.
The pluck
helper returns the retrieved values in a comma-separated string. This helper’s general form is:
{{pluck ([limit] <collection> [<limit-value>]) '<search-key>'}}
Parameters
limit
,limit-value
: Optional parameters to limit the number of results returned.collection
: The collection to search.search-key
: The string to search for.
Example
If each category in categories
contains an image object, use dot notation to access the image’s children:
categories: [
{ "id": 1, "name": "Bakeware", "image": { "data": "http://...", "alt": "Bakeware image"} },
{ "id": 2, "name": "Cookware", "image": { "data": "http://...", "alt": "Cookware image"} },
{ "id": 3, "name": "Cutlery", "image": { "data": "http://...", "alt": "Cutlery image"} }
]
Handlebars statement:
{{pluck (limit categories 2) 'image.data'}}
<!-- Returns a comma-separated list of image URLs -->
{{cdn}}
A URL transformer for content delivery networks.
Example
When you reference static assets that you have locally staged outside your <theme-name>
directory and uploaded using WebDAV, place the webdav:
prefix before each corresponding assetPath
parameter. For example, a link like:
<img src="{{cdn 'webdav:img/image.jpg'}}">
will be transformed to a result like:
<img src="https://cdn.bcapp/3dsf74g/content/img/image.jpg">
The presumed WebDAV root directory is /content/
. (So, in this example, the image.jpg
file has been uploaded to the WebDAV /content/
directory.) The presumed local directory is assets/
, so you can omit that path when referencing its contained files or subdirectories.
CDN custom endpoints
You can define custom CDN endpoints to use with the cdn
helper. This facilitates including large, high-resolution image assets in themes, without exceeding BigCommerce’s 50 MB limit when bundling the theme for upload to BigCommerce.
You could use a local version of the image in development, and a version on a CDN (e.g. Imgix) in production. To do so, define custom CDN endpoints in your theme’s config.json file, as highlighted in the example below:
{
"name": "Cornerstone",
"version": "1.3.5",
"settings": {
"homepage_new_products_count": 12,
"homepage_featured_products_count": 8,
"cdn": {
"customcdn": "https://bigcommerce.customcdn.net"
}
}
}
After defining an endpoint, you can use the short name in the same way as you would use a webdav:
abbreviation:
<img src="{{cdn 'customcdn:img/image.jpg'}}" />
In local development, that helper would return:
<img src="/assets/cdn/customcdn/img/image.jpg"/>
Whereas in production, it would return:
<img src="https://bigcommerce.customcdn.net/img/image.jpg" />
As highlighted above, the helper is configured to rewrite local URLs to a assets/cdn/
subfolder. The stencil bundle
command will exclude this local assets/cdn/
subfolder from the bundle that it creates. This filtering circumvents the 50 MB size limit on the resulting .zip file.
{{money}}
Format number length, thousands delimiter, and decimal delimiter.
{{getFontLoaderConfig}}
Returns font loader config as JSON string.
{{getFontsCollection}}
Returns <link>
elements for configured fonts.
{{encodeHtmlEntities}}
Encodes HTML entities.
{{nl2br}}
Converts newline characters to <br>
tags.
Example
{{nl2br settings.address}}
settings.address
:
"settings": {
"address": "\r\n685 Market St\r\nSan Francisco\r\n94105\r\nCA\r\n"
}
Result:
"<br>685 Market St<br>San Francisco<br>94105<br>CA<br>"
{{pre}}
Renders preformatted text.
{{resourceHints}}
Pre-fetches fonts; currently only supports Google fonts.
Parameters
returns
: Outputs a formattedlink
tag for DNS-prefetch.
Example
{{{resourceHints}}}
//=> <link rel="dns-prefetch" href="https://fonts.gstatic.com/" >
{{stylesheet}}
It renders a link tag to insert a stylesheet into your theme. (This is required if you want Theme Editor to rewrite the stylesheet file when a merchant customizes their theme.) This helper returns an HTML string.
Parameters
- path: String containing the path to the theme’s CSS stylesheet file.
- Other parameters are optional, appended in the form:
key="value"
.
Example
{{{stylesheet "assets/css/style.css" class="myStylesheet"}}}
{{lang}}
Maps keys to translation files, based on the locale indicated by the visitor’s browser. Its parameters are the following keys:
translationKey
: a string.options
: key-value pairs.
Example
<label class="form-label" for="search_query_adv">
{{lang 'forms.search.query' }}
<small>{{lang 'common.required' }}</small>
</label>
{{langJson}}
Returns language translation keys as JSON string.
{{getContentImage}}
Returns URL for an image uploaded to /dav/content/
.
Parameters
a
{String}: Image path relative to/dav/content/
width
{Int}: Width in pixelsheight
{Int}: Height in pixels
Example
<!-- Original image URL returned if no size or invalid size is passed in -->
{{getContentImage "asset.jpg"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/content/asset.jpg -->
{{getContentImage "asset.jpg" width="a" height="a"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/content/asset.jpg -->
<!-- Sized image URL returned if valid height and/or width passed in -->
{{getContentImage "asset.jpg" width=123 height=321}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123x321/content/asset.jpg -->
{{getContentImage "asset.jpg" width=123}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123w/content/folder/asset.jpg -->
{{getContentImageSrcset}}
Returns a srcset
for an image uploaded to /dav/content/
.
Parameters
a
{String}: Image path relative to/dav/content/
Example
{{getContentImageSrcset "asset.jpg"}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/content/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/content/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/content/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/content/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/content/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/content/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/content/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/content/asset.jpg 2560w
-->
{{getContentImageSrcset "folder/asset.jpg" width=123}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/content/folder/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/content/folder/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/content/folder/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/content/folder/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/content/folder/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/content/folder/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/content/folder/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/content/folder/asset.jpg 2560w
-->
{{getImage}}
Returns an <img>
tag src
value for images of the specified size. Values for the size parameter are defined in the settings
array in config.json
.
Parameters
stencilImage
: a StencilImage.size
: a string referencing a key in thetheme_settings
object.defaultImage
(optional): a string.
You can use the optional defaultImage
parameter to specify an image that will be displayed in cases where the passed stencilImage
value is null.
Example
{{getImage image "thumbnail"}}
{{getImageManagerImage}}
Returns an Image Manager image URL for an image uploaded to /dav/product_images/uploaded_images
.
Parameters
a
{String}: Image path relative to/dav/product_images/uploaded_images
width
{Int}: Width in pixelsheight
{Int}: Height in pixels
Example
<!-- Original image URL returned if no size or invalid size is passed in -->
{{getImageManagerImage "asset.jpg"}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/image-manager/asset.jpg -->
{{getImageManagerImage "folder/asset.jpg" height=123}} <!-- height must be accompanied by width -->
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/original/image-manager/folder/asset.jpg -->
<!-- Sized image URL returned if valid height and/or width passed in -->
{{getImageManagerImage "asset.jpg" width=123}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123w/image-manager/asset.jpg -->
{{getImageManagerImage "folder/asset.jpg" width=123 height=321}}
<!--=> https://cdn.bcapp/3dsf74g/images/stencil/123x321/image-manager/folder/asset.jpg -->
{{getImageManagerImageSrcset}}
Returns an Image Manager image srcset
for an image uploaded to /dav/product_images/uploaded_images
.
Parameters
a
{String}: Image path relative to/dav/product_images/uploaded_images
Example
{{getImageManagerImageSrcset "asset.jpg"}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/image-manager/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/image-manager/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/image-manager/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/image-manager/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/image-manager/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/image-manager/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/image-manager/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/image-manager/asset.jpg 2560w
-->
{{getImageManagerImageSrcset "folder/asset.jpg" width=123}}
<!--=>
https://cdn.bcapp/3dsf74g/images/stencil/80w/image-manager/folder/asset.jpg 80w, https://cdn.bcapp/3dsf74g/images/stencil/160w/image-manager/folder/asset.jpg 160w, https://cdn.bcapp/3dsf74g/images/stencil/320w/image-manager/folder/asset.jpg 320w, https://cdn.bcapp/3dsf74g/images/stencil/640w/image-manager/folder/asset.jpg 640w, https://cdn.bcapp/3dsf74g/images/stencil/960w/image-manager/folder/asset.jpg 960w, https://cdn.bcapp/3dsf74g/images/stencil/1280w/image-manager/folder/asset.jpg 1280w, https://cdn.bcapp/3dsf74g/images/stencil/1920w/image-manager/folder/asset.jpg 1920w, https://cdn.bcapp/3dsf74g/images/stencil/2560w/image-manager/folder/asset.jpg 2560w
-->
{{getImageSrcset}}
The getImageSrcset
helper is a replacement for getImage
which allows you to generate either a single image URL (for an <img>
src
) or a list of image sizes for srcset
. Srcset allows you to specify a list of sizes from which the browser may choose, based on the expected size of the image on the page, the device’s pixel density, and other factors.
Similar to getImage
, it accepts an stencilImage
parameter, and optionally, a defaultImage
to use as a fallback.
Parameters
stencilImage
: a StencilImagedefaultImage
: a fallback image URL to use if the StencilImage is undefined.- Image sizes specified as named parameters on the helper
You can then specify what sizes you want as named arguments on the helper.
Examples
Default sizes
By specifying use_default_sizes=true
on the helper, a srcset
string will be constructed with a set of sizes chosen by BigCommerce to be optimal for most uses.
{{getImageSrcset image use_default_sizes=true}}
{{getImageSrcset image "https://place-hold.it/500x300" use_default_sizes=true}}
Default sizes:
'80w': '80w',
'160w': '160w',
'320w': '320w',
'640w': '640w',
'960w': '960w',
'1280w': '1280w',
'1920w': '1920w',
'2560w': '2560w',
Single 1x size
{{getImageSrcset image 1x=theme_settings.zoom_size}}
{{getImageSrcset image 1x="1280x800"}}
{{getImageSrcset image 1x="1280w"}}
By specifying a single size as the ‘1x’, size, you can choose to get an image at any size of your choosing. You can reference a value from the theme_settings
object (similar to getImage
), or you can specify your own size inline. Note that getImageSrcset
does not require theme_settings
keys to be wrapped in quotes; they should be referenced directly.
Pixel density
{{getImageSrcset image 1x="1280w" 2x="2560w"}}
{{getImageSrcset image 1x="800w" 1.5x="1200w" 2x="1600w"}}
{{getImageSrcset image 1x="640x640" 2x="1280x1280"}}
By specifying several sizes using the pixel density descriptor, you can generate a srcset of different image resolutions for different pixel density screens as described here. For example, you can specify a 2x
image for Retina screens, and a 1x
image for normal screens.
As above, you can reference theme_settings
keys or specify your own size inline.
Inherent width
<img src="{{getImage image 'default'}}" srcset="{{getImageSrcset image 100w='100w' 200w='200w' 300w='300w'}}" />
<!-- =>
<img src="https://cdn11.bigcommerce.com/s-abc123/images/stencil/640x640/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2" srcset="https://cdn11.bigcommerce.com/s-abc123/images/stencil/100w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 100w, https://cdn11.bigcommerce.com/s-abc123/images/stencil/200w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 200w,https://cdn11.bigcommerce.com/s-abc123/images/stencil/300w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 300w" />
-->
<img src="{{getImageSrcSet image 1x='1000x1000'}}" srcset="{{getImageSrcset image 1x='1000x1000' 2x='2000x2000'}}" />
<!-- =>
<img src="https://cdn11.bigcommerce.com/s-abc123/images/stencil/640x640/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2" srcset="https://cdn11.bigcommerce.com/s-abc123/images/stencil/100w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 100w, https://cdn11.bigcommerce.com/s-abc123/images/stencil/200w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 200w,https://cdn11.bigcommerce.com/s-abc123/images/stencil/300w/products/86/286/ablebrewingsystem4_1024x1024__07155.1456436672.jpg?c=2 300w" />
-->
By specifying several sizes using the inherent width descriptor, you can generate a srcset of different image resolutions based on width, which can in turn be selected by the browser based on the expected size of the image when the page is painted. It is recommended to use this together with a sizes
attribute on the <img>
as described here. In Cornerstone, this is handled automatically via JavaScript.
As above, you can reference theme_settings
keys or specify your own size inline.
{{any}}
Renders block if one or more parameters is true
. Parameters can be of different types (strings, numbers, arrays, or collections).
Example
The any
helper is invoked as shown here:
{{#any items selected=true}}
<!-- block to display if any items have selected=true -->
{{/any}}
A usage example is templates/components/category/shop-by-price.html
, a category page in Stencil’s Cornerstone base theme that does not have faceted search turned on. Shoppers will see “Shop by price” filters instead of product filters.
In this component, the {{#any...
helper is used to determine whether a shopper has selected one of the filters, and whether a “reset” button needs to be displayed:
{{#any shop_by_price selected=true}}
<li class="navList-item">
<a href="{{category_url}}" class="navList-action">
{{lang 'category.reset'}}
</a>
</li>
{{/any}}
{{all}}
Renders block if all parameters are true
. Parameters can be of different types (strings, numbers, arrays, or collections).
Example
{{#all items theme_settings.optionA theme_settings.optionB}}
... /* block to display, if all items evaluate to true */
{{/all}}
{{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
<li class="tab">
<a class="tab-title" href="#tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">{{sanitize theme_settings.pdp-custom-fields-tab-label}}</a>
</li>
{{/all}}
{{compare}}
Render block if comparison of first and third parameter returns true.
Parameters
a
{}operator
{}: The operator to use. Operators must be enclosed in quotes: “>”, “=”, “<=”, and so on.==
===
!=
!===
<
>
<=
>=
typeof
b
{}options
{Object}: options objectreturns
{String}: Block, or if specified the inverse block is rendered if falsey.
{{contains}}
Renders the block if collection
has the given value
, using strict equality (===) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex is specified and is negative, it is used as the offset from the end of the collection.
Params
collection
{Array|Object|String}: The collection to iterate over.value
{any}: The value to check for.
Example
<!-- array = ['a', 'b', 'c'] -->
{{#contains array "d"}}
This will not be rendered.
{{else}}
This will be rendered.
{{/contains}}
{{for}}
Repeats block for range from index a
to element b
.
Parameters
a
: starting integerb
: ending integer
In particular, this helper is limited to 100 iterations, in order to protect against infinite loops.
The for
helper has the following syntax, where parameters <from>
and <to>
are numbers, and <context>
is an object:
Example
{{#for 1 12}}
{{lang (concat 'common.short_months.' $index)}}
{{/for}}
{{if}}
Renders if
block when if-statement evaluates to true; otherwise renders else
block.
Example
{{#if page_type '===' 'account_order'}}
<li class="navBar-item is-active">
<a class="navBar-action" href="{{urls.account.orders.all}}">{{lang 'account.nav.orders'}}</a>
</li>
{{else}}
<li class="navBar-item is-active">{{lang 'account.nav.orders'}}</li>
{{/if}}
{{or}}
Renders block if on more param evaluates to true.
Parameters
The or
operator’s parameters are one or more strings, numbers, arrays, or collections. Parameters can be of mixed types.
Example
{{#or 1 0 0 0 0 0 0}}
<!-- 1 evaluates to true, so block rendered-->
{{/or}}
{{#or options configurable_fields}}
<a href="#" data-item-edit="{{id}}">{{lang 'cart.checkout.change'}}</a>
{{/or}}
{{unless}}
Renders block if statement is false; does not support operators for comparison expressions.
Example
{{#each category_results}}
<li class="category-suggestion">
{{#each this}}
<a href="{{url}}">{{name}}</a>
{{#unless @last}} > {{/unless}}
{{/each}}
</li>
{{/each}}
{{concat}}
Concatenates two strings.
Example
{{concat breadcrumbs.[0].name breadcrumbs.[0].url}}
{{join}}
Joins an array of string elements into a single string.
Parameters
values
: {Array}separator
: {String}limit=<number>
: An optional limit.
Example
{{#if facets.length '>' 2}}
{{lang 'search.faceted.browse-by'}} {{ join (pluck facets 'title') ', ' limit=2 }} & {{ toLowerCase (lang 'search.faceted.more') }}
{{/if}}
{{json}}
JSON.stringify()
s an object.
Joins two strings.
Example
{{json blog}}
<!-- //=>
{
"name": "Blog",
"recent_posts": [{...}],
"url": "/blog/"
}
-->
{{replace}}
Replaces all instances of first param in second param with the child block.
Example
Replace all instances of %%Syndicate%%
in page.content
with {{> components/page/rss_feed}}
:
{{#replace '%%Syndicate%%' page.content}}
{{> components/page/rss_feed}}
{{else}}
<p>{{{page.content}}}</p>
{{/replace}}
{{setURLQueryParam}}
Appends keys values to a URL.
Parameters
key
{String}: The query parameter key.value
{Number}: The query parameter value of the stated key.url
{String}: The URL of the query parameter.returns
{String}: A formatted URL query parameter.
Example
{{setURLQueryParam "http://example.com/image.jpg" "c" "2"}}
<!-- => http://example.com/image.jpg?c=2 -->
{{stripQuerystring}}
Strips query string from URL.
Example
{{stripQuerystring "http://example.com?tests=true"}}
<!-- => http://example.com -->
{{toLowerCase}}
Converts string to lowercase.
Example
{{toLowerCase head.title}}
{{truncate}}
Truncates a string.
Parameters
str
{String}: The string you want to truncate.length
{Number}: The desired length of the returned truncated string.returns
{String}: The truncated string.
Example
{{truncate "This will be truncated to only the first part of the sentence." 22}}
<!-- => This will be truncated -->
{{block}}
Defines a block of content; can be overwritten by a partial.
Example
<div class="container">
{{#block "page"}} {{/block}}
</div>
{{dynamicComponent}}
Inserts dynamic partial at the path passed in.
Example
{{#each forms.create_account.address_fields }}
{{{dynamicComponent 'components/common/forms'}}}
{{/each}}
{{inject}}
Injects key values into jsContext.
Example
{{inject "myProductName" product.title}}
<script>
var jsContext = JSON.parse({{jsContext}});
console.log(jsContext.myProductName);
// => "BigCommerce Coffee Mug"
</script>
{{inject "categoryProductsPerPage" theme_settings.categorypage_products_per_page}}
{{jsContext}}
Returns JSON for all data injected by inject helper.
Example
{{inject "myProductName" product.title}}
<script>
var jsContext = JSON.parse({{jsContext}});
console.log(jsContext.myProductName);
// => "BigCommerce Coffee Mug"
</script>
{{partial}}
Overrides content defined by a block helper.
Example
{{#partial "head"}}
{{#if pagination.category.previous}}
<link rel="prev" href="{{pagination.category.previous}}">
{{/if}}
{{#if pagination.category.next}}
<link rel="next" href="{{pagination.category.next}}">
{{/if}}
{{/partial}}
{{region}}
Specifies a widget region.
Example
{{{region name="home_below_menu"}}}
{{assignVar}}
Save a variable for later use in the template.
Example
{{assignVar "foo" 10}}
{{getVar}}
Get a variable set by assignVar.
Example
{{getVar "foo"}}
{{decrementVar}}
Decrement variable assigned by assignVar by 1.
Example
{{decrementVar "foo"}}
{{incrementVar}}
Increment variable assigned by assignVar by 1.
Example
{{incrementVar "foo"}}
Standard helpers
Below are the standard helpers available to stencil themes and a link to it’s documentation on github @helpers/handlebars-helpers.
Contributing to helpers
BigCommerce’s custom handlebar’s helpers are open source. To contribute, make a pull request to bigcommerce/paper-handlebars.
Resources
Additional resources
- Handlebars.js Docs (handlebarsjs.com)