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.
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.
Related
I want to embed an Emscripten graphical application to a Vue SPA. The output of Emscripten is a .js and a .wasm file. I cannot get rid of the javascript file and write my own because it contains the proxy for the glfw API which I'm using for input handling.
I can load the javascript (with WASM) successfully with the following code:
This code injects a new <script> tag to the DOM and loads the javascript file.
injectScript(source) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = source;
document.head.appendChild(script);
document.head.removeChild(script);
}
// During mount
injectScript("xy.js")
I have a similar method that creates the global Module object for Emscripten using the DOM:
// template
<canvas id="canvas">
// During mount
injectCode(`
var canvas = document.getElementById('canvas');
var Module = {
canvas: canvas,
};
`);
This method works when I open the page for the first time. Since we are talking about a single page application the javascript context is kept and the same code fails to create the wasm context for the second time when I reopen the page.
I'm also interested in completely different solutions but I would like to keep glfw for input handling in the graphics code.
According to the Emscripten documentation the Module object supposed to have a destroy() method. I would try to call It when the Vue component unmounted but mine doesn't have It.
Tried to null the Module object during unmount and It didn't work.
I want to load my application at http://localhost:52856/CRUD/Products/List so then i can start working on the List.cshtml file instead of loading Index.cshtml at http://localhost:52856 .
Look i know i can just put a button at the index file so then it can redirect to path or use the navbar, but personally i don't want to do that every single time.Just load the application at the file.cshtml i want. But How can i do it?
If you don't like my comment you could do the following in Index.cshtml.cs
public IActionResult OnGet()
{
return new RedirectToPageResult("/CRUD/Product/List");
}
1. Include MVC as a service into our app.
we can optionally use another method called AddRazorPagesOptions() like so:
services.AddMvc().AddRazorPagesOptions(options =>
{
options.Conventions.AddPageRoute("/Customer/Index", "");
});
Within that AddRazorPagesOptions() method, we can set things like route conventions and the root directory for pages. It turns out that, to set a default route for a page.
2. remove or rename Pages/Index.cshtml
I use the Froala editor plugin inside my Aurelia app. It works pretty well.
We can pass custom parameters to the plugin in main.ts like below:
// Use the aurelia-froala-editor plugin.
aurelia.use.plugin('aurelia-froala-editor', config => {
config.options({
toolbarInline: true
})
});
Then inject the froala component inside a page:
<froala-editor></froala-editor>
But now I pass parameters directly inside my froala componont on my page:
<froala-editor value.two-way="post.content" config.bind="{
toolbarInline: true,
charCounterCount: false,
imageUploadURL: 'http://localhost:5000/api/froala/UploadImage',
fileUploadURL: 'http://localhost:5000/api/froala/UploadFile',
imageManagerLoadURL: 'http://localhost:5000/api/froala/LoadImages',
imageManagerDeleteURL: 'http://localhost:5000/api/froala/DeleteImage',
imageManagerDeleteMethod: 'POST'
}" event-handlers.bind = "{
'image.uploaded': imageUploaded,
'image.removed': imageRemoved,
'image.file.unlink': imageFileUnlink
}"></froala-editor>
It works pretty well also.
What did not seems to works is mixing parameters passed in main.ts and in the component on a page. The component on the page seems to ignore completely parameters passed at initialization of the plugin in main.ts.
For example if I move the charCounterCount parameter from the component on my page to the initialization in main.ts it is simply ignored.
I am composing my web app as a number of Aurelia "feature" apps - although I'm not using Aurelia features as such. Consequently in my html markup I have two entry points pointing to different apps:
<!-- Top Navigation Bar -->
<div aurelia-app="topnav"></div>
<!-- Main App-->
<div aurelia-app="main"></div>
I am using webpack and everything works perfectly using the single "main" app. Webpack generates a JS file "main.bundle.js" which I include in the src tag.
Things are not so straightforward when I added the "topnav" app. In webpack I tell the plugin to use a different aureliaApp name:
new AureliaPlugin({ aureliaApp: "topnav"}),
and, as you can see my HTML entrypoint also calls "topnav". Webpack generates a JS file "topnav.bundle.js" which I also include. I have a file called "topnav.ts" which contains the aurelia Cionfigure function which ends:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("nav")));
And a pair of files "nav.ts", "nav.html" which constitute my viewmodel and view.
When I run the app aurelia loads and the "nav" module code executes. But I then get an error - see below.
The module which it reports that it cannot find is the one entered into the HTML markup.
Should this work? Have I missed something?
I should add, everything seems to work. I can create and update properties in the viewmodel and these are bound to the view. It's just that this error is thrown.
You are doing nothing wrong, just unsupported scenario. Per official doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp
You can have only 1 auto entry module with aureliaApp configuration. To solve this, you just need to add PLATFORM.moduleName('topnav') to your main.ts (and put it on root level)
Another way to do is to bootstrap manually:
// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';
// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
// do your configuration
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('topnav'),
document.querySelector('#topnav')
);
});
// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
// aurelia.use.standardConfiguration();
// ...
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('app'),
document.querySelector('app')
)
});
I am trying to display a top banner in my theme (which is not the default classic one).
Specifically I modify header.tpl to include this (as in classic theme):
{block name='header_banner'}
<div class="header-banner">
{hook h='displayBanner'}
</div>
{/block}
But displayBanner does not appear as a valid hook to attach modules to it.
Do I have to register the hook somewhere else? If so, which would be the code?
This question further elaborates this one.
Thanks,
Registering hooks happens in a modules install method.
You can do the following for example in your module:
public function install()
{
$installed = (parent::install() && $this->registerHook('displayBanner'));
if ( $installed ) {
return true;
} else {
$this->uninstall();
return false;
}
}
then uninstall and reinstall your module.
You need to add your new hook into a theme.yml and set up the module on it, and after that just reset your theme to default Design->Theme & Logo->Reset to defaults.
theme.yml
hooks:
modules_to_hook:
displayBanner:
- your_module_name
example
Caveat: after resetting your theme will look like it is set up in the theme.yml file. If you have done any changes in the theme appearance from admin panel and didn't include it in theme.yml they gonna be lost.