{"_id":"5608e5c031beb60d001b655c","category":{"_id":"5605f309a4574a0d00811366","version":"55a6e72f8cc73e0d00096638","__v":10,"pages":["5608e5448aedf50d0004cf93","5608e54fa7b2590d0089eae5","5608e58331beb60d001b655a","5608e59ea7b2590d0089eae8","5608e5c031beb60d001b655c","5608e5d28aedf50d0004cf95","5608e5f7a7cc2f0d00d9754a","5608e61131beb60d001b655e","5608efbdc5cff70d007d00ee","5669f132c3de130d00441858"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:21:13.347Z","from_sync":false,"order":4,"slug":"development-quick-start","title":"Development Quick Start"},"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","parentDoc":null,"__v":26,"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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T07:01:20.100Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"[block:html]\n{\n  \"html\": \"The following steps cover:<br>\\n\\n<ul>\\n  <li><a href=\\\"#QuickCustJS\\\">Customizing JavaScript for Individual Pages</a></li>\\n <li><a href=\\\"#HBintoJS\\\">Bringing Handlebars Context Values into JavaScript</a></li>\\n <li><a href=\\\"#InstallLibs\\\">Installing Various JavaScript Libraries</a></li>  \\n <li><a href=\\\"#links\\\">Example Links</a></li>\\n</ul>\\n\\n<h2> <a name=\\\"QuickCustJS\\\"></a>Customizing JavaScript for Individual Pages </h2>\\n\\nHere is a very simple example of customizing the JavaScript provided in the default Stencil theme.<br>\\n\\n<p></p>In a text editor, open the <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/js/theme/product.js</span> file. At the top of the <span class=\\\"inline-code\\\">Product</span> class, insert the <span class=\\\"inline-code\\\">\\\"Hello World\\\"</span> statement shown in bold below:<br>\\n\\n<p></p><pre>\\nexport default class Product extends PageManager {\\n  constructor() {\\n      super();\\n  }\\n\\n  before(next) {\\n      next();\\n  }\\n\\n  loaded(next) {\\n      <b>console.log(\\\"Hello World\\\");</b>\\n    // Init collapsible\\n    collapsible();\\n    [...]\\n}\\n</pre>\\n\\n\\nIn your browser, refresh any product-details pop-up or page to see your new <span class=\\\"inline-code\\\">\\\"Hello World\\\"</span> message.<br>\\n\\n<h2> <A NAME=\\\"HBintoJS\\\"></a>Bringing Handlebars Context Values into JavaScript</h2>\\n\\nWithin Stencil pages, you can inject any variables from the Handlebars context into your client-side JavaScript. You do so by calling the Stencil <a href=\\\"/docs/custom-handlebars-helpers\\\">custom Handlebars helper</a> named <span class=\\\"inline-code\\\">inject</span>, shown below:<br><p></p>\\n\\n<pre>{{inject 'productThumbSize' theme_settings.productthumb_size}}</pre>\\n\\n<p></p>You could inject the above statement into a page template rendered with <span class=\\\"inline-code\\\">page_type = \\\"Product\\\"</span> (for example: <span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/pages/product.html</span>). Stencil’s <span class=\\\"inline-code\\\">PageManager</span> class will be provided this context:<br>\\n\\n<p></p><pre>export default class Product extends PageManager {\\n  constructor() {\\n      super();\\n  }\\n\\n  before(next) {\\n      next();\\n  }\\n\\n  loaded(next) {\\n      console.log(\\\"Hello World\\\");\\n      console.log(this.context.productThumbSize);\\n  }\\n\\n}</pre>\\n\\nNote that the <span class=\\\"inline-code\\\">console.log(this.context.themeImageSizes);</span> statement will report your configured image size, following the <span class=\\\"inline-code\\\">\\\"Hello World\\\"</span> message that you previously defined in <a href=\\\"#QuickCustJS\\\">Customizing JavaScript for Individual Pages</a>.<br>\\n\\n\\n<h2> <A NAME=\\\"InstallLibs\\\"></a>Installing Various JavaScript Libraries</h2>\\n\\nOnce you have installed the default Stencil theme, you can add custom JavaScript libraries. To see how this works, find your favorite library on GitHub – for example: <NOBR><a href=\\\"https://github.com/jquery/jquery\\\">https://github.com/jquery/jquery</a></nobr>.<br>\\n\\n<p></p>To install this particular library for Stencil themes, you would entering the following on the command line:<br><p></p>\\n\\n<pre>npm install jquery</pre>\\n\\nNext, you would open <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/js/theme/product.js</span>, and insert the statements excerpted below:<br><p></p>\\n\\n<pre>import $ from 'jquery';\\n\\n$('.myElement').click(() => {\\n    alert(\\\"You clicked myElement\\\");\\n});</pre>\\n\\nAs always, for specifics, refer to your chosen library’s documentation.\\n\\n<!-- Once you have <a href=\\\"/docs/prerequisites\\\">installed jspm</a> (a prerequisite for Stencil installation), you can use it to add custom JavaScript libraries. To see how this works, find your favorite library on GitHub – for example: <NOBR><a href=\\\"https://github.com/flaviusmatis/easyModal.js\\\">https://github.com/flaviusmatis/easyModal.js</a></nobr>.<br>\\n\\n<p></p>To install this particular library for Stencil themes, you would entering the following on the command line:<br><br>\\n\\n<pre>jspm install github:flaviusmatis/easyModal</pre>\\n\\n\\nNext, you would open <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/js/theme/product.js</span>, and insert the statements excerpted below:<br>\\n\\n<p></p><pre>import 'flaviusmatis/easyModal';\\n\\n// ...\\n\\n$(‘mySelector’).easyModal();\\n$(‘mySelector’).trigger('openModal');</pre>\\n\\n\\nTo verify this example, you would next look for a corresponding modal in your rendered storefront (or check your console window for errors). As always, for specifics, refer to your chosen library’s documentation. -->\"\n}\n[/block]\n## <span id=\"links\"> Example Links </span>\n\nFor more-extended examples of adding custom JavaScript (whether your own or third-party) to a theme, please see this documentation's [JavaScript Customization](/docs/js-api) section.\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 JavaScript and JavaScript libraries. However,&#160;BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies.\"\n}\n[/block]","excerpt":"Customizing JavaScript Resources and Libraries","slug":"customizing-javascript","type":"basic","title":"Customizing JavaScript"}

Customizing JavaScript

Customizing JavaScript Resources and Libraries

[block:html] { "html": "The following steps cover:<br>\n\n<ul>\n <li><a href=\"#QuickCustJS\">Customizing JavaScript for Individual Pages</a></li>\n <li><a href=\"#HBintoJS\">Bringing Handlebars Context Values into JavaScript</a></li>\n <li><a href=\"#InstallLibs\">Installing Various JavaScript Libraries</a></li> \n <li><a href=\"#links\">Example Links</a></li>\n</ul>\n\n<h2> <a name=\"QuickCustJS\"></a>Customizing JavaScript for Individual Pages </h2>\n\nHere is a very simple example of customizing the JavaScript provided in the default Stencil theme.<br>\n\n<p></p>In a text editor, open the <span class=\"inline-code\">&lt;theme-name&gt;/assets/js/theme/product.js</span> file. At the top of the <span class=\"inline-code\">Product</span> class, insert the <span class=\"inline-code\">\"Hello World\"</span> statement shown in bold below:<br>\n\n<p></p><pre>\nexport default class Product extends PageManager {\n constructor() {\n super();\n }\n\n before(next) {\n next();\n }\n\n loaded(next) {\n <b>console.log(\"Hello World\");</b>\n // Init collapsible\n collapsible();\n [...]\n}\n</pre>\n\n\nIn your browser, refresh any product-details pop-up or page to see your new <span class=\"inline-code\">\"Hello World\"</span> message.<br>\n\n<h2> <A NAME=\"HBintoJS\"></a>Bringing Handlebars Context Values into JavaScript</h2>\n\nWithin Stencil pages, you can inject any variables from the Handlebars context into your client-side JavaScript. You do so by calling the Stencil <a href=\"/docs/custom-handlebars-helpers\">custom Handlebars helper</a> named <span class=\"inline-code\">inject</span>, shown below:<br><p></p>\n\n<pre>{{inject 'productThumbSize' theme_settings.productthumb_size}}</pre>\n\n<p></p>You could inject the above statement into a page template rendered with <span class=\"inline-code\">page_type = \"Product\"</span> (for example: <span class=\"inline-code\">&lt;theme-name&gt;/templates/pages/product.html</span>). Stencil’s <span class=\"inline-code\">PageManager</span> class will be provided this context:<br>\n\n<p></p><pre>export default class Product extends PageManager {\n constructor() {\n super();\n }\n\n before(next) {\n next();\n }\n\n loaded(next) {\n console.log(\"Hello World\");\n console.log(this.context.productThumbSize);\n }\n\n}</pre>\n\nNote that the <span class=\"inline-code\">console.log(this.context.themeImageSizes);</span> statement will report your configured image size, following the <span class=\"inline-code\">\"Hello World\"</span> message that you previously defined in <a href=\"#QuickCustJS\">Customizing JavaScript for Individual Pages</a>.<br>\n\n\n<h2> <A NAME=\"InstallLibs\"></a>Installing Various JavaScript Libraries</h2>\n\nOnce you have installed the default Stencil theme, you can add custom JavaScript libraries. To see how this works, find your favorite library on GitHub – for example: <NOBR><a href=\"https://github.com/jquery/jquery\">https://github.com/jquery/jquery</a></nobr>.<br>\n\n<p></p>To install this particular library for Stencil themes, you would entering the following on the command line:<br><p></p>\n\n<pre>npm install jquery</pre>\n\nNext, you would open <span class=\"inline-code\">&lt;theme-name&gt;/assets/js/theme/product.js</span>, and insert the statements excerpted below:<br><p></p>\n\n<pre>import $ from 'jquery';\n\n$('.myElement').click(() => {\n alert(\"You clicked myElement\");\n});</pre>\n\nAs always, for specifics, refer to your chosen library’s documentation.\n\n<!-- Once you have <a href=\"/docs/prerequisites\">installed jspm</a> (a prerequisite for Stencil installation), you can use it to add custom JavaScript libraries. To see how this works, find your favorite library on GitHub – for example: <NOBR><a href=\"https://github.com/flaviusmatis/easyModal.js\">https://github.com/flaviusmatis/easyModal.js</a></nobr>.<br>\n\n<p></p>To install this particular library for Stencil themes, you would entering the following on the command line:<br><br>\n\n<pre>jspm install github:flaviusmatis/easyModal</pre>\n\n\nNext, you would open <span class=\"inline-code\">&lt;theme-name&gt;/assets/js/theme/product.js</span>, and insert the statements excerpted below:<br>\n\n<p></p><pre>import 'flaviusmatis/easyModal';\n\n// ...\n\n$(‘mySelector’).easyModal();\n$(‘mySelector’).trigger('openModal');</pre>\n\n\nTo verify this example, you would next look for a corresponding modal in your rendered storefront (or check your console window for errors). As always, for specifics, refer to your chosen library’s documentation. -->" } [/block] ## <span id="links"> Example Links </span> For more-extended examples of adding custom JavaScript (whether your own or third-party) to a theme, please see this documentation's [JavaScript Customization](/docs/js-api) section. [block:callout] { "type": "warning", "title": "Before You Customize", "body": "The Stencil framework is designed to support your incorporation of custom JavaScript and JavaScript libraries. However,&#160;BigCommerce does not offer technical assistance on substitutions for, or customized versions of, Stencil's default dependencies." } [/block]