工作原理
- 结账按钮下方的一个自定义代码块渲染复选框。
- 在复选框未勾选时,该块通过 shadow root 给购物车的结账按钮和快捷支付按钮添加一个类。
- 自定义 CSS 让这个类禁用点击。
第 1 步:添加复选框块
props.cart 这个依赖项很重要:它会在购物车重新渲染之后重新应用该类,否则类会被抹掉。
第 2 步:添加 CSS
pointer-events: none;透明度只是向购物者展示原因。
第 3 步:测试
- 结账按钮在加载时呈灰显状态且不响应点击。
- 勾选复选框后按钮启用;取消勾选后按钮再次禁用。
- 快捷支付按钮同样被限制。
- 在复选框未勾选时,添加或移除商品不会重新启用按钮。
props.cart 是否在依赖数组中。
记录谁接受了条款
properties[...],所以无论由谁执行添加——Aftersell、主题或其他应用——该值都会到达订单。
以 _ 为前缀的属性不会出现在面向买家的行项目中,但仍会传到 Shopify,因此会出现在订单上。这记录的是当时生效的条款版本,而不是购物者勾选了复选框这一事实。
需要注意的要点
- 只针对
cart-external-*类。cart-internal-*这些对应的类是购物车自身的内部结构,不是给你的代码用的抓手。参见自定义 CSS。 - **使用
shadowRoot前先检查它是否存在。**在购物车启动之前它是undefined。 - 在购物车加载完成之前该块不渲染任何内容,因此结账按钮绝不会在限制生效前出现短暂可用的情况。
- 抛出异常的 React 块什么也不渲染,而购物车的其余部分照常运行,在这里就意味着结账按钮失去保护。发布前请在预览中测试。