commerce-b2b-open-code-components-integrate
Integrate Salesforce B2B Commerce open source components from GitHub into B2B Commerce stores. Use when users mention "integrate open code components", "open source B2B commerce", "add open code components", "forcedotcom/b2b-commerce-open-source-components", or want to add open source commerce compo
By forcedotcom · 4,548 installs
npx skills add forcedotcom/sf-skills --skill commerce-b2b-open-code-components-integrate
Source repository · Upstream listing
When to Use This Skill
Use this skill when you need to:
Integrate all open source B2B Commerce components into a store
Add open source components to a new or existing B2B Commerce store
Make open code components available in Experience Builder
Rules
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. The user should be able to read your explanation and understand the purpose before approving.
Overview
This skill copies all open source B2B Commerce components from the official Salesforce repository (https://github.com/forcedotcom/b2b commerce open source components) into a B2B Commerce store's site metadata. After integration, the components appear in the Experience Builder component palette.
Startup Flow
When this skill is triggered, perform these checks automatically before copying.
Check 0: Resolve Package Directory
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.
Check 1: Open Source Repository
Verify the repo is cloned at .tmp/b2b commerce open source components :
1. If directory does not exist: Tell user: "I'm cloning the official B2B Commerce open source components repository from GitHub into a local .tmp/ folder. This gives us access to all the open code components."
Then run: git clone https://github.com/forcedotcom/b2b commerce open source components .tmp/b2b commerce open source components
2. If directory exists and contains force app/main/default/sfdc cms lwc and sfdc cms label , present options:
"Open source repository is already cloned. How would you like to proceed?"
1. Reuse existing — Use the already cloned repository
2. Re clone — Remove and clone fresh from GitHub
3. If directory exists but structure is invalid: Tell user: "The cloned repository has an unexpected structure. I'll remove it and clone a fresh copy."
Then remove and re clone.
4. If clone fails: inform user and abort
Check 2: Store and Site Metadata
Verify a store is selected and site metadata is available locally:
1. Tell user: "I'm checking if your project already has B2B store metadata locally."
Check if <package dir /main/default/digitalExperiences/site/ contains any store directories.
2. If store metadata exists: use it. If multiple stores found, ask user to select one.
3. If no store metadata found: Try retrieving from the connected org before delegating:
1. Run sf org list (or check sf config get target org ) to find a connected org. Ask the user to confirm or pick one if more than one.
2. List DigitalExperienceBundle site bundles in that org with sf org list metadata metadata type DigitalExperienceBundle target org <alias . Filter to site/ entries.
3. If at least one site bundle exists, ask the user which to use, then run:
sf project retrieve start metadata "DigitalExperienceBundle:site/<storeName " target org <alias
The bundle lands at <package dir /main/default/digitalExperiences/site/<storeName / .
4. Only if no connected org is available, or no site bundles are found, or retrieve fails: delegate to the commerce b2b store create skill.
Required state after all checks:
Package dir — the value resolved in Check 0 (e.g., force app )
Store name — the selected fullName value (e.g., My B2B Store1 )
Site metadata path — <package dir /main/default/digitalExperiences/site/<store name /
Repo path — .tmp/b2b commerce open source components/
Integration Task
Copy all components and labels from cloned repo to site directory:
Source: .tmp/b2b commerce open source components/force app/main/default/sfdc cms lwc/ and sfdc cms label/ (the open source repo's own layout — always force app )
Destination: <package dir /main/default/digitalExperiences/site/<store name /sfdc cms lwc/ and sfdc cms label/ ( <package dir resolved in Check 0)
Steps:
1. Tell user: "I'm checking if open code components already exist in your store's site metadata."
Check if destination directories already contain files.
2. If files exist, present options:
"Components already exist in {store name} . How would you like to proceed?"
1. Overwrite all — Replace all existing components with latest from repo
2. Copy only new — Skip existing components, copy only ones not yet present
3. Tell user: "I'm now copying all open code LWC components from the cloned repository into your store's site metadata directory."
Copy all component directories from source to destination.
4. Tell user: "I'm copying the associated label files that these components need."
Copy all label directories from source to destination.
5. Report: "Copied X components and Y label sets"
Output:
Example Interaction
User: "Integrate open code components to my store"
Agent: "I'm checking if the open source components repository is already cloned locally..."
Agent: (repo exists)
"Open source repository is already cloned. How would you like to proceed?"
1. Reuse existing — Use the already cloned repository
2. Re clone — Remove and clone fresh from GitHub
User: "1"
Agent: "I'm checking if your project already has B2B store metadata locally..."
[done] Found store metadata for My B2B Store1
Agent: "I'm checking if open code components already exist in your store's site metadata..."
Agent: (files exist)
"Components already exist in My B2B Store1 . How would you like to proceed?"
1. Overwrite all — Replace all existing components with latest from repo
2. Copy only new — Skip existing components, copy only ones not yet present
User: "1"
Agent: "I'm now copying all open code LWC components from the cloned repository into your store's site metadata directory..."
Agent: "I'm copying the associated label files that these components need..."
[done] Copied 45 components and 38 label sets
Error Handling
Error Message Action
Store not found "Store '{name}' not found in org." List stores again
Git clone failed "Failed to clone repository. Check internet connection." Retry or abort
Invalid repo structure "Repository structure has changed. Expected sfdc cms lwc and sfdc cms label." Warn user, abort
File copy failed "Failed to copy files. Check file permissions." Show error details
Verification Checklist
[ ] Startup Flow completed: repo cloned, store metadata available
[ ] Components copied to correct destination path ( sfdc cms lwc/ )
[ ] Labels copied to correct destination path ( sfdc cms label/ )
[ ] No file permission errors during copy
[ ] Deployment command provided and user informed about testing