description: Replace OOTB (out-of-the-box) B2B Commerce components with open source equivalents in site metadata content.json files, or look up the equivalent open code `site:` component for OOTB definitions. Use when users mention "replace OOTB components", "replace commerce components with open code", "swap OOTB for open source", "replace commerce_builder:", "replace OOTB in site", "replace component in site metadata", "replace component definition", "find open code equivalent", "equivalent open code component", "OOTB to open code mapping", "what is the site component for", components "in this view" or "for a given view", or a specific list of component names — and want to update or only discover mappings in their store metadata.
- **Find the equivalent open code (`site:`) component** for one or more OOTB `commerce_builder:` / `commerce:` definitions — using the mapping table and verifying availability in the cloned open code repo
- **Scope discovery or replacement to a given Experience Builder view** — scan only that view’s `sfdc_cms__view/<ViewName>/content.json` (or the paths the user names) instead of the whole site
- **Answer “what open code component replaces X?”** when the user gives explicit component name(s) — look up each in the mapping table, report `site:` targets, and note unmapped entries or targets missing from the repo (no `content.json` edits unless the user also asks to replace)
**Trigger phrases:** “replace OOTB components with open code components”, “find equivalent open code”, “open code equivalent for OOTB”, “map commerce_builder to site”, “components in this view”, “for the Product Detail view”, “replace only these components: …”.
1.**Always explain before executing.** Before running any command, you MUST tell the user what the command does and why you are running it. Never just show a raw command and ask for permission.
2.**ONLY use the mapping table in this skill.** The JSON mapping table below is the ONLY source of truth for OOTB-to-open-code component names. NEVER guess, infer, or hallucinate component names. If a component is not in the mapping table, tell the user there is no known mapping — do not make one up.
3.**Use Read and Write tools for JSON files.** Use the Read tool to parse `content.json` files and the Write tool to update them. Do NOT use bash to parse or edit JSON — no sed, awk, perl, or regex on JSON content. Bash is only for **simple file discovery** (`grep -rl`, `find`, `ls`) — never for extracting or modifying JSON values.
4.**Minimize commands.** Batch work into as few commands as possible. Use a single grep to scan all files, a single ls to verify the repo, and one Read/Write pass per file. Do NOT run a separate command for every component or every directory.
5.**Follow the workflow steps exactly.** Do not invent additional options, policies, or frameworks. Execute each step and show the user the results before proceeding.
6.**Always replace with `site:` after verifying in the open code repo.** For every replacement, the new `"definition"` MUST be the mapped value from the table below, which always uses the `site:` namespace (for example `site:productHeading`). Before changing `content.json`, verify the target exists in the cloned open code components repository — for example by confirming the corresponding bundle under `.tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/` (or the path your integrating skill documents). If the mapped `site:` component is not present in the repo, **do not replace** — skip it and report it under “not in repo” (same as Step 1 categorization).
This skill replaces OOTB B2B Commerce component definitions in site metadata `content.json` files with their open source equivalents. It uses an authoritative mapping table of 64 component pairs extracted from `ui-commerce-components/scripts/moduleConfig.js`.
**Modes:** **Full replace** runs the scan (Step 1), user selection if needed, then `content.json` updates (Step 2–3). **Lookup only** (user asks for equivalents but not to change files): use the same mapping table and repo verification (Rule 2 and Rule 6), report OOTB → `site:` for the named components or for definitions found in the scoped `content.json` — **do not** call Write unless the user confirms replacement. **View-scoped** work: limit file discovery and reads to `sfdc_cms__view/<ViewName>/` (or the path the user gives) instead of all views.
Before replacing components, delegate to the **integrating-b2b-commerce-open-code-components** skill (`skills/integrating-b2b-commerce-open-code-components/SKILL.md`) to ensure:
1. Open source repository is cloned at `.tmp/b2b-commerce-open-source-components`
2. Store is selected and site metadata is retrieved locally
3. Open code components are copied to the store's site metadata
Tell user: "Before replacing components, I need to verify that the open code components are set up in your store. Let me check..."
If any prerequisite is not met, the integrating skill will handle it. Once all checks pass, proceed to the replacement workflow.
**This step is MANDATORY.** Always scan the site first before attempting any replacements.
Tell user: "I'm scanning your store's site metadata to find all OOTB commerce components currently in use and checking which have open code equivalents."
**Step 1b — Read and parse** each matched file using the **Read** tool. Extract all `"definition"` values that start with `commerce` (e.g., `commerce_builder:cartBadge`). Collect a deduplicated list of OOTB components across all files.
**Step 1c — List repo components** (one command):
```bash
ls .tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/
```
Using the parsed definitions, the `ls` output, and the mapping table, categorize every discovered OOTB component into three groups:
**Show the user a breakdown and a selectable list:**
First, inform the user about skipped and unmapped components:
```
Found X OOTB components in your site:
In mapping table but NOT in repo (skipping):
- commerce_builder:quoteSummary → site:quoteSummary (not found in repo)
No mapping available (not in mapping table):
- commerce_builder:actionButtons
- commerce_builder:layoutHeaderOne
- commerce_builder:searchInputContainer
- commerce_builder:myAccountMegaMenu
```
Then present the replaceable components as a **multi-select list** using the AskQuestion tool (allow_multiple: true) so the user can pick from checkboxes instead of typing. Include an "All of the above" option:
```
Which components would you like to replace?
☐ commerce_builder:heading → site:productHeading
☐ commerce_builder:cartBadge → site:cartBadge
☐ commerce_builder:searchInput → site:searchInput
☐ All of the above
```
If user provided specific component name(s) in the original request, pre-filter to those and skip the selection prompt.
### Step 2: Replace in content.json
Tell user: "I'm now replacing the selected OOTB component definitions with their open code equivalents in your site's content.json files."
The affected files are already known from Step 1. For each file that contains selected components:
2. For each selected OOTB component, confirm again that the mapped **`site:`** target from the mapping table exists in the open code repo (per Rule 6). Only proceed with replacements that pass this check.
3. Replace all matching `"definition"` values with their mapped open code equivalents — **always** the exact `site:<name>` string from the mapping table
**Batch efficiently:** if a file contains multiple OOTB components, apply ALL replacements in a single Read → modify → Write pass. Do NOT read and write the same file multiple times.
**User:** "Replace OOTB components with open code versions"
**Agent:** "Before replacing components, I need to verify that the open code components are set up in your store. Let me check..."
- ✓ Open source repo cloned
- ✓ Store metadata available for My_B2B_Store1
- ✓ Open code components are integrated
**Agent:** "I'm scanning your store's site metadata to find all OOTB commerce components and checking which have open code equivalents."
_(Runs grep -rl to find files with commerce definitions, Reads those files to extract component names, runs ls to list repo components, then cross-references with mapping table)_
```
Found 8 OOTB components in your site:
No mapping available (not in mapping table):
- commerce_builder:searchInputContainer
- commerce_builder:layoutHeaderOne
- commerce_builder:myAccountMegaMenu
- commerce_builder:actionButtons
```
**Agent** _(presents multi-select list via AskQuestion tool):_
```
Which components would you like to replace?
☐ commerce_builder:heading → site:productHeading
☐ commerce_builder:cartBadge → site:cartBadge
☐ commerce_builder:searchInput → site:searchInput
☐ commerce_builder:cartSummary → site:cartSummary
☐ All of the above
```
**User:** _(selects heading and cartBadge)_
**Agent:** "I'm now replacing the selected OOTB component definitions with their open code equivalents in your site's content.json files."
_(Files already known from scan — one Read/Write pass per affected file, all replacements batched)_
1. Deploy: sf project deploy start -d force-app/main/default/digitalExperiences/site/My_B2B_Store1
2. Test the store thoroughly in Experience Builder
```
---
## Error Handling
| Error | Message | Action |
|-------|---------|--------|
| Prerequisites not met | "Open code components are not integrated yet." | Run integrating skill first |
| No mapping found | "No mapping found for '{component}'." | Show available mappings, report as unmapped |
| Component not in repo | "Open code component '{name}' not found in cloned repo." | Skip and inform user |
| No OOTB components in site | "No OOTB commerce components found in site metadata." | Inform user, nothing to replace |
| No replaceable components | "All OOTB components found are unmapped — none can be replaced." | Show the unmapped list, suggest checking for updated mappings |
| content.json parse error | "Failed to parse content.json: {file}" | Show error, skip file, continue with remaining files |
