Skip to content

Commit 4047ab4

Browse files
alafeminaclaude
andauthored
Fix extensibility docs: add sfcc. prefix to all target IDs, add missing targets (#25)
Cross-referenced storefront-next implementation with commerce-apps docs and found all target IDs were missing the required `sfcc.` prefix. Also added ~60 missing target IDs (cart, mini cart, PLP, product card, my account, user registration, email signup, order confirmation, global) and marked WRAPPER vs INSERTION target types. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 176bfa5 commit 4047ab4

3 files changed

Lines changed: 176 additions & 98 deletions

File tree

.claude/skills/scaffold-app/SKILL.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@ If the user's description clearly indicates type, proceed directly. Otherwise as
5757
**Folder Structure:** Apps must be at `{domain}/{appName}/` where `{appName}` matches the "id" field. Installation URL: `https://raw.githubusercontent.com/{owner}/{repo}/{tag}/{domain}/{appName}/{zipFileName}`
5858

5959
**UI-only and Fullstack also need:**
60-
- **Target IDs:** Commerce apps typically span multiple UI targets (e.g., checkout flow + order summary + header). Ask which targets the app needs rather than assuming single-component usage. Common patterns:
61-
- Tax/shipping: `checkout.shippingOptions`, `checkout.orderSummary`, `orderSummary.tax.after`
62-
- Payment: `checkout.payment`, `checkout.payment.paymentMethods`, `checkout.placeOrder.before`
63-
- Loyalty: `header.before.cart`, `checkout.orderSummary`, `orderSummary.adjustments.after`
64-
- Reviews: `pdp.after.addToCart`, header/footer links
60+
- **Target IDs:** All target IDs use the `sfcc.` prefix. Commerce apps typically span multiple UI targets (e.g., checkout flow + order summary + header). Ask which targets the app needs rather than assuming single-component usage. Common patterns:
61+
- Tax/shipping: `sfcc.checkout.shippingOptions`, `sfcc.checkout.orderSummary`, `sfcc.orderSummary.tax`
62+
- Payment: `sfcc.checkout.payment`, `sfcc.checkout.payment.paymentMethods`, `sfcc.checkout.placeOrder.before`
63+
- Loyalty: `sfcc.header.before.cart`, `sfcc.checkout.orderSummary`, `sfcc.orderSummary.adjustments`
64+
- Reviews: `sfcc.pdp.reviews.summary`, `sfcc.pdp.reviews.list`, `sfcc.pdp.reviews.form`, `sfcc.productCard.reviews.rating`
6565

6666
**Backend-only and Fullstack also need:**
6767
- Cartridge name (convention: `int_<vendor>_<appname>`, max 50 characters)

.claude/skills/scaffold-app/evals/evals.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@
151151
"id": 3,
152152
"eval_name": "fullstack-loyalty-program",
153153
"prompt": "We need a complete loyalty rewards program - PointsPlus from LoyaltyMax. Full stack: backend for calculating points during checkout and calling their API, plus frontend components to show point balance in the header (right before the cart icon) and redemption options on the cart page. App: pointsplus-loyalty, v1.0.0, cartridge: int_loyaltymax_points, service: loyaltymax.points.api, loyalty domain. Publisher: LoyaltyMax at https://loyaltymax.com.",
154-
"expected_output": "Should create fullstack structure with both storefront-next (with target-config.json using targetId) AND cartridges/impex. UI should use TypeScript, i18n, proper tests, and useConfig() with PUBLIC__ prefix. Target config should target 'header.before.cart' slot.",
154+
"expected_output": "Should create fullstack structure with both storefront-next (with target-config.json using targetId) AND cartridges/impex. UI should use TypeScript, i18n, proper tests, and useConfig() with PUBLIC__ prefix. Target config should target 'sfcc.header.before.cart' slot.",
155155
"files": [],
156156
"assertions": [
157157
{
@@ -715,7 +715,7 @@
715715
"id": 16,
716716
"eval_name": "multi-locale-and-eslint-compliance",
717717
"prompt": "Build a UI-only wishlist feature - HeartList from WishCo, v1.0.0. Display a heart icon on product cards that users can click to save items. I need it to work in English (US and UK) and Italian since we're expanding to Europe. Make sure the code follows all the quality standards and best practices. Publisher: WishCo at https://wishco.io. Show the wishlist icon in the header before the cart icon.",
718-
"expected_output": "Should create UI-only app with all three locales (en-US, en-GB, it-IT) and follow ESLint rules (single quotes, import type, no hardcoded colors, no console statements). Target config should use header.before.cart slot.",
718+
"expected_output": "Should create UI-only app with all three locales (en-US, en-GB, it-IT) and follow ESLint rules (single quotes, import type, no hardcoded colors, no console statements). Target config should use sfcc.header.before.cart slot.",
719719
"files": [],
720720
"assertions": [
721721
{
@@ -803,8 +803,8 @@
803803
"description": "JSX closing > on same line as last prop (Prettier: bracketSameLine: true)"
804804
},
805805
{
806-
"name": "target-config.json uses header.before.cart",
807-
"description": "Uses correct targetId from Complete Target ID Reference"
806+
"name": "target-config.json uses sfcc.header.before.cart",
807+
"description": "Uses correct targetId with sfcc. prefix from Complete Target ID Reference"
808808
}
809809
]
810810
}

0 commit comments

Comments
 (0)