SFCC — How To Override Base Cartridge Helpers

I’ve seen many practical guides explaining how to customize or extend SFRA controllers, but I haven’t come across a practical guide on how to customize or extend helpers in a way that aligns with SFCC’s core principles — modifying only what’s necessary without touching base. That’s why I decided to create this guide.

So let’s dive straight into the topic.

For a basic example, let’s consider the native SFRA storefront function named getAddressFromRequest. It parses the address submitted through the request form and returns it as an object.

...

function getAddressFromRequest(req) {
    return {
        firstName: req.form.firstName,
        lastName: req.form.lastName,
        address1: req.form.address1,
        address2: req.form.address2,
        city: req.form.city,
        stateCode: req.form.stateCode,
        postalCode: req.form.postalCode,
        countryCode: req.form.countryCode,
        phone: req.form.phone
    };
}

...

module.exports = {
    ...
    getAddressFromRequest: getAddressFromRequest
    ...
};

Note: The (…) markers I added in the code block denote unrelated sections I removed from the file.

Get Volkan Ulker’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In a project, let’s assume that beyond the fields required in the native SFRA shipping form, you also need to store the phone prefix as a separate field. In that case, you would need to create an additional field for the phone prefix and parse it within the function getAddressFromRequest. (For sure, there will be other requirements to make this field totally work; however, to stay focused on the purpose of this article, I will demonstrate only the customization of the helper function)

In this case, we can take advantage of the Module class’s superModule function in SFCC to override only this specific function. To do this, just as we do when extending a controller, we need to create a script file with the same path and the same name in the cartridge we want to override.

'use strict';

const base = module.superModule;

function getAddressFromRequest(req) {
    return {
        firstName: req.form.firstName,
        lastName: req.form.lastName,
        address1: req.form.address1,
        address2: req.form.address2,
        city: req.form.city,
        stateCode: req.form.stateCode,
        postalCode: req.form.postalCode,
        countryCode: req.form.countryCode,
        phone: req.form.phone,
        // CUSTOMIZATION STARTS
        phonePrefix: req.form.phonePrefix
        // CUSTOMIZATION ENDS
    };
}

module.exports = Object.assign({}, base, {
    getAddressFromRequest: getAddressFromRequest
});

Next, we create a function with the same name as the one we want to override, customize only the part that needs modification, and then use the Object.assign(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method to override just that specific function, as shown above. And with this way, we have successfully customized the function as needed.

See you in the next article.