CODEWITHSUNDEEP
bigcommerce
Mike Nielsen
Mike Nielsen

Reputation: 21

Cannot map custom js to my custom template in bigcommerce shopica theme with stencil

I 've added custom page and js for it in stencil bigcommerce.

It works fine locally but when I push it on bigcommerce, it does not work well.

I have added custom template template/pages/custom/page/custom-layout.html and I've added custom js for it in assets/js/custom/custom.js.

I've configured some loading settings in assets/js/app.js as follows:

const customClasses = {
    'pages\\custom\\page\\custom-layout': () => import('./custom/custom')
}

It works locally; but, on a server, it does not at all.

Upvotes: 2

Views: 305

Answers (1)

Jordan Arldt
Jordan Arldt

Reputation: 376

Your customClasses object should use forward slashes like so:

"pages/custom/page/custom-layout": () => import("./custom/custom")

You should also make sure that your custom.js file is extending the PageManager class like so:

import PageManager from "../page-manager";

export default class CustomClass extends PageManager {
    constructor(context) {
        super(context);
        // other constructor code here
    }

    onReady() {
        // your code for the onReady event here
    }

    // ... any other code
}

If this is done properly your custom JS class will be injected to the page. However, once you bundle and upload your theme, you must also make sure to apply your custom template to the page, as the config.stencil.json file is not packaged with your theme. This can be done from within the BigCommerce control panel by going to Storefront > Web Pages > [Your page] and changing the Template Layout File accordingly.

Upvotes: 1

Related Questions