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

Page Types and Life Cycle

stencil-utils Library

stencil-utils is our supporting library for events and remote interactions.


Javascript API

Stencil themes include an API for running JavaScript on a per-page basis. To properly write JavaScript for your theme, you will have the following page types available to you:

  • “pages/account/addresses”
  • “pages/account/add-address”
  • “pages/account/add-return”
  • “pages/account/add-wishlist”
  • “pages/account/recent-items”
  • “pages/account/download-item”
  • “pages/account/edit”
  • “pages/account/return-saved”
  • “pages/account/returns”
  • “pages/auth/login”
  • “pages/auth/account-created”
  • “pages/auth/create-account”
  • “pages/auth/new-password”
  • “pages/blog”
  • “pages/blog-post”
  • “pages/brand”
  • “pages/brands”
  • “pages/cart”
  • “pages/category”
  • “pages/compare”
  • “pages/errors”
  • “pages/gift-certificate/purchase”
  • “pages/gift-certificate/balance”
  • “pages/gift-certificate/redeem”
  • “global”
  • “pages/home”
  • “pages/order-complete”
  • “pages/page”
  • “pages/product”
  • “pages/search”
  • “pages/sitemap”
  • “pages/subscribed”
  • “page/account/wishlist-details”
  • “pages/account/wishlists”

These page types correspond to the pages within your theme. Each of these page types maps to an ES6 module that extends the base PageManager abstract class:

pages/blog extending the page PageManager class
export default class Blog extends PageManager {
        constructor() {
            //Setup code goes here – attach to internals, and use internals as you would 'this'
        }
    }

JavaScript Template Context Injection

Occasionally, you might need to use dynamic data from the template context within your theme’s client-side application code. Two helpers are provided to help achieve this.

The inject helper allows you to compose a json object with a subset of the template context to be sent to the browser:

{{inject "stringBasedKey" contextValue}}

To retrieve the parsable JSON object, just call {{jsContext}} after all of the {{inject}} calls.

For example, to set up the product name in your client-side app, you can do this if you’re in the context of a product:

{{inject "myProductName" product.title}}

<script>
// Note the lack of quotes around the jsContext handlebars helper, it becomes a string automatically.
var jsContext = JSON.parse({{jsContext}}); //jsContext would output "{\"myProductName\": \"Sample Product\"}" which can feed directly into your JavaScript

console.log(jsContext.myProductName); // Will output: Sample Product
</script>

You can compose your JSON object across multiple pages, to create a different set of client-side data depending on the currently loaded template context.

Stencil’s Cornerstone base theme makes the jsContext available as this.context, both on the active page scoped and on global PageManager objects.