Overrides

In SFCC the same file can live in several cartridges, and the storefront uses the copy from the cartridge that comes first in the site's cartridge path. That is how you customize SFRA or an integration without touching the original. Intellij SFCC creates the override at the right path in one step and shows every copy of the file you have open

STstorefront

Sandbox 01

version2

Product.js

1'use strict';

3var server = require('server');

4var cache = require('*/cartridge/scripts/middleware/cache');

5var consentTracking = require('*/cartridge/scripts/middleware/consentTracking');

7server.get('Show', cache.applyPromotionSensitiveCache, consentTracking.consent, function (req, res, next) {

8 var productHelper = require('*/cartridge/scripts/helpers/productHelpers');

9 var showProductPageHelperResult = productHelper.showProductPage(req.querystring, req.pageMetaData);

10 var productType = showProductPageHelperResult.product.productType;

Overrides of Product.js

app_custom - Current

app_storefront_base

Override Product.js

Select cartridge

app_customExtend controller: server.extend(module.superModule)Copy file content

CancelOK

storefrontapp_storefront_basecartridgecontrollersProduct.js

RefArch (3)LFUTF-8

The floating toolbar in the editor overrides the current file in another cartridge. Controllers can start from server.extend(module.superModule), scripts from module.superModule, or from a copy of the file. Once a file has overrides, the second button lists every cartridge that has one

Override a file

Start from the original

Right-click the file in the Project view, an editor tab or the editor and choose Override ... in Another Cartridge . The same button is on the floating toolbar at the top of the editor

Pick the cartridge

The Override Product.js dialog opens with Select cartridge. The list has your linked cartridges, in the order of the selected site's cartridge path, or by name in the global scope. Type to filter it

Choose how to start

Check one option, or none for an empty file, see the table below. Then click OK

Edit the new file

The plugin creates the file at the same path inside the chosen cartridge, adds any missing folders and opens it. With Auto Upload on, the new file is uploaded right away

The menu label follows the selection: Override Controller in Another Cartridge, Override Templates in Another Cartridge, Override Properties in Another Cartridge, Override Script in Another Cartridge, and so on. You can override several files at once, the dialog then reads "Override multiple files"

Option	Shown for	The new file
Extend controller: server.extend(module.superModule)	Controllers	A controller that extends the original, ready for `server.append`, `server.prepend` or `server.replace`
Extend script: var base = module.superModule	Other JavaScript files	A script that starts from the original module and exports it
Copy file content	Any file	A full copy of the original
Nothing checked	Any file	An empty file

The options exclude each other: checking Copy file content clears the extend option and the other way round

Extend controller

'use strict';

var server = require('server');
server.extend(module.superModule);

module.exports = server.exports();

Extend script

'use strict';

var base = module.superModule;

module.exports = base;

If the chosen cartridge already has a file at that path, the plugin opens it and doesn't overwrite it

See every copy of a file

When the file you have open exists in more than one linked cartridge, the floating toolbar shows Show Overrides for Product.js . It opens Overrides of Product.js with one entry per cartridge

The file you have open is marked "app_custom - Current" and is disabled
Templates and forms add their locale folder, for example "app_storefront_base :: default"
Click an entry to open that copy

File	Matched by
ISML template	The same path below the locale folder, for example `product/productDetails.isml`
JavaScript or JSON file	The same path below `cartridge/`, for example `controllers/Product.js` or `scripts/helpers/productHelpers.js`
Form definition	The same form ID, for example `billing.xml` in any `forms` folder

The floating toolbar appears for files inside a cartridge folder once indexing has finished. Client-side sources under cartridge/client are left out

Overrides and the cartridge path

Which copy runs depends on the site, not on the project. With the cartridge path app_custom:int_paypal:app_storefront_base, a Product.js in app_custom wins over the one in app_storefront_base, and module.superModule in it points to the next copy to the right

Set a site scope so the cartridge list in the dialog, completion and navigation follow the same order as that site. Module Resolution explains how */ and module.superModule are resolved

Troubleshooting

Symptom	What to do
Override ... in Another Cartridge is missing	Every selected item must be inside a `cartridge` folder, the selection needs at least one file, and the project needs a linked cartridge
The cartridge you want is not in the list	Only linked cartridges are listed. Link it in Cartridges & Modules
OK opens a file but changes nothing	The target cartridge already has that file. The plugin opened the existing one
Show Overrides is missing	The file exists in only one linked cartridge, it is a client-side source, or indexing is still running
The storefront still runs the original	Put the cartridge with the override to the left of the original in the site's cartridge path, and upload the new file

Override a file

Start from the original

Pick the cartridge

Choose how to start

Edit the new file

See every copy of a file

Overrides and the cartridge path

Troubleshooting

Cartridges & Modules

Site Scopes

Module Resolution

Upload & Auto Upload

On this page