Custom code 区块将你自己的 HTML 或 React 添加到购物车中。你可以将它放在抽屉的任意版块中，或作为子区块嵌套在 Cart items 内，使其按每行商品重复显示。与其他区块不同，它没有 Content 设置，也没有 Design 部分：该区块本身就是代码，因此你完全在其 Code 标签页中工作。
添加并开启 Custom code 区块
- 将 Custom code 区块添加到任意版块，或作为 Cart items 下的子区块。
- 选中它并打开 Code 标签页。
- 选择 HTML 或 React component。新区块默认为 HTML。
- 编写你的代码。
- 如果你选择了 React，点击 Compile。
- 开启 “Use custom template”（使用自定义模板）。对于此区块，该开关的含义是”显示我的自定义代码”，且默认关闭，因此在启用之前不会渲染任何内容。
- 保持侧边栏的眼睛开关处于开启状态，使区块对顾客保持可见。
行为
- 在购物车加载完成之前，区块不渲染任何内容。
- 当侧边栏眼睛关闭、“Use custom template” 关闭、代码为空，或 React 编译或渲染失败时，它同样不渲染任何内容。由于失败是静默的，请在发布前在预览中检查你的区块。
HTML 模式
令牌
% 的百分比或数量），可直接放入标记中：
示例
React 模式
add-to-cart 操作。
- 编辑器将外层包裹固定为
function CustomCode(props: CustomCodeProps) { … }，你只能编辑这两行之间的函数体。 - 你必须先点击 Compile，然后开启 “Use custom template”，区块才会显示。
- 你的组件可以使用
useState、useEffect、useMemo、useRef和useCallback。 - 与 HTML 模式不同，React 在页面上下文中运行，因此在可用时可以调用
window和 Cart SDK。 - 如果你的组件在运行时抛出错误，区块将不渲染任何内容，购物车的其余部分继续正常工作。
Props
$12.50 是 1250 而不是 12.50。它们不像 HTML 令牌那样是格式化后的货币字符串。
cart 和 line 的结构
cart 和 line 与 SDK 在其他所有地方暴露的对象相同，因此它们在**购物车对象参考**中统一记录：购物车、商品行和捆绑上的每个字段。
你最常用的字段：cart.items、cart.itemCount、cart.totalPrice、line.title、line.quantity、line.finalLinePrice。
此区块特有的三点：
line仅在 Cart items 子区块上设置，此时你的组件每行渲染一次。作为版块放置时，line为null，你应改为读取cart.items。- 捆绑的子商品不在
cart.items中。 当商品行被组合成捆绑时，只有锚点行会出现；其子商品位于line.bundle.children中。 - 被行转换隐藏的行也不在其中，尽管它们仍计入
cart.totalPrice。
示例
props.line 呈现按产品的内容。区块每行渲染一次，并带有该行的产品和变体标记：
读取增强元数据
cart.items 中的每个商品都带有一个 metadata 字段：在购物车增强器（cart enricher）填充之前是空对象 {}。填充后，它以增强器的 id 为键，包含该行产品或变体的 Storefront 数据：
metadata 始终存在，在增强器的异步获取完成之前默认为空对象 {}（“尚未增强”的判断是 Object.keys(item.metadata).length === 0）。读取特定增强器的键时请使用可选链（item.metadata?.enricherId），因为在增强完成之前该键不存在。
读取折扣码和行折扣
cart.discountCodes 列出应用于购物车的折扣码，每行的 discountAllocations 列出应用于该特定行的折扣：
位置与限制
- 区域： 任意（顶部、主体或底部）。也可作为 Cart items 的子区块使用。
- 最大数量： 无限制。
- 状态： 有商品和空购物车均可（作为版块区块时）。作为 Cart items 子区块时，仅在购物车有商品行时渲染，每行一个实例。
- 未锁定，因此你可以移除或隐藏它。
- 没有按区块的 Design 部分。请通过你自己的标记、自定义 CSS 和全局设计设置来设置样式。