Stencil custom page javascript not firing

0
votes

I'm trying to create a custom web page in stencil website and trying to add custom javascript module. This is the html file named '/templates/pages/custom/page/customz.html' 

    {{~inject 'template' template}}
    <h2>Hello World!</h2>
    <body>
    Some custom content!
    <body>
    <script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
    <script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
    <script>window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();</script>

This is the javascript file named '/asset/js/theme/customz.js'

import PageManager from './page-manager';

export default class Customz extends PageManager {
    onReady() {
        console.log('onReady');
    }

    constructor(context) {
        super(context);
        console.log(context);
    }
}

then i added this in app.js file

const customClasses = {
    'pages/custom/page/customz': () => import('./theme/customz')
};

and also added it .stencil file to test it locally I also created the web page in bigcommerce dashboard.

The problem i have is that the HTML is loaded but the Javascript file is not injected (i cannot see the console log strings in console or other js logic i insert).

Where can be the problem?

2
javascriptbigcommercecornerstone

2 Answers

0
votes

The place I usually start when troubleshooting a custom template is the related section on the BigCommerce Dev Center here: https://developer.bigcommerce.com/stencil-docs/storefront-customization/custom-templates#troubleshooting-template-authoring

If you've verified the version of the Stencil CLI and URL you're using, try using this same code with the base Cornerstone theme on the latest version.

0
votes

you need add link for Windows too:

Look like:

const customClasses = {
    'pages/custom/page/customz': () => import('./theme/customz'),
    'pages\\custom\\page\\customz': () => import('./theme/customz')
};

And your custom page must contains:

`{{~inject 'template' template}}
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
<script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
<script>window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();</script>`

If don`t connection on base file from layout.