sf-b2c-cartridges
Build B2C Commerce cartridges following Salesforce Commerce Cloud architecture patterns.
Before Writing Code
Fetch live documentation FIRST:
-
Web-search for:
- "Salesforce B2C Commerce SFRA cartridge structure 2026"
- "SFCC cartridge naming conventions best practices"
- "Salesforce Commerce Cloud cartridge overlay documentation"
-
Web-fetch official sources:
- https://github.com/SalesforceCommerceCloud/storefront-reference-architecture (SFRA GitHub repo)
- Salesforce B2C Commerce cartridge development documentation
- SFCC LINK marketplace certification requirements
-
Verify before coding:
- Current SFRA version and directory structure
- Cartridge naming prefix standards
- Required metadata fields in cartridge.properties
- Build tool configuration (sgmf-scripts, webpack)
Conceptual Architecture
Cartridge Directory Structure
app_custom_mysite/
├── cartridge/
│ ├── controllers/ # Route handlers
│ ├── models/ # Business logic
│ ├── scripts/ # Helpers, middleware
│ ├── templates/ # ISML + i18n resources
│ └── static/ # Compiled CSS/JS/images
└── cartridge.properties
Key Directories Explained
| Directory | Contents | Notes |
|---|---|---|
controllers/ | Server-side JS route handlers | Each file exports route actions (e.g., Product-Show) |
models/ | Data models and business logic | Keep controllers thin; move logic here |
scripts/ | Utility helpers, middleware, services | Subdirs: helpers/, middleware/, services/ |
templates/default/ | ISML templates per locale | default/ is the fallback locale |
templates/resources/ | i18n .properties files | Resource bundles for Resource.msg() |
forms/default/ | XML form definitions | Server-side validation rules |
static/default/ | Compiled CSS, JS, images | Built from client/default/ source |
client/default/ | Source SCSS and JS | Input for webpack/sgmf-scripts build |
experience/components/ | Page Designer components | Visual merchandising building blocks |
Cartridge Naming Conventions
| Prefix | Purpose | Example |
|---|---|---|
app_custom_* | Site-specific customizations | app_custom_mysite |
plugin_* | Reusable feature modules | plugin_wishlists |
int_* | Third-party integrations | int_paypal, int_stripe |
bm_* | Business Manager extensions | bm_custom_admin |
app_storefront_base | Base SFRA cartridge | Core framework (do not modify) |
modules/ | Shared modules (non-cartridge) | Utility libraries consumed by cartridges |
Cartridge Path and Overlay System
The cartridge path defines file resolution order (configured in Business Manager > Site Settings):
app_custom_mysite:plugin_wishlists:int_paypal:app_storefront_base
Resolution: Left to right. When SFCC resolves a file (e.g., controllers/Product.js), it searches each cartridge in path order and uses the first match. This enables non-destructive customization -- overlay specific files without modifying base cartridges.
Overlay constraints:
- File must have the same relative path inside
cartridge/to override - Controllers can extend base controllers via
module.superModule - Templates override entirely (no partial merge)
- Static assets (CSS/JS) override entirely per file
- Resource bundles merge at the property level (keys from left cartridge win)
Cartridge Types
| Type | Contains | When to Use |
|---|---|---|
| Storefront | Controllers, templates, static assets | Customer-facing site logic |
| Integration | Service definitions, API clients | Third-party system connections |
| Plugin | Self-contained feature | Reusable cross-site features |
| Business Manager | BM extensions, custom modules | Admin panel customizations |
Controller Extension Pattern
Controllers can extend base behavior using module.superModule:
// Pattern: extend base controller
// Fetch live docs for server.extend() API
var server = require('server');
server.extend(module.superModule);
// Add or override route actions here
This avoids duplicating the entire base controller when you only need to modify one action.
Cartridge Metadata (cartridge.properties)
Required fields: cartridge ID and multi-language flag. Optional: version and compatibility version. Fetch live docs for the exact property key format (demandware.cartridges.<id>.*) before creating this file.
Build Tools
SFRA uses sgmf-scripts for compiling client-side SCSS and JS. Source files live in cartridge/client/default/ and compile to cartridge/static/default/. Webpack configuration maps entry points for JS bundles and SCSS compilation.
| Tool | Purpose |
|---|---|
sgmf-scripts --compile js | Compile client-side JavaScript |
sgmf-scripts --compile css | Compile SCSS to CSS |
sgmf-scripts --watch | Watch mode for development |
sfcc-ci | CLI for code upload and deployment automation |
LINK Marketplace Certification
| Category | Key Requirements |
|---|---|
| Technical | Compatible with latest SFRA; no hardcoded credentials; passes code profiler |
| Documentation | Installation guide, BM configuration steps, troubleshooting guide |
| Security | Input validation, CSRF protection, secure credential storage |
| Testing | Unit tests, integration tests, performance benchmarks, multi-site compatibility |
Deployment
Pattern: upload cartridge code to a code version on the sandbox/instance, then activate that version in Business Manager. Use WebDAV upload or the sfcc-ci CLI tool for automation.
| Step | Action |
|---|---|
| 1 | Upload code to a named code version via WebDAV or sfcc-ci |
| 2 | Set the active code version in BM > Administration > Code Deployment |
| 3 | Update cartridge path in BM > Site Settings if new cartridges were added |
| 4 | Clear caches and verify storefront behavior |
# Pattern: scaffold a new cartridge
# Fetch live docs for sgmf-scripts CLI options
mkdir -p app_custom_mysite/cartridge/{controllers,models,scripts,templates/default}
Best Practices
Cartridge Organization
- Keep site-specific code in
app_custom_*; reusable features inplugin_*. - Minimize cartridge count -- each cartridge adds file resolution overhead.
- Match
app_storefront_basedirectory layout for clean overlays. - Use
module.superModuleto extend controllers rather than copying entire files.
Code Modularity
- Extract reusable functions to
scripts/helpers/; keep controllers thin. - Use models for business logic; templates for presentation only.
- Break large ISML files into
<isinclude>components. - Keep Page Designer components self-contained with clear input/output contracts.
Version Control and Deployment
- Increment
cartridge.propertiesversion on each release. - Use semantic versioning tags in Git; maintain a CHANGELOG.
- Always deploy to sandbox first; activate code versions after validation.
- Use
sfcc-cifor CI/CD pipeline integration.
Security
- Never commit secrets -- use Business Manager custom preferences or site preferences.
- Validate all inputs via form definitions and server-side checks.
- Follow OWASP guidelines, especially for payment integrations.
- Use service credentials (BM > Services) for external API keys.
Performance
- Minimize cartridge path length to reduce file resolution overhead.
- Serve only compiled, minified assets in production.
- Configure cache headers in Business Manager for static resources.
- Profile cartridge code with the SFCC code profiler before release.
Fetch the SFRA GitHub repo, B2C Commerce cartridge development docs, and LINK certification guidelines for exact directory conventions, build tool APIs, and deployment procedures before implementing.