Creating Custom Modules in SuiteCommerce for Enhanced

Creating custom modules in SuiteCommerce allows developers to enhance the functionality of their websites by adding specific features tailored to their needs. This guide outlines key requirements and best practices for creating custom modules effectively.

What Are Custom Modules?

Custom modules are user-defined extensions within SuiteCommerce that add specific functionalities not included in the standard implementation. Leveraging these modules can significantly improve site customization and user experience.

Requirements for Custom Module Creation

When creating a custom module, consider the following important requirements:

• File Naming: Source files for SuiteCommerce Advanced (SCA) versions prior to 2019.2 use the .js extension, while versions 2019.2 and onwards utilize .ts for TypeScript.
• Directory Structure: The module's top-level directory must follow the naming format module_name@x.y.z, where module_name is unique, and x.y.z indicates the version.

Directory Locations

• SCA 2019.2 and Later: Custom modules reside within Advanced, Backend, and Commons. Create a sub-directory for custom modules, e.g., SC_20.1/extensions.
• SCA 2019.1 and Earlier: Custom modules should be placed under the Modules/extensions directory.

Essential Files and Structure

Each module must include specific files and a structured approach:

1. Directory Structure: Create a search-based directory layout that includes JavaScript, Sass, SuiteScript, and Template subdirectories.

2. Entry Point: The module must export an object with a mountToApp property.

   javascriptCopy

   1// MyNewModule.js  
   2"text-purple-400">define('MyNewModule', [
   3    'MyNewModule.Router'
   4], "text-purple-400">function (Router) {
   5    'use strict';
   6    "text-purple-400">return {
   7        mountToApp: "text-purple-400">function (application) {
   8            "text-purple-400">return "text-purple-400">new Router(application);
   9        }
   10    };
   11});

3. Router: Connect module functions to defined URLs.

   javascriptCopy

   1// MyNewModule.Router.js  
   2"text-purple-400">define('MyNewModule.Router', [
   3    'MyNewModule.View', 'Backbone'
   4], "text-purple-400">function (MyNewModuleView, Backbone) {
   5    'use strict';
   6    "text-purple-400">return Backbone.Router.extend({
   7        routes: {
   8            'my-">new-module': 'myNewModuleRouter'
   9        },
   10        initialize: "text-purple-400">function (application) {
   11            "text-purple-400">this.application = application;
   12        },
   13        myNewModuleRouter: "text-purple-400">function () {
   14            "text-purple-400">var view = "text-purple-400">new MyNewModuleView({ application: "text-purple-400">this.application });
   15            view.showContent();
   16        }
   17    });
   18});

4. View: Implement the view which calls the corresponding template.

   javascriptCopy

   1// MyNewModule.View.js  
   2"text-purple-400">define('MyNewModule.View', [
   3    'my_new_module.tpl', 'Backbone', 'jQuery'
   4], "text-purple-400">function (MyNewModuleTemplate, Backbone, jQuery) {
   5    'use strict';
   6    "text-purple-400">return Backbone.View.extend({
   7        template: MyNewModuleTemplate,
   8        events: {
   9            'click [data-action="test"]': 'testAction'
   10        },
   11        testAction: "text-purple-400">function () {
   12            alert("This is a test action");
   13        },
   14        getContext: "text-purple-400">function () {
   15            "text-purple-400">return {
   16                myNewModuleContextVar: 'myVariable'
   17            };
   18        }
   19    });
   20});

5. Template: Create templates using Handlebars for rendering UI.

   htmlCopy

   <h2>This is my template file for my new module. It takes variables, {{myNewModuleContextVar}}, passed from the View.</h2>

Additional Steps for Module Integration

1. Configuration: If needed, include a Configuration subdirectory in the module's directory, particularly in later versions of the SCA.
2. ns.package.json: Define all module dependencies in this file, necessary for the build process. Example structure of this file includes keys for directories like JavaScript, templates, and services.
3. Update distro.json: This is critical for ensuring the application recognizes the new module. Include your module in both the modules and javascript objects within this configuration file.

After creating the module, you can test and view your changes on a local server or by deploying through the developer tools in NetSuite. This ensures all features work correctly within the SuiteCommerce environment.

Conclusion

Creating custom modules in SuiteCommerce enables tailored site functionalities that enhance user experience. By adhering to the specified structure and following best practices, developers can implement effective customizations while maintaining ease of future upgrades.

Key Takeaways

• Custom modules extend SuiteCommerce functionalities tailored to specific needs.
• The directory structure and file naming conventions are crucial for successful implementation.
• Always maintain unique file names and module names to avoid conflicts.

Source: This article is based on Oracle's official NetSuite documentation.