Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Basic Non NPM Example

Locating Page-Specific JavaScript

In this 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.

Default Path Name Updated from "stencil" to "cornerstone"

Prior to March 2017, the Cornerstone’s default path name was /stencil/.

Adding Custom JS Functions

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();
    }
}