Overview
In Salesforce Commerce Cloud (B2C), controllers, models, and decorators form the core architecture used to manage storefront data, render pages, and extend functionality. With the shift from pipelines to SFRA controllers, understanding how these components work together is essential for developing scalable and customizable storefront features.
Prerequisites
- Access to an SFCC Sandbox
- Workspace set up in Visual Studio Code or Eclipse
- SFRA base code from Salesforce Commerce Cloud GitHub
- Working knowledge of cartridge structure
1. What Are Controllers?
Controllers are server-side JavaScript files responsible for handling storefront requests, managing data flow, and rendering views using ISML templates.
Key Points:
- Stored inside the /cartridge/controllers folder
- Must be exported to be accessible
- Follow the route format: ControllerName-RouteName
Example Code:
'use strict';
const server = require('server');
server.get('Show', function (req, res, next) {
res.render('helloWorld');
next();
});
module.exports = server.exports();
2. Route Structure & URL Access
Example storefront URL Format:
/on/demandware.store/Sites-SiteID-Site/ControllerName-RouteName
3. Route Methods
4. Middleware & req, res, next()
Middleware replaces the guard behavior from SiteGenesis.
Example:
server.get('Show',
consentTracking.consent,
cache.applyDefaultCache,
function(req, res, next) {
res.render('home/practiceHome');
next();
}
);
5. Extending Controllers
SFRA allows controller extension using cartridge layering using append, prepend, and replace methods.
Example:
server.extend(module.superModule);
server.prepend('Show', function(req, res, next){
let viewData = res.getViewData();
viewData.customParam = 'Extra Info';
res.setViewData(viewData);
next();
});
module.exports = server.exports();
6. Models
Models return structured JSON objects used for rendering templates.
Example:
function account(currentCustomer, addressModel, orderModel) {
module.superModule.call(this, currentCustomer, addressModel, orderModel);
this.account.practiceField = currentCustomer.custom.practiceField || null;
}
module.exports = account;
7. Make Your Life Easier with Model Decorators
Model decorator gives us the ability to add behavior to an object dynamically. This is used so that we can divide a large amount of data for a model into smaller parts that are function-specific. We call these function-specific parts decorators. Then we can use one or more of these decorators to add or override the functionality of the original object. Some of the core models are extendable and configurable through the decorator pattern.
Decorators
Decorators allow modular model logic to be reused across different model implementations.
Example:
module.exports = function (object, product, quantity) {
Object.defineProperty(object, 'isOrderable', {
enumerable: true,
value: product.availabilityModel.isOrderable(quantity)
});
};
Conclusion
Controllers manage request handling and response rendering, models structure data for templates, and decorators modularize logic for reusability. Understanding these concepts forms a strong foundation for SFCC development.
End Note
Controllers and Models in SFCC are quite easy to understand once you see how they work together . Even if you are new to the platform , you can start using them quickly in real project scenarios. Hopefully, this overview helps you take first step and begin building confidently in SFCC
If you’d like to explore more, you may also look into working with OCAPI and hooks for deeper customization in the Salesforce Commerce Cloud.
Have any questions? Feel free to drop an email to support@astreait.com or visit astreait.com to schedule a consultation.