{"_id":"5608f4f86d8c440d000c7a18","parentDoc":null,"user":"55a6caa022cfa321008e01d6","__v":22,"project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"58105bf298aea40f00afa3ba","__v":0,"version":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-26T07:32:02.240Z","from_sync":false,"order":9,"slug":"handlebars-syntax","title":"Handlebars Syntax and Helpers"},"updates":["560c37e5619e7b2300b2cd44","560f0cf09812c10d002729fb"],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T08:06:16.142Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"<!-- Handlebars helpers Custom Handlebars Helpers -->\\n<a href=\\\"http://handlebarsjs.com/\\\">Handlebars</a> is a minimal templating language that allows you to create dynamic and robust templates for any BigCommerce storefront. A Handlebars template looks just like a regular HTML page, with the addition of Handlebars expressions for all dynamic logic that you embed into the page.<br>\\n\\n<p></p>A Handlebars expression begins with: <span class=\\\"inline-code\\\">{{</span> and ends with: <span class=\\\"inline-code\\\">}}</span>.<br>\\n\\n<p></p>Here is a basic example that accesses the <span class=\\\"inline-code\\\">title</span> and <span class=\\\"inline-code\\\">body</span> variables:<br>\\n\\n<p></p><pre>\\n&lt;div class=\\\"entry\\\"&gt;\\n  &lt;h1&gt;{{ title }}&lt;/h1&gt;\\n  &lt;div class=\\\"body\\\"&gt;\\n    {{ body }}\\n  &lt;/div&gt;\\n&lt;/div&gt;\\n</pre>\\n\\n<p></p>In production, Handlebars statements run on the server side, generating HTML that the shopper's browser receives.\\n\\n<!-- Handlebars are run server-side, and the browser receives the resulting html.-->\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Stencil requires Handlebars version 3.0.1 or higher, and installs a compatible version.\",\n  \"title\": \"Handlebars Version\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<h2> Handlebars User’s Guide</h2>\\n\\nFor a thorough overview of how to use Handlebars inside your templates, please review the Handlebars documentation and tutorials located at <a href=\\\"http://handlebarsjs.com/\\\">http://handlebarsjs.com/</a>.<br>\\n\\n<h2> Template Logic</h2>\\n\\nWith Handlebars, it’s easy to embed logic right into your templates.  Handlebars has built-in helpers for widely used logic and iterator functions.  You can find a list of all built-in Handlebars helpers  <a href=\\\"http://handlebarsjs.com/builtin_helpers.html\\\">here</a>.<br>\\n\\n<h2> Custom Handlebars Helpers</h2>\\n\\nBigCommerce has extended the built-in Handlebars helpers with certain custom Handlebars helpers. For details, please proceed to  <a href=\\\"/docs/custom-handlebars-helpers\\\">this reference section</a>.<br>\\n\\n<h2>Stencil Handlebars Resources</h2>\\n\\nFor a comprehensive reference to the Stencil data objects that you can manipulate via Handlebars statements, please see the <a href=\\\"/docs/stencil-object-model\\\">Stencil Object Model Reference</a>.\\n\\n<h2>Rendering Special Characters</h2>\\n\\nBy default, Handlebars HTML-escapes values returned by a Handlebars <span class=\\\"inline-code\\\">{{ expression }}</span>. So, where a Handlebars expression's referenced content includes special characters, those characters will render literally on the storefront as HTML entities.<br>\\n\\n<p></p>In the example above, assume that the HTML referenced by <span class=\\\"inline-code\\\">{{ title }}</span> contains an ampersand and a \\\"straight\\\" apostrophe. You will see the entities <span class=\\\"inline-code\\\">&amp;amp;</span> and <span class=\\\"inline-code\\\">&amp;#039;</span> displayed literally on the storefront, instead of the intended characters <span class=\\\"inline-code\\\">&amp;</span> and <span class=\\\"inline-code\\\">&#039;</span>. Similar display errors will be triggered by apostrophes, quotation marks, primes, and other extended characters.<br>\\n\\n<p></p>The workaround is to place the Handlebars variable in triple braces, like this: <span class=\\\"inline-code\\\">{{{ title }}}</span>. <NOBR><a href=\\\"http://handlebarsjs.com/#html-escaping\\\">Handlebars documentation</a></nobr> refers to this technique as a \\\"triple-stash.\\\"\"\n}\n[/block]","excerpt":"","slug":"developing-with-handlebars","type":"basic","title":"Developing with Handlebars"}

Developing with Handlebars


[block:html] { "html": "<!-- Handlebars helpers Custom Handlebars Helpers -->\n<a href=\"http://handlebarsjs.com/\">Handlebars</a> is a minimal templating language that allows you to create dynamic and robust templates for any BigCommerce storefront. A Handlebars template looks just like a regular HTML page, with the addition of Handlebars expressions for all dynamic logic that you embed into the page.<br>\n\n<p></p>A Handlebars expression begins with: <span class=\"inline-code\">{{</span> and ends with: <span class=\"inline-code\">}}</span>.<br>\n\n<p></p>Here is a basic example that accesses the <span class=\"inline-code\">title</span> and <span class=\"inline-code\">body</span> variables:<br>\n\n<p></p><pre>\n&lt;div class=\"entry\"&gt;\n &lt;h1&gt;{{ title }}&lt;/h1&gt;\n &lt;div class=\"body\"&gt;\n {{ body }}\n &lt;/div&gt;\n&lt;/div&gt;\n</pre>\n\n<p></p>In production, Handlebars statements run on the server side, generating HTML that the shopper's browser receives.\n\n<!-- Handlebars are run server-side, and the browser receives the resulting html.-->" } [/block] [block:callout] { "type": "info", "body": "Stencil requires Handlebars version 3.0.1 or higher, and installs a compatible version.", "title": "Handlebars Version" } [/block] [block:html] { "html": "<h2> Handlebars User’s Guide</h2>\n\nFor a thorough overview of how to use Handlebars inside your templates, please review the Handlebars documentation and tutorials located at <a href=\"http://handlebarsjs.com/\">http://handlebarsjs.com/</a>.<br>\n\n<h2> Template Logic</h2>\n\nWith Handlebars, it’s easy to embed logic right into your templates. Handlebars has built-in helpers for widely used logic and iterator functions. You can find a list of all built-in Handlebars helpers <a href=\"http://handlebarsjs.com/builtin_helpers.html\">here</a>.<br>\n\n<h2> Custom Handlebars Helpers</h2>\n\nBigCommerce has extended the built-in Handlebars helpers with certain custom Handlebars helpers. For details, please proceed to <a href=\"/docs/custom-handlebars-helpers\">this reference section</a>.<br>\n\n<h2>Stencil Handlebars Resources</h2>\n\nFor a comprehensive reference to the Stencil data objects that you can manipulate via Handlebars statements, please see the <a href=\"/docs/stencil-object-model\">Stencil Object Model Reference</a>.\n\n<h2>Rendering Special Characters</h2>\n\nBy default, Handlebars HTML-escapes values returned by a Handlebars <span class=\"inline-code\">{{ expression }}</span>. So, where a Handlebars expression's referenced content includes special characters, those characters will render literally on the storefront as HTML entities.<br>\n\n<p></p>In the example above, assume that the HTML referenced by <span class=\"inline-code\">{{ title }}</span> contains an ampersand and a \"straight\" apostrophe. You will see the entities <span class=\"inline-code\">&amp;amp;</span> and <span class=\"inline-code\">&amp;#039;</span> displayed literally on the storefront, instead of the intended characters <span class=\"inline-code\">&amp;</span> and <span class=\"inline-code\">&#039;</span>. Similar display errors will be triggered by apostrophes, quotation marks, primes, and other extended characters.<br>\n\n<p></p>The workaround is to place the Handlebars variable in triple braces, like this: <span class=\"inline-code\">{{{ title }}}</span>. <NOBR><a href=\"http://handlebarsjs.com/#html-escaping\">Handlebars documentation</a></nobr> refers to this technique as a \"triple-stash.\"" } [/block]