{{#if type '==' '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}}
```
becomes
```handlebars showLineNumbers={false}
```
In both examples, the files were uploaded to the WebDAV `/content/` directory, which acts as the root for `cdn` calls using the `webdav:` prefix.
> **Note**
>
> To serve WebDAV assets outside the `/content/` directory, avoid folder traversal or manual URL replacement with the `cdn` helper. Instead, use the [`getImageManagerImage`](#getImageManagerImage) helper, which serves content from the `/dav/product_images/uploaded_images/` directory.
#### CDN custom endpoints
You can define custom CDN endpoints to use with the `{{cdn}}` helper. By doing so you can include large, high-resolution image assets in themes without exceeding BigCommerce's [50 MB limit](/developer/docs/storefront/stencil/deployment/upload) when bundling the theme for upload to BigCommerce.
You can also use a local version of the image in development and a remote version on a CDN such as Imgix in production. To do so, define custom CDN endpoints in your theme's [`config.json` file](https://github.com/bigcommerce/cornerstone/blob/master/config.json).
For example:
```json showLineNumbers={false}
{
"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 the endpoint, you can use the short name in the same way as you use a `webdav:` protocol:
```handlebars showLineNumbers={false}
```
In local development, the helper returns the following:
```handlebars showLineNumbers={false}
```
In production environment, the helper returns the following:
```handlebars showLineNumbers={false}
```
As highlighted above, the helper is configured to rewrite *local* URLs to an `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.
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/cdn.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=cdn)
#### Early Hint and cdn
Early Hints reduce page load time and perceived latency by allowing browsers to download critical assets earlier in the request lifecycle. For more information, see [Early Hint](#earlyhint).
##### Parameters
* `resourceHint` - (String)
* Corresponds to the `rel` attribute in ``.
* Value can be any of `preload`, `preconnect`, `prerender`, `dns-prefetch`.
* For more information, see [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-rel) on MDN Web Docs.
* `as` - (String)
* Corresponds to the `as` attribute in ``.
* Value can be any of `style`, `font`, `script`, `document`.
* If an invalid value is provided, `as` won't be included.
* This parameter is optional.
* For more information, see [as](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as) on MDN Web Docs.
* `crossorigin` - (String)
* Value can be any of `no`, `anonymous`, `use-credentials`.
* Defaults to `no` when no value is provided.
* This parameter is optional.
* For more information, see [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin) on MDN Web Docs.
##### Example
The following script is an example of Early Hints usage in the Cornerstone theme:
```javascript showLineNumbers={false}
```
You can view more Early Hints usage in Cornerstone's `templates/layout/base.html` file by visiting the [Cornerstone Repository](https://github.com/bigcommerce/cornerstone/commit/f70fcd502343503969c2e475b777a85347137542#).
### EarlyHint
```handlebars showLineNumbers={false}
{{ earlyHint '{path}' '{rel}' [as='{script|style|font}'] [crossorigin='{no|anonymous|use-credentials}'] }}
```
Retrieves the provided URL and produces an early hint to communicate important web page resources. The server indicates which site assets (such as CSS files, JS scripts, and fonts) a browser needs to render a page fully. When used in conjunction with the `{{cdn}}` helper, load times can improve by 30%.
#### Parameters
* `path` (String): The URL that hosts the resource being hinted.
* `rel` (String): Valid arguments are `preload`, `preconnect`, `prerender`, and `dns-prefetch`.
* `as` (String): Optional. Valid arguments are `script`, `style`, `font`.
* `crossorigin` (String): Optional. Valid arguments are `no` (default), `anonymous`, and `use-credentials`.
#### Examples
```handlebars showLineNumbers={false}
{{earlyHint 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js' 'preload' as='script' crossorigin='anonymous'}}
```
This example produces an early hint in a `Link` header that looks like:
```handlebars showLineNumbers={false}
` tags. #### Parameters * `text` (String): Text to convert. #### Example ```handlebars showLineNumbers={false} {{nl2br settings.address}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/nl2br.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=nl2br) ### pre ```handlebars showLineNumbers={false} {{pre value}} ``` Renders preformatted text. This helper will escape text. #### Parameters * `value` (String): Text to format. #### Example ```handlebars showLineNumbers={false} {{pre var}} {{pre var}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/pre.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=pre) ### resourceHints ```handlebars showLineNumbers={false} {{resourceHints}} ``` Pre-fetches Google fonts. Outputs a formatted `` tag for DNS-prefetch. #### Example ```handlebars showLineNumbers={false} {{resourceHints}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/resourceHints.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=resourceHints) ### stylesheet ```handlebars showLineNumbers={false} {{stylesheet assetPath}} ``` Renders a link tag to insert a stylesheet into a theme; returns an HTML string. (This is required if you want Theme Editor to rewrite the stylesheet file when a merchant customizes their theme.) #### Parameters * `assetPath` (String): Filepath to the theme's CSS stylesheet file. * `options`: You can append optional parameters as key/value pairs. #### Example ```handlebars showLineNumbers={false} {{stylesheet "assets/css/style.scss" class="myStylesheet"}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/stylesheet.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=stylesheet) ### lang ```handlebars showLineNumbers={false} {{lang translationKey}} ``` Maps keys to translation files based on the locale indicated by the visitor’s browser. #### Parameters * `translationKey`(String) * `options`: You can append optional parameters as key/value pairs. #### Examples ```handlebars showLineNumbers={false} ``` ```handlebars showLineNumbers={false} {{lang 'powered_by' name=name}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/lang.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=lang) ### langJson ```handlebars showLineNumbers={false} {{langJson keyFilter}} ``` Returns language translation keys as a JSON string. #### Parameters * `keyFilter` (String): The language translation keys to render for the storefront locale/language. #### Example ```handlebars showLineNumbers={false} {{langJson 'validation_messages'}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/langJson.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=langJson) ### getContentImage ```handlebars showLineNumbers={false} {{getContentImage path width height}} ``` Returns a URL for an image uploaded to `/dav/content/`. To learn more about uploading files to your store's server, see [WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV). #### Parameters * `path` (String): Image path relative to `/dav/content/`. * `width` (Integer): Width in pixels. * `height` (Integer): Height in pixels. #### Example ```handlebars showLineNumbers={false} {{getContentImage "asset.jpg"}} {{getContentImage "asset.jpg" width="a" height="a"}} {{getContentImage "asset.jpg" width=123 height=321}} {{getContentImage "asset.jpg" width=123}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/getContentImage.js) ### getContentImageSrcset ```handlebars showLineNumbers={false} {{getContentImageSrcset path}} ``` Returns a `srcset` for an image uploaded to `/dav/content/`. #### Parameters * `path` (String): Image path relative to `/dav/content/`. #### Example ```handlebars showLineNumbers={false} {{getContentImageSrcset "asset.jpg"}} {{getContentImageSrcset "folder/asset.jpg" width=123}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/getContentImageSrcset.js) ### getImage ```handlebars showLineNumbers={false} {{getImage stencilImage size}} ``` Returns `
{{{page.content}}}
{{/replace}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/replace.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=replace) ### setURLQueryParam ```handlebars showLineNumbers={false} {{setURLQueryParam url key value}} ``` Appends key values to a URL. #### Parameters * `url` (String): The URL of the query parameter. * `key` (String): The query parameter key. * `value` (Number): The query parameter value of the stated key. #### Example ```handlebars showLineNumbers={false} {{setURLQueryParam "http://example.com/image.jpg" "c" "2"}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/setURLQueryParam.js). ### stripQuerystring ```handlebars showLineNumbers={false} {{stripQuerystring url}} ``` Strips query string from a URL. #### Parameters * `url` (String): The URL containing the query parameter. #### Example ```handlebars showLineNumbers={false} {{stripQuerystring "http://example.com?tests=true"}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/stripQuerystring.js) ### strReplace ```handlebars showLineNumbers={false} {{strReplace subjectString targetSubstring newSubstring occurrenceSelection}} ``` Replaces some or all occurrences of a target substring within the subject string. #### Parameters * `subjectString` (String): The original string to modify. * `targetSubstring` (String): The substring in `subjectString` to be replaced. * `newSubstring` (String): The substring to insert in place of `targetSubstring`. * `occurrenceSelection` (Integer): Optional. The number of occurrences of `targetSubstring` to replace with `newSubstring`. If you pass no argument or the supplied integer is greater than the number of `targetSubstring` occurrences, `newSubstring` will replace all instances of `targetSubstring`. A positive integer `n` will replace `n` instances of `targetSubstring`, starting from the left side of the string. Arguments of zero or less will replace no instances. Non-integer arguments may have unpredictable results. #### Example ```handlebars showLineNumbers={false} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two"}} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two" 3}} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two" 100}} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two" 2}} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two" 0}} {{strReplace "Buy one, get one half price. Limit one per customer." "one" "two" -2}} ``` * [See the strReplace helper (GitHub)](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/strReplace.js) ### toLowerCase ```handlebars showLineNumbers={false} {{toLowerCase string}} ``` Converts a string to lowercase. #### Parameters * `string` (String): String you want to convert. #### Example ```handlebars showLineNumbers={false} {{toLowerCase 'I Love PIZZA'}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/toLowerCase.js) * [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=toLowerCase) ### truncate ```handlebars showLineNumbers={false} {{truncate string length}} ``` Truncates a string. #### Parameters * `string` (String): The string you want to truncate. * `length` (Number): The desired length of the returned truncated string. #### Example ```handlebars showLineNumbers={false} {{truncate "This will be truncated to only the first part of the sentence." 22}} ``` * [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/truncate.js) ### block ```handlebars showLineNumbers={false} {{block string}} ``` Defines a block of content. You can overwrite it using the [partial](#partial) helper. #### Parameters * `string` (String) #### Example ```handlebars showLineNumbers={false}
{{#block "page"}} {{/block}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/block.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=block)
### dynamicComponent
```handlebars showLineNumbers={false}
{{dynamicComponent path}}
```
Inserts a dynamic partial in the specified path.
#### Parameters
* `path` (String): The path to insert a dynamic component in.
#### Example
```handlebars showLineNumbers={false}
{{#each forms.create_account.address_fields }}
{{{dynamicComponent 'components/common/forms'}}}
{{/each}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/dynamicComponent.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=dynamicComponent)
### inject
```handlebars showLineNumbers={false}
{{inject value object}}
```
Injects key values into the [jsContext](#jscontext) helper.
#### Parameters
* `value` (String): The value to inject.
* `object` (Object)
#### Example
```handlebars showLineNumbers={false}
{{inject "myProductName" product.title}}
```
```handlebars showLineNumbers={false}
{{inject 'productSize' theme_settings.product_size}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/inject.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?q=inject)
### jsContext
```handlebars showLineNumbers={false}
{{jsContext}}
```
Returns a JSON representation of the data injected by the [inject](#inject) helper.
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/jsContext.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=jsContext)
### partial
```handlebars showLineNumbers={false}
{{partial string}}
```
Overrides content defined by the [block](#block) helper.
#### Parameters
* `string` (String)
#### Example
```handlebars showLineNumbers={false}
{{#partial "head"}}
{{#if pagination.category.previous}}
{{/if}}
{{#if pagination.category.next}}
{{/if}}
{{/partial}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/partial.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=jsContext)
### region
```handlebars showLineNumbers={false}
{{region name}}
```
Specifies a [widget](/developer/docs/admin/widgets-and-scripts#widgets) region.
#### Parameters
* `name` (String): The name of the region.
#### Example
```handlebars showLineNumbers={false}
{{region name="banner-top"}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/region.js)
* [See it in Cornerstone](https://github.com/bigcommerce/cornerstone/search?l=HTML\&q=region)
### assignVar
```handlebars showLineNumbers={false}
{{assignVar key value}}
```
Assigns a variable for later use in the template and has a limit of 50 variables in storage.
#### Parameters
* `key` (String)
* `value` (String|Number)
#### Example
```handlebars showLineNumbers={false}
{{assignVar "foo" 10}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/assignVar.js)
### getVar
```handlebars showLineNumbers={false}
{{getVar key}}
```
Returns the variable set by [assignVar](#assignVar).
#### Parameters
* `key` (String)
#### Example
```handlebars showLineNumbers={false}
{{getVar "foo"}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/getVar.js)
### decrementVar
```handlebars showLineNumbers={false}
{{decrementVar key}}
```
Decrements the variable set by [assignVar](#assignVar) by 1.
#### Parameters
* `key` (String)
#### Example
```handlebars showLineNumbers={false}
{{decrementVar "foo"}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/decrementVar.js)
### incrementVar
```handlebars showLineNumbers={false}
{{incrementVar key}}
```
Increments the variable set by [assignVar](#assignVar) by 1.
#### Parameters
* `key` (String)
#### Example
```handlebars showLineNumbers={false}
{{incrementVar "foo"}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/incrementVar.js)
### JSONparse
Parse data with JSONparse.
#### Parameters
* `json` (String)
#### Example
```handlebars showLineNumbers={false}
{{#JSONparse '{"foo": "bar"}'}}
{{foo}}
{{/JSONparse}}
```
### JSONparseSafe
Parse data safely with JSONparseSafe. This helper is similar to the JSONparse helper, but allows handling of incorrect JSON data. Returns `parsed data` when JSON is correct; otherwise, renders an `else` block.
#### Parameters
* `json` (String): The data parsed by the helper.
#### Example
```handlebars showLineNumbers={false}
{{#JSONparseSafe '{"foo": "bar"}'}}
{{foo}}
{{/JSONparseSafe}}
```
```handlebars showLineNumbers={false}
{{#JSONparseSafe 'foo'}}
{{foo}}
{{else}}
John Doe
{{/JSONparseSafe}}
```
* [See it in GitHub](https://github.com/bigcommerce/paper-handlebars/blob/master/helpers/jsonParseSafe.js)
## Contributing to helpers
BigCommerce's custom Handlebars helpers are open source. To contribute, make a pull request to [bigcommerce/paper-handlebars](https://github.com/bigcommerce/paper-handlebars).
## Resources
* [Widgets](/developer/docs/admin/widgets-and-scripts)
* [Theme Objects](/developer/docs/storefront/stencil/themes/context/object-reference/schemas)
* [Cornerstone](https://github.com/bigcommerce/cornerstone)
* [Paper Handlebars](https://github.com/bigcommerce/paper-handlebars/tree/master/helpers)
* [Handlebars.js](https://handlebarsjs.com/)