Anatomy of a SuiteCommerce Extension...

TL;DR Opening

This article explains the structure of SuiteCommerce extensions, detailing essential components such as JavaScript modules, views, templates, and models. Understanding these components is crucial for developers working on SuiteCommerce customization and extension.

What Makes Up a SuiteCommerce Extension?

SuiteCommerce extensions consist of several types of files, primarily focused on enhancing the functionality of eCommerce sites built on the SuiteCommerce platform. When creating a baseline extension, the following files are typically included:

Entry Point

The entry point file is pivotal in any extension utilizing JavaScript. It serves as the initial point of contact when the extension is loaded into a site's application. This is where a module is defined using Asynchronous Module Definition (AMD) with two core libraries: RequireJS and almond. The primary components of the entry point include:

Module Name: Each module must have a unique name for inter-module reference.
Dependencies: A list of required modules, passed as an array of string names.
Callback: The code executed when the module is invoked.
Returned Object: Defines the methods and properties of the module.

Example File:
Acme.MyCoolExtension.MyCoolModule.js
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

Views

Views connect the application and the rendered HTML page, instructing how to construct the HTML and linking the UI to both JavaScript and data layers. Depending on the version of SuiteCommerce, the way you define these views varies:

For SuiteCommerce or SCA 2020.2 or later: Use the SCView class for added methods tailored for SuiteCommerce.
For SCA 2020.1 or earlier: Extend Backbone.View to define your views.

Example File:
MyCoolModule.View.js
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

Templates

SuiteCommerce uses .tpl files processed with the Handlebars framework for templating instead of raw HTML. These templates merge HTML and dynamic data while avoiding direct JavaScript inclusions.

Example File:
acme_mycoolextension_mycoolmodule.tpl
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Templates

Models

Models handle the extension’s data layer and are essential for synchronizing data between the frontend and backend. Depending on the version, models can be defined as follows:

For SuiteCommerce or SCA 2020.1 or later: Use the SCModel class, which builds upon Backbone.Model.
For SCA 2019.2 or earlier: Extend Backbone.Model to create your models.

Frontend Model Examples:

SuiteScript 2.0: MyCoolModule.SS2Model.js
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript
SuiteScript 1.0: MyCoolModule.Model.js
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/Javascript

SuiteScript Services

SuiteScript, NetSuite's proprietary scripting language, allows for the creation of services that mimic RESTful API endpoints, handling CRUD operations efficiently.

Example File for SuiteScript 2.0:
MyCoolModule.Service.ss
File Location: Workspace/MyCoolExtension/Modules/MyCoolModule/SuiteScript2

Extension Manifest

The manifest file serves as a roadmap detailing the structure and metadata of your extension and is crucial for compatibility with various versions and products. It is automatically created when developing a baseline extension.

Example Manifest File:
Workspace/MyCoolExtension/manifest.json

Key Takeaways

The anatomy of a SuiteCommerce extension includes entry points, views, models, templates, and SuiteScript services.
Use modern classes like SCView and SCModel for enhanced functionality in newer SuiteCommerce versions.
Templates use Handlebars for dynamic content rendering instead of direct HTML.
Create a manifest file for providing metadata about the extension's structure and compatibility.

Frequently Asked Questions (4)

Do I need to use specific classes for defining views in SuiteCommerce extensions depending on the version?

Yes, if you're using SuiteCommerce or SCA 2020.2 or later, you should use the SCView class. For SCA 2020.1 or earlier, you need to extend Backbone.View.

Is there a specific location where each file type should be stored in a SuiteCommerce extension?

Yes, each file type such as entry points, views, templates, models, and services have designated locations within the extension's directory structure, under paths like Workspace/MyCoolExtension/Modules/MyCoolModule.

How do SuiteCommerce extension models handle data synchronization?

Models are designed to handle data synchronization between the frontend and backend systems. They utilize SCModel for SuiteScript 2.0 or extend Backbone.Model for SuiteScript 1.0 to manage data interactions.

What is the role of the extension manifest in a SuiteCommerce extension?

The extension manifest contains metadata and structural mapping of the extension. It outlines what the extension does and ensures compatibility with different components.

Anatomy of a SuiteCommerce Extension Development