versions:
Denali and Mont Blanc
Kilimanjaro (2017.2) version of SuiteCommerce Advanced
Aconcagua
Elbrus only see javasript
2018.2
2019.1 theme updation
2019.2 upto this we can create custom module
2020.1 from this create extension
2020.2
2021.1
2021.2
Create a Custom Module
In the ‘module’ folder create a ‘customization’ folder create a folder for ‘addresscustom@jj’ and then ‘templates’ folder copy the ‘address_details.tpl’ and ‘ns_package.json’ from ‘Suitecommerce’ -> Address@2.4.3 -> Templates -> address_details.tpl @ Tests-> ns_package.json
Then customized ns.package.tpl file has to change the dependencies like “template”:”Templates/*”
Then override the new custom module using paths.
Add path in distro
when creating module aware of following:
- module source file for SCA 2019.1 and earlier JavaScript files with .js file extensions.
module source file for SCA 2019.2 and later TypeScript files with .ts file extensions. - The directory for new custom module must contain an ns.package.json file to define all of the module dependencies required by the developer tools.
- You must update the distro.json file to ensure that your custom module is loaded into the application.
To add a custom module:
1 Create a custom module directory within your custom directory with the format of ModuleName@version.
2 Create the subdirectories within the module.like JavaScript, Sass, SuiteScript, and Templates subdirectories.
3 Create the necessary files for module.
Entry point – this file acts as an entry point to the module and must return an object containing the mountToApp property that receives the application as a parameter.
Router – in SuiteCommerce 2019.1 or later, use extensions. If you are on SuiteCommerce 2018.2 or earlier, this JavaScript file extends the Backbone router to map URL patterns to the views defined within the module.
View – view is called from the router. view contains a getContext function that describes all of the variables that are passed from the view to the template.
Template – file contains the markup used in combination with the views
4 If your custom module contains any configurable properties, you must include a Configuration subdirectory and place your Configuration Modifications within it.
5 Create a new ns.package.json file within the new custom module’s directory.This file must contain entries for all of the directories required by the module.
6 Update the distro.json file.Add an entry for the new module in the modules object.Define any application dependencies in the javascript object.
Model View Controller (MVC) and Backbone.js
All interaction between views and models are handled by the controller.To implement the MVC pattern, SuiteCommerce Advanced (SCA) uses the Backbone.js libraries.Backbone.js to define routers, views, and models/collections.
Structure of a Backbone.js Application:
Backbone.js to define routers, views, and models/collections.
- Routers: map URLs to client-side pages to methods that define actions and events. In feature modules, these methods initialize the views, models, and collections that handle the user interface and create frontend objects to handle data.Each router contains a routes object that defines the mapping between URLs and methods.
- Views: contain methods that define the behavior of the user interface. Views are commonly associated with a model or collection. When a view is initialized, its corresponding model is usually passed, ensuring that the view has access to the data within the model. Most views define listeners that notify the view when an element within the model is modified. These listeners enable a specific part of the application to be updated independently without having to reload the page.
With the Elbrus release of SCA and later, all views are composite views by default and extend Backbone.CompositeView.js.
Views do not define the HTML or CSS of a feature or component. Instead, they specify the template that defines the HTML code for the component or feature. The templating engine handles the rendering and updating of the HTML. - Models and Collections: define objects that contain data used by the application. They also define the methods that create, update, or delete data.
SCA Feature Module
Feature modules generally conform to the Model-View-Present (MVP) design paradigm prescribed by Backbone.js. Therefore, that they implement some combination of the following:
Entry Point: defines how the module interfaces with the top-level application.
Routers: direct URLs to client-side methods.
Views: listen to the user interface events and coordinate with the data required by the associated module.
Models, Collections, and Services: retrieve, create, and update data on the frontend and backend.