Bigcommerce Custom JS Classes

Add custom JS to a Bigcommerce theme specific to certain custom templates

Problem

Bigcommerce doesn't bundle HTML files the same as JS files, so if you have a long HTML file that's mostly a <script> tag full of JS, it can bog down the page. It can be confusing to know where to put code for custom templates in the JS of Bigcommerce as well.

Solution

Following the extending JavaScript docs it's very easy to add custom JS to a custom template in Stencil. It only requires 3 parts:

A custom JavaScript file that exports a class
A custom template that you want to run this code on
Importing the JS into the template in the app.js customClasses object

If you follow along in the Gist, it has a clear example of what is expected to get it up and running, including a nice package.json script to run that automatically builds your dev webpack after each change in your JS file.

Also included is how you can add custom key value pairs to your context in the JavaScript file, making it SUPER easy to extend your template functionality.

Links