> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Customizing JavaScript

Most [Cornerstone theme](https://github.com/bigcommerce/cornerstone) page template files located in `templates/pages/` have a corresponding `.js` file in `assets/js/theme/`. These JavaScript files contain event handlers and logic for managing page specific elements and actions.

For example, `assets/js/theme/product.js` corresponds to `templates/pages/product.html` and contains a `productReviewHandler()` and `bulkPricingHandler()`. These functions are implemented within a derived `Product` class which extends an abstract class called `PageManager`. This same pattern is repeated in all `assets/js/theme/*.js` files.

By default, all derived `PageManager` classes contain an `onReady` method functionally similar to `JQuery.ready()`. Additionally, certain pages have unique event handlers. For example, the `cartUpdate` handler in `assets/js/cart.js` runs each time certain cart elements are changed. Developers can customize and enhance page behavior and functionality by editing code within these event handlers or by creating their own event handlers.

To demonstrate, this article describes how to add some very simple JavaScript to `product.js`.

## Modifying a page's JavaScript

In this example, we will add some "Hello World!" text to the product page's `onReady` event. We'll first add a call to the function. Then, we will implement the function itself.

In `assets/js/theme/product.js` file, add a call to `this.helloWorld()` to the bottom of the `onReady()` method, which we'll implement in the next step.

```js showLineNumbers={false}
export default class Product extends PageManager {
    constructor(context) {
        super(context);
        this.url = window.location.href;
        this.$reviewLink = $('[data-reveal-id="modal-review-form"]');
        this.$bulkPricingLink = $('[data-reveal-id="modal-bulk-pricing"]');
    }

    onReady() {
      // ...
      // Example Code
      this.helloWorld();
    }
    // ...
}
```

Next, implement the `helloWorld()` function by adding it to the `Product` class just after the closing `onReady()` bracket.

```javascript showLineNumbers={false}
export default class Product extends PageManager {
    constructor(context) {
        super(context);
        this.url = window.location.href;
        this.$reviewLink = $('[data-reveal-id="modal-review-form"]');
        this.$bulkPricingLink = $('[data-reveal-id="modal-bulk-pricing"]');
    }

    onReady() {
      // ...

      // Example Code
      this.helloWorld();
    }

    // Example Code
    helloWorld() {
        console.log("[assets/js/theme/product.js]: Hello World!");
    }
    // ...
}
```

In your browser, refresh any product details pop-up or page to see your new "Hello World" message. If you are using the Stencil CLI and browsing to localhost, you may need to restart for the most recent changes to be reflected.

## Bringing in Handlebars context

You can inject any variables from the Handlebars context into your client-side JavaScript by using the `{{inject...}}` expression.

```html showLineNumbers={false}
{{inject 'productThumbSize' theme_settings.productthumb_size}}
```

To inject `theme_settings.productthumb_size` into the product page's context, add `{{inject 'productThumbSize' theme_settings.productthumb_size}}` just under `{{#partial "page"}}` in `templates/pages/product.html<`:

```html showLineNumbers={false}
product:
    videos:
        limit: {{theme_settings.productpage_videos_count}}
    reviews:
        limit: {{theme_settings.productpage_reviews_count}}
    related_products:
        limit: {{theme_settings.productpage_related_products_count}}
    similar_by_views:
        limit: {{theme_settings.productpage_similar_by_views_count}}

{{#partial "page"}}
    <!-- Context Injection Example: -->
    {{inject 'productThumbSize' theme_settings.productthumb_size}}
    <!-- End Context Injection Example -->
    <!-- ... -->
{{/partial}}
{{> layout/base}}
```

The injected `productThumbSize` property can then be accessed from `product.js` by calling `this.context.productThumbSize`.

```js showLineNumbers={false}
export default class Product extends PageManager {
    constructor(context) {
        super(context);
        this.url = window.location.href;
        this.$reviewLink = $('[data-reveal-id="modal-review-form"]');
        this.$bulkPricingLink = $('[data-reveal-id="modal-bulk-pricing"]');
    }

    onReady() {
      //...
        // Example Code
        this.helloWorld();
    }

    // Example Code
    helloWorld() {
      console.log("[assets/js/theme/product.js]: Hello World!");
      console.log("[assets/js/theme/product.js]: " + this.context.productThumbSize);
    }
    // ...
}
```

Note that the `console.log(this.context.themeImageSizes);` statement will report the configured image size, following the "Hello World!" message previously defined in [Modifying a Page's JavaScript](#modifying-a-pages-javascript) above.

```
[/assets/js/theme/product.js]: Hello World!
product.js:63 [/assets/js/theme/product.js]: 100x100
```

## Installing libraries

Once you have installed the default Stencil theme, you can add custom JavaScript libraries with npm.

```shell showLineNumbers={false}
npm install jquery
```

Next, you would open `assets/js/theme/product.js`, and insert the statements excerpted below:

```js showLineNumbers={false}
import $ from 'jquery';

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

For additional installation instructions, refer to your chosen library's documentation.