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

Customizing Javascript

Customizing JavaScript for Individual Pages

Here is a very simple example of customizing the JavaScript provided in the default Stencil theme. In a text editor, open the <theme-name>/assets/js/theme/product.js file. At the top of the Product class, insert the “Hello World” statement shown in bold below:

	export default class Product extends PageManager {
  constructor() {
      super();
  }

  before(next) {
      next();
  }

  loaded(next) {
      console.log("Hello World");
    // Init collapsible
    collapsible();
    [...]
}

In your browser, refresh any product-details pop-up or page to see your new "Hello World" message.

Bringing Handlebars Context Values into JavaScript

Within Stencil pages, you can inject any variables from the Handlebars context into your client-side JavaScript. You do so by calling the Stencil custom Handlebars helper named inject, shown below:

{{inject 'productThumbSize' theme_settings.productthumb_size}}

You could inject the above statement into a page template rendered with page_type = "Product" (for example: <theme-name>/templates/pages/product.html). Stencil’s PageManager class will be provided this context:

export default class Product extends PageManager {
  constructor() {
      super();
  }

  before(next) {
      next();
  }

  loaded(next) {
      console.log("Hello World");
      console.log(this.context.productThumbSize);
  }

}

Note that the console.log(this.context.themeImageSizes); statement will report your configured image size, following the "Hello World" message that you previously defined in the Customizing JavaScript for Individual Pages above.

Installing Various JavaScript Libraries

Once 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: https://github.com/jquery/jquery.

To install this particular library for Stencil themes, you would entering the following on the command line:

npm install jquery

Next, you would open <theme-name>/assets/js/theme/product.js, and insert the statements excerpted below:

import $ from 'jquery';

$('.myElement').click(() => {
    alert("You clicked myElement");
});

As always, for specifics, refer to your chosen library’s documentation.

Example Links

For more-extended examples of adding custom JavaScript to a theme, see the Custom Javascript Implementations section.