Custom Modules

What are Custom Modules?

With Custom Modules, it is possible for an agency or developer to create a content element that extends the functionality of any page created with the Styla page editor.

This Custom Module will be available in the editor as another element for editors to add to one or more pages. Inside the custom module it is possible to create a completely custom DOM structure, custom styling, custom data schema and even custom JavaScript to control the business logic.

Custom modules are added and maintained using in the Custom Modules Manager.

• Creating a custom module
• Custom Modules Manager
  • List view
  • Adding a custom module
  • Editing a custom module
  • Deleting a custom module
  • Adjusting a custom module's version

Creating a Custom Module

Custom modules are created by defining the HTML structure using a handlebars template file, the UI fields schema in the Editor and an optional Javascript file to support more dynamic functionality.

The Custom Module's files can be hosted anywhere, for example on an S3 bucket, On the customers Big Commerce WebDAV, or on a different server. It is important to make sure that the files remain accessible by the Styla Editor and your publishing front by setting the appropriate CORS response headers in the chosen hosting. In addition, If you expect high traffic on your site, we recommend using a fast CDN for distributing these assets.

The following developer documentation provides a detailed explanation on how to create a new custom module and the syntax of each file: 

https://documentation.styla.eu/custom-modules/getting-started 

 

Accessing the Custom Modules Manager

The Custom Modules Manager can be accessed in the Styla Experience Manager by hovering over the gear icon in the top right and clicking Custom Modules in the dropdown menu

In the list view, you can view and manage all custom modules configured on a front. Each row contains information and actions related to the custom module.

List view

The list view provides the following information and actions:

1. The name defined when adding the custom module
2. The custom module's version
3. Version control actions
4. Whether a custom module is hosted by Styla
5. Delete and edit actions

 

Adding a custom module

To add a new custom module, click on the "+ Add New Module" above the list view. After adding the custom module's fields, click "OK" to add the custom module.

You can now use this custom module while editing pages and layout standards.

Each custom module requires the following information:

Field Name	Description	Required
Name	This is what will be shown in the Editor UI, e.g. when dragging and dropping a new module. This can be a descriptive name and can contain spaces. E.g. Countdown Module	Yes
Type	This is the so-called “slug” of the module. It will be used as a reference when a module is stored in the Styla DB. Therefore, it needs to be a unique identifier (cannot be the same as another module for the same front) and cannot contain spaces or special characters. The slug is case-insensitive, and will anyway be converted to all uppercase by our system. We will also automatically prepend your front name followed by a dot. The type is auto-generated by the Custom Modules Manager based on the module's name.	Yes (auto-filled)
Schema URL	A URL pointing to a JSON file containing the custom module’s data structure definition.	Yes
Handlebars URL	A URL to a handlebars template file that will be used for rendering the DOM structure of the module (*).	Yes
Javascript URL	A URL pointing to a JavaScript file that would be executed to extend the functionality or business logic of the module.	No

Editing a custom module

To edit a custom module's fields (e.g. name, handlebars URL) click on the pencil icon in the row for the respective module. After adjusting the custom module's fields, click "OK" to confirm the changes.

Pages or Layout Standards that contain this custom module would need to be re-published to reflect the changes on your storefront.

Deleting a custom module

To delete a custom module's fields (e.g. name, handlebars URL) click on the bin icon in the row for the respective module and confirm deletion in the pop-up.

Make sure the custom module isn't used on any page or layout standard before deletion.

Adjusting a custom module's version

Custom modules that are hosted by Styla support versioning.

When a new version of a custom module is released, a new version is created but is not applied by default. It's possible to choose to update a specific module's versions or update all custom module's versions using the "Update all" button above the list view.

Based on the currently applied version, the following buttons will be shown:

This button is shown when there is a newer version available than the one currently applied. Clicking on this button applies the newest version. 

Pages or Layout Standards that contain this custom module would need to be re-published to reflect the changes on your storefront.

This button is shown when the custom module's version is the latest. Clicking on this button would auto-update the version whenever a new one is released.

Pages or Layout Standards that contain this custom module would need to be re-published if the version auto-updated to reflect the changes on your storefront.

This button is shown when the custom module's version is set to auto-update. Clicking on this button would lock the current version and disable auto-updating.

This label is shown when the custom module isn't hosted by Styla and therefore doesn't support versioning. For updates, please contact the agency or developer responsible for creating the custom module.