SuiteCommerce Extension File Structure and Best Practices

SuiteCommerce extensions consist of several file types that are crucial for building and functioning correctly within the SuiteCommerce framework. Understanding the anatomy of an extension can greatly enhance efficiency and effectiveness in development.

What Types of Files Are Included in a SuiteCommerce Extension?

Extensions generally consist of the following essential file types:

• Entry Point: This is the core JavaScript file that gets executed when an extension is loaded into a site. It defines a module using asynchronous module definitions (AMD).
• Views: JavaScript files that dictate how the HTML page is constructed. They act as the bridge between the application’s UI and its JavaScript/data layers.
• Templates: These are files with a .tpl extension derived from the Handlebars framework, enabling rendering HTML dynamically based on provided models.
• Models: Classes that handle data synchronization between the frontend and backend. They facilitate a structured approach to managing data interaction.
• SuiteScript Services: Scripts that handle CRUD operations, acting similarly to RESTful API endpoints.
• Extension Manifest: Contains metadata and structural mapping for your extension, detailing what it does and its compatibility.

Entry Point

The entry point file is critical. Every JavaScript file in an extension must be a module defined with:

• Module name: Essential for referencing other modules.
• Dependencies: An array of other modules that this module depends upon.
• Callback: Code returned when the module is invoked.
• Return object: Must include properties that define the methods of the module.

Example Entry Point File:

1"text-purple-400">define('Acme.MyCoolExtension.MyCoolModule', [], "text-purple-400">function() {
2    'use strict';
3    "text-purple-400">return {
4        methodName: "text-purple-400">function() {
5            // Code...
6        }
7    };
8});

Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

Views

Views manage the template rendering process:

• SuiteCommerce or SCA 2020.2 or later: Use the SCView class.
• SCA 2020.1 or earlier: Extend Backbone.View for defining views.

Example View Definition:

1"text-purple-400">define('Acme.MyCoolExtension.MyCoolModule.View', ['SCView', 'acme_mycoolextension_mycoolmodule.tpl'], "text-purple-400">function(SCView, myTemplate) {
2    'use strict';
3 
4    "text-purple-400">return SCView.extend({
5        template: myTemplate,
6        getContext: "text-purple-400">function() {
7            "text-purple-400">return {};  // context data
8        }
9    });
10});

Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

Templates

Templates are processed to render HTML dynamically and use Handlebars syntax without including raw JavaScript. Example Template File: acme_mycoolextension_mycoolmodule.tpl Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Templates

Models

Models handle data interactions and are created according to SuiteScript versions:

• SuiteScript 2.0: Use the SCModel class.
• SuiteScript 1.0: Extend Backbone.Model.

Example Frontend Model in SuiteScript 2.0:

1"text-purple-400">define('Acme.MyCoolModule.Model', ['SCModel'], "text-purple-400">function(SCModel) { 
2    'use strict';
3    "text-purple-400">return SCModel.extend({
4        getData: "text-purple-400">function() {
5            // Logic to fetch data
6        }
7    });
8});

Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

SuiteScript Services

Services act as endpoints for CRUD operations and are structured similarly for both SuiteScript versions: SuiteScript 2.0 Service Example:

1"text-purple-400">define('Acme.MyCoolModule.Service', [], "text-purple-400">function() {
2    "text-purple-400">return {
3        post: "text-purple-400">function() {
4            // Logic "text-purple-400">for creating records
5        },
6        get: "text-purple-400">function() {
7            // Logic "text-purple-400">for reading records
8        }
9    };
10});

Location: Workspace/MyCoolExtension/Modules/MyCoolModule/SuiteScript2

Extension Manifest

The manifest file includes metadata about the extension's structure and compatibility: Location: Workspace/MyCoolExtension/manifest.json

By adhering to these structures and best practices, developers can create robust, efficient, and compatible SuiteCommerce extensions that enhance the overall eCommerce experience.

Who This Affects

• Developers: Responsible for creating and maintaining extensions.
• Administrators: Overseeing the proper deployment of SuiteCommerce extensions.
• Project Managers: Ensuring that the development meets business needs.