Salesforce Commerce Cloud template overriding

Question

I'm new to SFCC and I have created an extremely basic controller in my custom cartridge.

'use strict';

var server = require('server');
var URLUtils = require('dw/web/URLUtils');

server.extend(module.superModule);

server.append('Show', function (req, res, next) { 
    var viewData = res.getViewData();
    next();
});

module.exports = server.exports();

It actually does nothing, but when I check the page using the toolbox, it says the controller comes from my custom cartridge (namely, Product.js), whereas the template comes from the storefront base cartridge, in spite of the fact I have added the template I wanted to modify (namely, productDetails.isml).

I made modifications into this template in my cartridge, but the website does not take them into account.

Can someone tell me why ?

Answer 1

Welcome to the SFCC ecosystem!

As of July 2023, Salesforce Commerce Cloud has three separate ISML page types that are rendered by the Product controller:

Default: product/productDetails.isml
Product Bundles: product/bundleDetails.isml
Product Sets: product/setDetails.isml

I recommend the following to ensure that you are utilizing the client-side code from your custom cartridge instead of the SFCC base cartridge:

• Include ISML templates: Add all 3 Product detail ISML templates into your custom cartridge templates directory.
• Configure cartridges path: Add your custom cartridge to the cartridges path within Business Manager, before the app_storefront_base cartridge.
• Include styles (Optional): To modify the existing product styles, add the required SCSS into your custom cartridge styles directory scss/product/detail.scss.