{"_id":"569c05661719050d00025af4","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"},"__v":73,"project":"55a6e72e8cc73e0d00096635","parentDoc":null,"user":"55a6caa022cfa321008e01d6","category":{"_id":"55b7ed07aea7c8190058badb","pages":["55b7edb7568be2230092bc34","5660974de163310d006b1954","569c05661719050d00025af4","569c06cdd326c80d0068f735","569d7e083dbdc20d005feeda"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":5,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T20:58:47.836Z","from_sync":false,"order":0,"slug":"welcome-to-stencil","title":"Welcome to Stencil"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-01-17T21:19:34.454Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:html]\n{\n  \"html\": \"For complete control over theme development, here is a brief summary of how you would interact with the <NOBR>Stencil CLI</nobr> (command-line interface) framework, while also enabling further theme customization by merchants:<br>\\n\\n<ul>\\n <li><a href=\\\"#LocalDev\\\">Local Development</a></li>\\n <li><a href=\\\"#Attrib\\\">Attributes</a></li>\\n <li><a href=\\\"#Obj\\\">Objects</a></li>\\n <li><a href=\\\"#Syntax\\\">Syntax</a></li>\\n <li><a href=\\\"#Hooks\\\">Event Hooks</a></li>\\n <li><a href=\\\"#Design\\\">Design</a></li>\\n <li><a href=\\\"#Customize\\\">Customization</a></li>\\n <li><a href=\\\"#Next\\\">Next Steps</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"LocalDev\\\"></a> Local Development </h2>\\n\\nStencil is designed to support local development. Stencil CLI runs on the <a href=\\\"https://nodejs.org/\\\">Node.js</a> runtime environment. Installing Node.js also provides the required <a href=\\\"https://www.npmjs.com/\\\">npm</a> package manager.\\n\\n<H5> More Info: </h5>\\n<ul>\\n  <li> <a href=\\\"/docs/prerequisites\\\">Node.js and npm prequisites</a>\\n  </li>\\n  <li> <a href=\\\"/docs/installing-stencil-cli-1\\\">Installing Stencil CLI</a>\\n  </li>\\n  <li> <a href=\\\"/docs/stencil-cli-options\\\">Stencil CLI options</a>\\n  </li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Attrib\\\"></a> Attributes </h2>\\n\\nStencil's storefront template pages support <a href=\\\"http://yaml.org/\\\">YAML</a>-formatted \\\"front matter\\\" to invoke the attributes you need, per page. <NOBR>Here is</nobr> an example of a pagetop invocation to display a \\\"new products\\\" section, while limiting its contents to four products:<br>\\n\\n<p></p><pre>\\n---\\nproducts:\\n    new:\\n        limit: 4\\n---</pre>\\n\\n<H5> More Info: </h5>\\n<ul>\\n  <li> <a href=\\\"/docs/using-yaml-front-matter\\\">Attributes invocation overview</a>\\n  </li>\\n  <li> <a href=\\\"/docs/front-matter-variables\\\">Attributes reference</a> </li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Obj\\\"></a> Objects </h2>\\n\\nStencil exposes data objects that allow your themes to access various assets across a storefront. Here is an example of a Stencil object &ndash; a very simple one, which nevertheless references a second object:\\n\\n\\n<p></p><pre>\\n<b>Brand List [Object]\\n\\n    Attribute:        Description:</b>\\n    url               URL to this brand’s products listing\\n    name              Name of the brand\\n    image             <a href=\\\"/docs/stencil-image-common-object\\\">Stencil image object</a> (if any) for the brand\\n</pre>\\n\\n<!-- <br><p></p>\\n<table>\\n  <tr>\\n    <td><b>Brand List</b><br>\\n      Attribute</td>\\n    <td><br>\\n      Description</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">url</td>\\n    <td class=\\\"\\\">URL to this brand’s products listing</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">name</td>\\n    <td class=\\\"\\\">Name of the brand</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">image</td>\\n    <td class=\\\"\\\">Stencil image object (if any) for the brand</td>\\n  </tr>\\n</table> -->\\n\\n<H5> More Info: </h5>\\n<ul>\\n  <li> <a href=\\\"/docs/stencil-object-model\\\">Objects reference</a> </li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Syntax\\\"></a> Syntax </h2>\\n\\nTheme pages access Stencil objects using <a href=\\\"http://handlebarsjs.com/\\\">Handlebars</a>, a lightweight, open-source templating language. Handlebars allows you to efficiently embed dynamic and conditional logic onto your storefront pages. A Handlebars expression begins with: <span class=\\\"inline-code\\\">{{</span> and ends with: <span class=\\\"inline-code\\\">}}</span>.<br>\\n\\n<p></p>Below is a Handlebars <span class=\\\"inline-code\\\">if</span> structure that tests for a boolean variable named <span class=\\\"inline-code\\\">product.similar_by_views</span>. If its value is <span class=\\\"inline-code\\\">true</span>, this snippet inserts a corresponding component &ndash; a carousel display of \\\"similar products.\\\" It also specifies a six-column display:<br><br>\\n\\n<pre>{{#if product.similar_by_views}}\\n   {{> components/products/carousel products=product.similar_by_views columns=6}}\\n{{/if}}\\n</pre>\\n\\n<H5> More Info: </h5>\\n<ul>\\n  <li> <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> overview\\n  </li>\\n<li> <a href=\\\"/docs/basic-designlayout-changes\\\">Handlebars tutorial</a> (requires Stencil <a href=\\\"/docs/installing-and-launching-stencil-1\\\">installation</a>)\\n  </li>\\n</ul>\\n  \\n<H2> <A NAME=\\\"Hooks\\\"></a> Event Hooks </h2>\\n\\nYour Stencil themes can access remote objects through data tags and event hooks, using the hooks to trigger defined events based on shopper behavior. To facilitate theme-building, BigCommerce provides the <span class=\\\"inline-code\\\">stencil-utils</span> client-side JavaScript library for managing event hooks.<br><br>\\n\\n<A NAME=\\\"remote-ex-2\\\"></a>In the following code example from a Stencil theme, note the <span class=\\\"inline-code\\\">cart‑item‑add</span> event. A theme could listen for this  event, to override the default form-submit behavior when a shopper adds product to their cart:<br>\\n\\n<p></p><pre>/*  \\n * Import all product-specific js \\n */\\n[...]\\nimport utils from 'bigcommerce/stencil-utils';\\n[...]\\naddProductToCart() {\\n    utils.hooks.on(<b>'cart-item-add'</b>, (event) =&gt; {\\n        event.preventDefault();\\n    });\\n}</pre>\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li>Event hooks<a href=\\\"/docs/data-tagsevent-hooks-reference\\\"> reference</a></li>\\n <li><span class=\\\"inline-code\\\">stencil-utils</span> package <a href=\\\"/docs/the-stencil-utils-package\\\">introduction</a></li>\\n <li><span class=\\\"inline-code\\\">stencil-utils</span> <a href=\\\"/docs/stencil-utils-api-reference\\\">API Reference</a></li>\\n</ul>\\n\\n<H2> <A NAME=\\\"Design\\\"></a> Design </h2>\\n\\nStencil supports <a href=\\\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\\\">Sass</a>/SCSS upon installation, with your choice of framework.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li><a href=\\\"/docs/componentsdesign-patterns\\\">Components/Design Patterns</a></li>\\n</ul>\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Before You Customize\",\n  \"body\": \"The Stencil framework is designed to support your incorporation of custom Sass/SCSS frameworks and JavaScript libraries. However, BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies.\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<H2> <A NAME=\\\"Customize\\\"></a> Customization </h2>\\n\\nMerchants can further customize your themes using Stencil's Theme Editor, a browser-based graphical interface. You configure which theme features are available for self-service here, through what GUI controls, and what options to display for each feature.<br>\\n\\n<p></p>You can grant access to colors, fonts, display/hiding of page features, and number of products/entries to display per feature.\\n\\n<H5> More Info: </h5>\\n<ul>\\n <li>Theme Editor <a href=\\\"/docs/what-is-theme-editor\\\">overview</a></li>\\n <li>Theme Editor <a href=\\\"/docs/schemajson-metadata-for-theme-editor\\\">configuration reference</a></li>\\n</ul>\\n\\n\\n<H2> <A NAME=\\\"Next\\\"></a> Next Steps </h2>\\nWe invite you to proceed to our:\\n\\n<ul>\\n  <li> <a href=\\\"/docs/technology-overview\\\">Technology Overview</a> &ndash; a richer introduction. </li>\\n\\n<li> <a href=\\\"/docs/installing-and-launching-stencil-1\\\">Installation and Launch</a> instructions. </li>\\n\\n<li> <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial. </li>\\n  \\n<li> <a href=\\\"/using-yaml-front-matter\\\">Front-matter</a> overview of YAML conventions. </li>\\n\\n<li> Front-matter <a href=\\\"/docs/front-matter-variables\\\">attributes</a> reference. </li>\\n\\n<li> <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> overview. </li>\\n  \\n</ul>\"\n}\n[/block]","excerpt":"A developer's snapshot","slug":"stencil-technology-base","type":"basic","title":"Stencil Technology Base"}

Stencil Technology Base

A developer's snapshot

[block:html] { "html": "For complete control over theme development, here is a brief summary of how you would interact with the <NOBR>Stencil CLI</nobr> (command-line interface) framework, while also enabling further theme customization by merchants:<br>\n\n<ul>\n <li><a href=\"#LocalDev\">Local Development</a></li>\n <li><a href=\"#Attrib\">Attributes</a></li>\n <li><a href=\"#Obj\">Objects</a></li>\n <li><a href=\"#Syntax\">Syntax</a></li>\n <li><a href=\"#Hooks\">Event Hooks</a></li>\n <li><a href=\"#Design\">Design</a></li>\n <li><a href=\"#Customize\">Customization</a></li>\n <li><a href=\"#Next\">Next Steps</a></li>\n</ul>\n\n<H2> <A NAME=\"LocalDev\"></a> Local Development </h2>\n\nStencil is designed to support local development. Stencil CLI runs on the <a href=\"https://nodejs.org/\">Node.js</a> runtime environment. Installing Node.js also provides the required <a href=\"https://www.npmjs.com/\">npm</a> package manager.\n\n<H5> More Info: </h5>\n<ul>\n <li> <a href=\"/docs/prerequisites\">Node.js and npm prequisites</a>\n </li>\n <li> <a href=\"/docs/installing-stencil-cli-1\">Installing Stencil CLI</a>\n </li>\n <li> <a href=\"/docs/stencil-cli-options\">Stencil CLI options</a>\n </li>\n</ul>\n\n<H2> <A NAME=\"Attrib\"></a> Attributes </h2>\n\nStencil's storefront template pages support <a href=\"http://yaml.org/\">YAML</a>-formatted \"front matter\" to invoke the attributes you need, per page. <NOBR>Here is</nobr> an example of a pagetop invocation to display a \"new products\" section, while limiting its contents to four products:<br>\n\n<p></p><pre>\n---\nproducts:\n new:\n limit: 4\n---</pre>\n\n<H5> More Info: </h5>\n<ul>\n <li> <a href=\"/docs/using-yaml-front-matter\">Attributes invocation overview</a>\n </li>\n <li> <a href=\"/docs/front-matter-variables\">Attributes reference</a> </li>\n</ul>\n\n<H2> <A NAME=\"Obj\"></a> Objects </h2>\n\nStencil exposes data objects that allow your themes to access various assets across a storefront. Here is an example of a Stencil object &ndash; a very simple one, which nevertheless references a second object:\n\n\n<p></p><pre>\n<b>Brand List [Object]\n\n Attribute: Description:</b>\n url URL to this brand’s products listing\n name Name of the brand\n image <a href=\"/docs/stencil-image-common-object\">Stencil image object</a> (if any) for the brand\n</pre>\n\n<!-- <br><p></p>\n<table>\n <tr>\n <td><b>Brand List</b><br>\n Attribute</td>\n <td><br>\n Description</td>\n </tr>\n <tr>\n <td class=\"\">url</td>\n <td class=\"\">URL to this brand’s products listing</td>\n </tr>\n <tr>\n <td class=\"\">name</td>\n <td class=\"\">Name of the brand</td>\n </tr>\n <tr>\n <td class=\"\">image</td>\n <td class=\"\">Stencil image object (if any) for the brand</td>\n </tr>\n</table> -->\n\n<H5> More Info: </h5>\n<ul>\n <li> <a href=\"/docs/stencil-object-model\">Objects reference</a> </li>\n</ul>\n\n<H2> <A NAME=\"Syntax\"></a> Syntax </h2>\n\nTheme pages access Stencil objects using <a href=\"http://handlebarsjs.com/\">Handlebars</a>, a lightweight, open-source templating language. Handlebars allows you to efficiently embed dynamic and conditional logic onto your storefront pages. A Handlebars expression begins with: <span class=\"inline-code\">{{</span> and ends with: <span class=\"inline-code\">}}</span>.<br>\n\n<p></p>Below is a Handlebars <span class=\"inline-code\">if</span> structure that tests for a boolean variable named <span class=\"inline-code\">product.similar_by_views</span>. If its value is <span class=\"inline-code\">true</span>, this snippet inserts a corresponding component &ndash; a carousel display of \"similar products.\" It also specifies a six-column display:<br><br>\n\n<pre>{{#if product.similar_by_views}}\n {{> components/products/carousel products=product.similar_by_views columns=6}}\n{{/if}}\n</pre>\n\n<H5> More Info: </h5>\n<ul>\n <li> <a href=\"/docs/developing-with-handlebars\">Handlebars</a> overview\n </li>\n<li> <a href=\"/docs/basic-designlayout-changes\">Handlebars tutorial</a> (requires Stencil <a href=\"/docs/installing-and-launching-stencil-1\">installation</a>)\n </li>\n</ul>\n \n<H2> <A NAME=\"Hooks\"></a> Event Hooks </h2>\n\nYour Stencil themes can access remote objects through data tags and event hooks, using the hooks to trigger defined events based on shopper behavior. To facilitate theme-building, BigCommerce provides the <span class=\"inline-code\">stencil-utils</span> client-side JavaScript library for managing event hooks.<br><br>\n\n<A NAME=\"remote-ex-2\"></a>In the following code example from a Stencil theme, note the <span class=\"inline-code\">cart‑item‑add</span> event. A theme could listen for this event, to override the default form-submit behavior when a shopper adds product to their cart:<br>\n\n<p></p><pre>/* \n * Import all product-specific js \n */\n[...]\nimport utils from 'bigcommerce/stencil-utils';\n[...]\naddProductToCart() {\n utils.hooks.on(<b>'cart-item-add'</b>, (event) =&gt; {\n event.preventDefault();\n });\n}</pre>\n\n<H5> More Info: </h5>\n<ul>\n <li>Event hooks<a href=\"/docs/data-tagsevent-hooks-reference\"> reference</a></li>\n <li><span class=\"inline-code\">stencil-utils</span> package <a href=\"/docs/the-stencil-utils-package\">introduction</a></li>\n <li><span class=\"inline-code\">stencil-utils</span> <a href=\"/docs/stencil-utils-api-reference\">API Reference</a></li>\n</ul>\n\n<H2> <A NAME=\"Design\"></a> Design </h2>\n\nStencil supports <a href=\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\">Sass</a>/SCSS upon installation, with your choice of framework.\n\n<H5> More Info: </h5>\n<ul>\n <li><a href=\"/docs/componentsdesign-patterns\">Components/Design Patterns</a></li>\n</ul>" } [/block] [block:callout] { "type": "warning", "title": "Before You Customize", "body": "The Stencil framework is designed to support your incorporation of custom Sass/SCSS frameworks and JavaScript libraries. However, BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies." } [/block] [block:html] { "html": "<H2> <A NAME=\"Customize\"></a> Customization </h2>\n\nMerchants can further customize your themes using Stencil's Theme Editor, a browser-based graphical interface. You configure which theme features are available for self-service here, through what GUI controls, and what options to display for each feature.<br>\n\n<p></p>You can grant access to colors, fonts, display/hiding of page features, and number of products/entries to display per feature.\n\n<H5> More Info: </h5>\n<ul>\n <li>Theme Editor <a href=\"/docs/what-is-theme-editor\">overview</a></li>\n <li>Theme Editor <a href=\"/docs/schemajson-metadata-for-theme-editor\">configuration reference</a></li>\n</ul>\n\n\n<H2> <A NAME=\"Next\"></a> Next Steps </h2>\nWe invite you to proceed to our:\n\n<ul>\n <li> <a href=\"/docs/technology-overview\">Technology Overview</a> &ndash; a richer introduction. </li>\n\n<li> <a href=\"/docs/installing-and-launching-stencil-1\">Installation and Launch</a> instructions. </li>\n\n<li> <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial. </li>\n \n<li> <a href=\"/using-yaml-front-matter\">Front-matter</a> overview of YAML conventions. </li>\n\n<li> Front-matter <a href=\"/docs/front-matter-variables\">attributes</a> reference. </li>\n\n<li> <a href=\"/docs/developing-with-handlebars\">Handlebars</a> overview. </li>\n \n</ul>" } [/block]