{"_id":"5858dd7c2ecdc80f00d56711","user":"55a6caa022cfa321008e01d6","project":"55a6e72e8cc73e0d00096635","__v":1,"category":{"_id":"584b3de7e5f3a42300df6ef7","project":"55a6e72e8cc73e0d00096635","__v":0,"version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-12-09T23:27:35.491Z","from_sync":false,"order":16,"slug":"javascript-api","title":"JavaScript Customization"},"parentDoc":null,"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":["598996415641e20025a709eb"],"next":{"pages":[],"description":""},"createdAt":"2016-12-20T07:27:56.258Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"This example shows how to add custom JavaScript components to a theme, and how to configure that JavaScript to run when a shopper visits a specific storefront page. This entry includes:\n\n* [Locating Page-Specific JavaScript](#locate)\n* [Adding Custom JS Functions](#extend)\n\n## <span id=\"locate\"> Locating Page-Specific JavaScript </span>\n\nIn this contrived example, let's say that we want to display `Hello world` alerts when a shopper visits a blog page. \n\nIn Stencil's base Cornerstone theme, the JavaScript that runs on the blog page can be found in \n`/cornerstone/assets/js/theme/blog.js`. If we want to run additional JavaScript on this page, we can add it to the `PageManager` class in this file, which is empty by default.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Prior to March 2017, the Cornerstone's default path name was `/stencil/`.\",\n  \"title\": \"Default Path Name Updated from \\\"stencil\\\" to \\\"cornerstone\\\"\"\n}\n[/block]\n## <span id=\"extend\"> Adding Custom JS Functions </span>\n\nIn the code example below, we have added three custom JavaScript functions (`blogHello`, `blogGreatday` and `blogGoodbye`) to the page by populating `PageManager`. Note how each function is called at a different time during the page's life cycle:\n\n```\nimport PageManager from '../page-manager';\n\nexport default class Blog extends PageManager {\n    blogHello() {\n        alert('Hello world from blog.js');\n    }\n    blogGreatday() {\n        alert('Have a great day from blog.js');\n    }\n    blogGoodbye() {\n        alert('Goodbye world from blog.js');\n    }\n    before(next) {\n        this.blogHello();\n        next();\n    }\n    loaded(next) {\n        this.blogGreatday();\n        next();\n    }\n    after(next) {\n        this.blogGoodbye();\n        next();\n    }\n}\n```","excerpt":"Inserting custom JavaScript","slug":"js-local-basic","type":"basic","title":"Basic Non-npm Example"}

Basic Non-npm Example

Inserting custom JavaScript

This example shows how to add custom JavaScript components to a theme, and how to configure that JavaScript to run when a shopper visits a specific storefront page. This entry includes: * [Locating Page-Specific JavaScript](#locate) * [Adding Custom JS Functions](#extend) ## <span id="locate"> Locating Page-Specific JavaScript </span> In this contrived example, let's say that we want to display `Hello world` alerts when a shopper visits a blog page. In Stencil's base Cornerstone theme, the JavaScript that runs on the blog page can be found in `/cornerstone/assets/js/theme/blog.js`. If we want to run additional JavaScript on this page, we can add it to the `PageManager` class in this file, which is empty by default. [block:callout] { "type": "info", "body": "Prior to March 2017, the Cornerstone's default path name was `/stencil/`.", "title": "Default Path Name Updated from \"stencil\" to \"cornerstone\"" } [/block] ## <span id="extend"> Adding Custom JS Functions </span> In the code example below, we have added three custom JavaScript functions (`blogHello`, `blogGreatday` and `blogGoodbye`) to the page by populating `PageManager`. Note how each function is called at a different time during the page's life cycle: ``` import PageManager from '../page-manager'; export default class Blog extends PageManager { blogHello() { alert('Hello world from blog.js'); } blogGreatday() { alert('Have a great day from blog.js'); } blogGoodbye() { alert('Goodbye world from blog.js'); } before(next) { this.blogHello(); next(); } loaded(next) { this.blogGreatday(); next(); } after(next) { this.blogGoodbye(); next(); } } ```