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

Data Tags/Event Hook Reference

Stencil Data Tags and Event Hooks

Stencil themes provide the following chains of data tags, delegated DOM (Document Object Model) events, emitted Stencil event hooks, and Stencil event parameter(s).

Cart Item Added

Hook for items added to the customer’s shopping cart.

Function Signature:

itemAdd() {
    this.$body.on('submit', '[data-cart-item-add]', (event) => {
        this.emit('cart-item-add', event, event.target);
    });
}
Data Tag Delegated DOM Event Stencil Event/Hook Stencil Event Parameter(s)
data-cart-item-add submit cart-item-add event, event.target

Faceted-Search Events

Hooks for faceted-search selections that the customer initiates or submits.

Function Signature

searchEvents() {
  this.$body.on('click', '[data-faceted-search-facet]', (event) => {
        this.emit('facetedSearch-facet-clicked', event);
  });
 
  this.$body.on('submit', '[data-faceted-search-range]', (event) => {
        this.emit('facetedSearch-range-submitted', event);
  });
}

Data Tag Delegated DOM Event Stencil Event/Hook Stencil Event Parameter(s)
data-faceted-search-facet click facetedSearch-facet-clicked event
data-faceted-search-range submit facetedSearch-range-submitted event