在结账按钮下方添加一个复选框，并在购物者勾选之前阻止其继续。适用于条款确认、年龄门槛以及按订单定制的确认场景。
**checkout 事件无法取消结账。**它是在浏览器跳转前作为通知触发的，因此返回 false 或调用 preventDefault 都不起作用。控制结账的唯一方法是在按钮被按下之前让它不响应点击，本页展示的正是这种做法。请将其视为界面层面的阻拦，而非法律保证。有心的购物者仍然可以直接进入结账。
- 结账按钮下方的一个自定义代码块渲染复选框。
- 在复选框未勾选时，该块通过 shadow root 给购物车的结账按钮和快捷支付按钮添加一个类。
- 自定义 CSS 让这个类禁用点击。
在你的 Checkout button 块下方添加一个自定义代码块，将其切换到 React component 模式，然后粘贴：
点击 Compile，然后开启 “Use custom template”。在此之前该块不会渲染任何内容。
props.cart 这个依赖项很重要：它会在购物车重新渲染之后重新应用该类，否则类会被抹掉。
在 Cart settings → Custom CSS 中：
真正阻止点击的是 pointer-events: none；透明度只是向购物者展示原因。
在预览中确认：
- 结账按钮在加载时呈灰显状态且不响应点击。
- 勾选复选框后按钮启用；取消勾选后按钮再次禁用。
- 快捷支付按钮同样被限制。
- 在复选框未勾选时，添加或移除商品不会重新启用按钮。
最后一项是最常见的失败点。如果按钮在购物车变化后自行重新启用，说明 effect 没有重新运行。检查 props.cart 是否在依赖数组中。
复选框只是浏览器端的状态；它永远不会进入订单。要记录接受情况，可在加购时将其作为属性写到每个行项目上：
将它添加到主题中的产品表单里。Shopify 会直接从表单读取 properties[...]，所以无论由谁执行添加——Aftersell、主题或其他应用——该值都会到达订单。
以 _ 为前缀的属性不会出现在面向买家的行项目中，但仍会传到 Shopify，因此会出现在订单上。这记录的是当时生效的条款版本，而不是购物者勾选了复选框这一事实。
- 只针对
cart-external-* 类。 cart-internal-* 这些对应的类是购物车自身的内部结构，不是给你的代码用的抓手。参见自定义 CSS。
- **使用
shadowRoot 前先检查它是否存在。**在购物车启动之前它是 undefined。
- 在购物车加载完成之前该块不渲染任何内容，因此结账按钮绝不会在限制生效前出现短暂可用的情况。
- 抛出异常的 React 块什么也不渲染，而购物车的其余部分照常运行，在这里就意味着结账按钮失去保护。发布前请在预览中测试。
