Theme Objects

Stencil template objects expose dynamic page data. Not all objects are available on every page; which objects are present depends on page type. Below are instructions on viewing a page’s context while developing locally and how to access that context’s data via Handlebars expressions and JavaScript. For a complete template object reference, see Models.

Viewing a Page’s Context

To get the template context in plaintext JSON for a page served locally by Stencil CLI, add debug=context to the URL query string. To get the template context JSON ouput to a rendered page, use debug=bar. Example:

  • http://localhost:3000/?debug=context
  • http://localhost:3000/?debug=bar

Here’s a javascript bookmarklet that uses the fetch API to dump the context to the console:



fetch(window.location.pathname + "?debug=context")
.then(function(response) {

Using Handlebars

The templating language used by Stencil themes is Handlebars; use it in templates to access dynamic page data:

{{#if page.sub_pages}}
<nav class="navBar navBar--sub">
    <ul class="navBar-section account-navigation">
    {{#each page.sub_pages}}
        <li class="navBar-item"><a class="navBar-action" href="{{url}}">{{title}}</a></li>

Using PageManager JavaScript

JavaScript files in assets/js/theme/ that extend the PageManager class have a context property for accessing the page context:

// assets/js/theme/global.js

export default class Global extends PageManager {
    onReady() {
        cartPreview(this.context.secureBaseUrl, this.context.cartId);
        // ...
    // ...

Client-Side Injection

To use dynamic data from the template in client-side code, use the inject helper:

<!-- templates/pages/category.html -->

{{inject "categoryId"}}

<!-- ... -->

    var jsContext = JSON.parse({{jsContext}});

client code:

// client-side code