Rendering an ISML Template in SFRA (Salesforce Commerce Cloud)

Sumit Vadhera
2 min readMar 13, 2022

Salesforce B2C Commerce uses ISML templates to generate dynamic pages. Templates mix HTML with a proprietary language extension referred to as Internet Store Markup Language (ISML). An ISML template comprises general HTML markup, ISML tags, and script expressions.

In this example, in order to render an ISML page lets create another controller, for example- “HelloISML.js” under the yourcustomapp/cartridges/app_custom/cartridge/controllers folder:

‘use strict’;

var server = require(‘server’);

server.get(‘Show’, locale, function (req, res, next) {

res.render(‘ISMLTest’, {myparam: “Hello from ISML”});

next();

});

module.exports = server.exports();

Create an ISML file named, for example- ISMLTest.isml inside yourcustomapp/cartridges/app_custom/cartridge/templates/default/ folder and copy the below code:

<h1 style=”background-color:purple;”>${pdict.myparam}<h1>

Here res.render(‘TemplateName’, pdictData) outputs an ISML template back to the client and assigns data to pdict. In the rendering template, we can use pdict variable as shown in the example above to print the passed string.

Output: To access the route, simply hit the path

https://xxxx-xxx.sandbox.usxx.dx.commercecloud.salesforce.com/on/demandware.store/Sites-sfrademo-Site/default/HelloISML-Show

Congratulations you have rendered your first ISML template using an SFRA controller. We will see more examples in future articles. Thanks for reading!

--

--

Sumit Vadhera

Salesforce enthusiast, wanderer, finding the beauty all around us.