用途:为使用 @shopify/post-purchase-ui-extensions-react 的 Shopify 购后追加销售扩展提供组件目录、生命周期契约与沙箱规则参考。该包为 npm 0.13.5,处于维护状态,无更新版本;现代 <s-*> checkout-extensions SDK 目前没有购后目标。
主要能力:包含 29 个可从该包导入的 React 组件,覆盖布局结构(BlockStack、InlineStack、Bookend、Tiles、Layout、View、Separator)、排版(Heading、HeadingGroup、Text、TextBlock、TextContainer)、操作(Button、ButtonGroup、Link)、表单(Form、FormLayout、FormLayoutGroup、TextField、Select、Checkbox、Radio、BuyerConsent)、反馈与状态(Banner、CalloutBanner、Spinner)、媒体(Image)和无障碍(HiddenForAccessibility、VisuallyHidden)。
使用方式:两个扩展点、两个阶段。extend("Checkout::PostPurchase::ShouldRender", …) 做数据预取,返回 { render: true } 才挂载;render("Checkout::PostPurchase::Render", App) 挂载 React 树。storage.update(data) 仅在 ShouldRender,Render 阶段用 storage.initialData 读取,两阶段运行于不同 JS 上下文,storage 是唯一传递通道。applyChangeset 接收后端用应用 API secret 签名的 JWT 字符串,禁止客户端签名。无论成功或失败都必须调用 done(),否则买家会停在空白页,建议用 try/finally 包裹 accept 处理。修改 JSX 后需运行 cd extensions/<your-extension> && npx tsc --noEmit 校验类型。
限制:沙箱内无 DOM、无 CSS、无 window、无外部脚本,视觉定制只能通过组件属性;无 style/className/内联样式,间距来自属性 token。每个 import 必须带 .jsx/.js 扩展名。只能从 SDK 重新导出的 "react" 入口导入。该 SDK 未被 Shopify Dev MCP 索引,不要使用 validate_component_codeblocks、validate_graphql_codeblocks 或 search_docs_chunks,文档查阅需用 WebFetch。ShouldRender 可能每次结账被多次调用,处理逻辑需幂等。若面向 Admin App Home、现代结账扩展或客户账户扩展,应改用对应技能。