commerce-b2b-open-code-components-replace

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Replacing OOTB B2B Commerce Components with Open Code

将OOTB B2B Commerce组件替换为开源代码

This skill replaces OOTB (out-of-the-box) B2B Commerce component definitions in site metadata

content.json

files with their open source

site:

equivalents, or looks up the equivalent open code component for given OOTB definitions without making changes. It uses an authoritative mapping loaded from

assets/ootb-to-open-code-mapping.json

本技能可将站点元数据

content.json

文件中的OOTB（开箱即用）B2B Commerce组件定义替换为对应的开源

site:

等效组件，或仅查找给定OOTB定义的等效开源组件而不做修改。它使用从

assets/ootb-to-open-code-mapping.json

加载的权威映射关系。

Scope

适用范围

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): apply the mapping-authority rule and 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.

模式：

完全替换：先执行扫描（步骤1），必要时由用户选择组件，然后更新
```
content.json
```
（步骤2-3）。
仅查询（用户询问等效组件但不修改文件）：应用映射规则，报告指定组件或在限定范围
```
content.json
```
中找到的定义对应的OOTB →
```
site:
```
映射——除非用户确认替换，否则不要调用Write工具。
视图限定：将文件查找和读取范围限制在
```
sfdc_cms__view/<ViewName>/
```
（或用户指定的路径），而非所有视图。

Prerequisites

前提条件

Resolve

<package-dir>

解析

<package-dir>

Read

sfdx-project.json

and pick the active package directory. Extract

packageDirectories[]

and use the entry with

"default": true

; if no entry is flagged default, use the first entry. Use this value as

<package-dir>

everywhere below. If

sfdx-project.json

is missing or has no

packageDirectories

, tell the user and abort.

读取

sfdx-project.json

并选择活跃的包目录。提取

packageDirectories[]

数组，使用标记为

"default": true

的条目；如果没有默认条目，则使用第一个条目。将该值作为

<package-dir>

用于以下所有操作。如果

sfdx-project.json

缺失或没有

packageDirectories

，请告知用户并终止操作。

Delegate setup

委托设置

Before replacing components, delegate to the commerce-b2b-open-code-components-integrate skill to ensure:

Open source repository is cloned at

.tmp/b2b-commerce-open-source-components

Store is selected and site metadata is retrieved locally
Open code components are copied to the store's site metadata

The integrating skill owns the

.tmp/

clone lifecycle (it prompts the user to reuse or re-clone an existing checkout); this skill assumes the clone is already present.

Send a plain-text chat reply to the user (per Rule 1): "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.

Required state after prerequisites:

Package dir — the value resolved above (e.g.,
```
force-app
```
)
Store name — e.g.,
```
My_B2B_Store1
```

Site metadata path —

<package-dir>/main/default/digitalExperiences/site/<store-name>/

在替换组件前，委托给commerce-b2b-open-code-components-integrate技能以确保：

开源仓库已克隆到

.tmp/b2b-commerce-open-source-components

已选择商店并本地获取站点元数据
开源组件已复制到商店的站点元数据中

集成技能负责

.tmp/

克隆目录的生命周期（它会提示用户重用或重新克隆现有检出内容）；本技能假定克隆目录已存在。

向用户发送纯文本聊天回复（遵循规则1）：“在替换组件前，我需要验证开源组件是否已在你的商店中设置完成。我来检查一下...”

如果任何前提条件未满足，集成技能会处理相应问题。所有检查通过后，再继续替换流程。

前提条件满足后的必要状态：

包目录 — 上述解析得到的值（例如：
```
force-app
```
）
商店名称 — 例如：
```
My_B2B_Store1
```

站点元数据路径 —

<package-dir>/main/default/digitalExperiences/site/<store-name>/

Replacement Workflow

替换流程

Step 1: Scan Site and Cross-Reference Mapping

步骤1：扫描站点并交叉引用映射

This step is MANDATORY. Always scan the site first before attempting any replacements.

Send a plain-text chat reply to the user (per Rule 1): "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 1a — Find affected files (one command, simple literal match):

bash

grep -rl '"commerce' \
  <package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__view/ \
  <package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__themeLayout/ \
  --include="content.json"

Step 1b — Read the mapping and parse the matched files. Read

assets/ootb-to-open-code-mapping.json

once into memory. Then, using the Read tool, parse each matched file and 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:

text

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 so the user can pick from checkboxes instead of typing. Include an "All of the above" option:

text

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.

此步骤为必填项。在尝试任何替换操作前，必须先扫描站点。

向用户发送纯文本聊天回复（遵循规则1）：“我正在扫描你的商店站点元数据，查找当前使用的所有OOTB商务组件，并检查哪些组件有对应的开源等效组件。”

步骤1a — 查找受影响的文件（一条命令，简单字面匹配）：

bash

grep -rl '"commerce' \
  <package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__view/ \
  <package-dir>/main/default/digitalExperiences/site/<store-name>/sfdc_cms__themeLayout/ \
  --include="content.json"

步骤1b — 读取映射并解析匹配的文件。将

assets/ootb-to-open-code-mapping.json

读取到内存中一次。然后使用Read工具解析每个匹配的文件，提取所有以

commerce

开头的

"definition"

值（例如：

commerce_builder:cartBadge

）。收集所有文件中去重后的OOTB组件列表。

步骤1c — 列出仓库组件（一条命令）：

bash

ls .tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/

使用解析得到的定义、

ls

输出结果和映射表，将每个发现的OOTB组件分为三类：

向用户展示分类 breakdown 和可选列表：

首先告知用户被跳过和未映射的组件：

text

在你的站点中找到X个OOTB组件：

在映射表中但仓库中不存在（已跳过）：
  - commerce_builder:quoteSummary → site:quoteSummary（仓库中未找到）

无可用映射（不在映射表中）：
  - commerce_builder:actionButtons
  - commerce_builder:layoutHeaderOne
  - commerce_builder:searchInputContainer
  - commerce_builder:myAccountMegaMenu

然后将可替换组件以多选列表形式呈现，让用户通过复选框选择而非手动输入。包含“全选”选项：

text

你想要替换哪些组件？

☐ commerce_builder:heading → site:productHeading
☐ commerce_builder:cartBadge → site:cartBadge
☐ commerce_builder:searchInput → site:searchInput
☐ 全选

如果用户在初始请求中提供了具体组件名称，则预先筛选出这些组件并跳过选择提示。

Step 2: Replace in content.json

步骤2：在content.json中替换

Send a plain-text chat reply to the user (per Rule 1): "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:

Use the Read tool to read the file
For each selected OOTB component, confirm again that the mapped site:
target exists in the open code repo. Only proceed with replacements that pass this check.
Replace all matching
```
"definition"
```
values with their mapped open code equivalents — always use the exact
```
site:<name>
```
string from the mapping table
- Example:
```
"definition": "commerce_builder:heading"
```
  →
```
"definition": "site:productHeading"
```
Use the Write tool to save the updated file
Preserve all other JSON properties — only
```
"definition"
```
values change

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.

向用户发送纯文本聊天回复（遵循规则1）：“我现在正在将你选择的OOTB组件定义替换为对应的开源等效组件，更新站点的content.json文件。”

受影响的文件已在步骤1中确定。对于每个包含所选组件的文件：

使用Read工具读取文件
对于每个所选OOTB组件，再次确认映射的**
```
site:
```
**目标在开源仓库中存在。仅对通过此检查的组件执行替换。
将所有匹配的
```
"definition"
```
值替换为对应的开源等效值——必须始终使用映射表中精确的
site:<name>
字符串
- 示例：
```
"definition": "commerce_builder:heading"
```
  →
```
"definition": "site:productHeading"
```
使用Write工具保存更新后的文件
保留所有其他JSON属性——仅修改
```
"definition"
```
值

**高效批量处理：**如果一个文件包含多个OOTB组件，在单次Read → 修改 → Write流程中完成所有替换。请勿对同一文件多次读取和写入。

Step 3: Report

步骤3：报告

text

✅ Replacement Complete!

Replaced X components across Y files:
- commerce_builder:heading → site:productHeading (3 files)
- commerce_builder:cartBadge → site:cartBadge (2 files)
- commerce_builder:searchInput → site:searchInput (4 files)

Skipped (not in repo):
- commerce_builder:quoteSummary

No mapping available (left unchanged):
- commerce_builder:actionButtons
- commerce_builder:layoutHeaderOne
- commerce_builder:searchInputContainer

Modified files:
- sfdc_cms__view/Home/content.json
- sfdc_cms__view/Product_Detail/content.json
- sfdc_cms__themeLayout/DefaultTheme/content.json

Next Steps:
1. Deploy: sf project deploy start -d <package-dir>/main/default/digitalExperiences/site/<store-name>
2. Test the store thoroughly in Experience Builder
3. Publish your site when ready

text

✅ 替换完成！

已在Y个文件中替换X个组件：
- commerce_builder:heading → site:productHeading（3个文件）
- commerce_builder:cartBadge → site:cartBadge（2个文件）
- commerce_builder:searchInput → site:searchInput（4个文件）

已跳过（仓库中不存在）：
- commerce_builder:quoteSummary

无可用映射（保持不变）：
- commerce_builder:actionButtons
- commerce_builder:layoutHeaderOne
- commerce_builder:searchInputContainer

已修改的文件：
- sfdc_cms__view/Home/content.json
- sfdc_cms__view/Product_Detail/content.json
- sfdc_cms__themeLayout/DefaultTheme/content.json

后续步骤：
1. 部署：sf project deploy start -d <package-dir>/main/default/digitalExperiences/site/<store-name>
2. 在Experience Builder中全面测试商店
3. 准备就绪后发布站点

Example Interaction

交互示例

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)

text

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 (asks the user via a multi-select prompt):

text

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)

text

✅ Replacement Complete!

Replaced 2 components across 5 files:
- commerce_builder:heading → site:productHeading (3 files)
- commerce_builder:cartBadge → site:cartBadge (2 files)

No mapping available (left unchanged):
- commerce_builder:searchInputContainer
- commerce_builder:layoutHeaderOne
- commerce_builder:myAccountMegaMenu
- commerce_builder:actionButtons

Modified files:
- sfdc_cms__view/Home/content.json
- sfdc_cms__view/Product_Detail/content.json
- sfdc_cms__themeLayout/DefaultTheme/content.json

Next Steps:
1. Deploy: sf project deploy start -d force-app/main/default/digitalExperiences/site/My_B2B_Store1
2. Test the store thoroughly in Experience Builder

用户：“将OOTB组件替换为开源版本”

Agent：“在替换组件前，我需要验证开源组件是否已在你的商店中设置完成。我来检查一下...”

✓ 开源仓库已克隆
✓ My_B2B_Store1的商店元数据可用
✓ 开源组件已集成

Agent：“我正在扫描你的商店站点元数据，查找所有OOTB商务组件，并检查哪些组件有对应的开源等效组件。”

（运行grep -rl查找包含commerce定义的文件，读取这些文件提取组件名称，运行ls列出仓库组件，然后与映射表交叉引用）

text

在你的站点中找到8个OOTB组件：

无可用映射（不在映射表中）：
  - commerce_builder:searchInputContainer
  - commerce_builder:layoutHeaderOne
  - commerce_builder:myAccountMegaMenu
  - commerce_builder:actionButtons

Agent（通过多选提示询问用户）：

text

你想要替换哪些组件？

☐ commerce_builder:heading → site:productHeading
☐ commerce_builder:cartBadge → site:cartBadge
☐ commerce_builder:searchInput → site:searchInput
☐ commerce_builder:cartSummary → site:cartSummary
☐ 全选

用户：（选择heading和cartBadge）

Agent：“我现在正在将你选择的OOTB组件定义替换为对应的开源等效组件，更新站点的content.json文件。”

（文件已在扫描中确定——每个受影响文件执行一次Read/Write流程，所有替换批量完成）

text

✅ 替换完成！

已在5个文件中替换2个组件：
- commerce_builder:heading → site:productHeading（3个文件）
- commerce_builder:cartBadge → site:cartBadge（2个文件）

无可用映射（保持不变）：
- commerce_builder:searchInputContainer
- commerce_builder:layoutHeaderOne
- commerce_builder:myAccountMegaMenu
- commerce_builder:actionButtons

已修改的文件：
- sfdc_cms__view/Home/content.json
- sfdc_cms__view/Product_Detail/content.json
- sfdc_cms__themeLayout/DefaultTheme/content.json

后续步骤：
1. 部署：sf project deploy start -d force-app/main/default/digitalExperiences/site/My_B2B_Store1
2. 在Experience Builder中全面测试商店

Rules

规则

Always explain in chat before executing. Before every Bash or Write tool call, send a plain-text reply in the conversation that says what the command will do and why. The explanation MUST appear as a normal chat message preceding the tool call. Do NOT embed it inside the command itself (no
```
echo
```
lines, no
```
#
```
comments), do NOT prefix it to the command, and do NOT rely solely on the tool's
```
description
```
parameter — that field is not guaranteed to be visible to the user. After the explanation, issue the tool call and wait for the user to approve it before continuing.
assets/ootb-to-open-code-mapping.json
is the only source of truth. Every OOTB → open-code mapping comes from that file; never guess, infer, or hallucinate component names. Each replacement's new
```
"definition"
```
MUST be the exact mapped value from the file, which always uses the
```
site:
```
namespace (e.g.
```
site:productHeading
```
). Before writing, verify the mapped target exists in the cloned open code components repo (under
```
.tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/
```
); if it is not present, skip the replacement and report it under "not in repo".
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.
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.

执行前务必在聊天中说明。在每次调用Bash或Write工具前，在对话中发送纯文本回复，说明命令的作用和原因。该说明必须作为普通聊天消息出现在工具调用之前。请勿将说明嵌入命令本身（不要使用
```
echo
```
行、
```
#
```
注释），不要将其作为命令前缀，也不要仅依赖工具的
```
description
```
参数——该字段不保证对用户可见。说明后发起工具调用，等待用户批准后再继续。
assets/ootb-to-open-code-mapping.json
是唯一可信来源。所有OOTB→开源代码的映射均来自该文件；切勿猜测、推断或虚构组件名称。每个替换的新
```
"definition"
```
必须是文件中精确的映射值，且始终使用
```
site:
```
命名空间（例如
```
site:productHeading
```
）。写入前，验证映射目标在克隆的开源组件仓库中存在（路径为
```
.tmp/b2b-commerce-open-source-components/force-app/main/default/sfdc_cms__lwc/
```
）；如果不存在，则跳过替换并在“仓库中不存在”下报告。
使用Read和Write工具处理JSON文件。使用Read工具解析
```
content.json
```
文件，使用Write工具更新它们。请勿使用bash解析或编辑JSON——不要对JSON内容使用sed、awk、perl或正则表达式。Bash仅用于简单文件查找（
```
grep -rl
```
、
```
find
```
、
```
ls
```
）——绝不能用于提取或修改JSON值。
最小化命令数量。将工作批量处理为尽可能少的命令。使用单个grep扫描所有文件，单个ls验证仓库，每个文件执行一次Read/Write流程。不要为每个组件或每个目录单独运行命令。

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

错误	消息	操作
前提条件未满足	“开源组件尚未集成。”	先运行集成技能
未找到映射	“未找到'{component}'的映射。”	显示可用映射，报告为未映射
组件不在仓库中	“克隆仓库中未找到开源组件'{name}'。”	跳过并告知用户
站点中无OOTB组件	“在站点元数据中未找到OOTB商务组件。”	告知用户，无需替换
无可替换组件	“找到的所有OOTB组件均未映射——无法替换任何组件。”	显示未映射列表，建议检查更新后的映射
content.json解析错误	“解析content.json失败：{file}”	显示错误，跳过该文件，继续处理剩余文件

Verification Checklist

验证清单

Prerequisites verified via integrating skill (repo, store, components)
Site scanned + repo verified + mapping cross-referenced in minimal commands (Step 1)
Each replacement uses the exact mapped
```
site:
```
definition and was verified present in the open code repo before write
Breakdown shown to user with three categories before proceeding
User selected components to replace (or provided names)
Each
```
content.json
```
file updated in a single Read → modify → Write pass
JSON structure preserved, no syntax errors introduced
User informed of skipped and unmapped components
Deployment command provided

通过集成技能验证前提条件（仓库、商店、组件）
已用最少命令完成站点扫描+仓库验证+映射交叉引用（步骤1）
每个替换使用精确的映射
```
site:
```
定义，且写入前已验证其在开源仓库中存在
在继续操作前向用户展示三类组件的分类 breakdown
用户已选择要替换的组件（或提供了组件名称）
每个
```
content.json
```
文件在单次Read → 修改 → Write流程中完成更新
JSON结构保留，未引入语法错误
已告知用户被跳过和未映射的组件
已提供部署命令

commerce-b2b-open-code-components-replace

Original

Translation

Replacing OOTB B2B Commerce Components with Open Code

将OOTB B2B Commerce组件替换为开源代码

Scope

适用范围

Prerequisites

前提条件

Resolve
`<package-dir>`

解析
`<package-dir>`

Delegate setup

委托设置

Replacement Workflow

替换流程

Step 1: Scan Site and Cross-Reference Mapping

步骤1：扫描站点并交叉引用映射

Step 2: Replace in content.json

步骤2：在content.json中替换

Step 3: Report

步骤3：报告

Example Interaction

交互示例

Rules

规则

Error Handling

错误处理

Verification Checklist

验证清单

commerce-b2b-open-code-components-replace

Original

Translation

Replacing OOTB B2B Commerce Components with Open Code

将OOTB B2B Commerce组件替换为开源代码

Scope

适用范围

Prerequisites

前提条件

Resolve <package-dir>

解析<package-dir>

Delegate setup

委托设置

Replacement Workflow

替换流程

Step 1: Scan Site and Cross-Reference Mapping

步骤1：扫描站点并交叉引用映射

Step 2: Replace in content.json

步骤2：在content.json中替换

Step 3: Report

步骤3：报告

Example Interaction

交互示例

Rules

规则

Error Handling

错误处理

Verification Checklist

验证清单

Resolve
`<package-dir>`

解析
`<package-dir>`