求助：如何在Shopify Dawn主题购物车页设置必填复选框

你已经把复选框放到结账按钮旁了，接下来要通过HTML标记+JS验证来实现必填限制——因为Shopify的结账按钮是JS触发跳转，纯HTML的required属性没法完全生效，具体步骤如下：

1. 修正复选框的HTML结构 #

找到你添加复选框的文件（比如sections/cart-template.liquid或sections/cart-drawer.liquid，取决于你用的是页面式还是抽屉式购物车），给复选框加上required属性，同时完善标签关联：

<div class="terms-agreement">
  <input type="checkbox" id="terms-agreement" name="terms-agreement" required>
  <label for="terms-agreement">我已阅读并同意<a href="/pages/terms-and-conditions">条款和条件</a></label>
</div>

这里的required是给浏览器原生提示用的，但核心还是要靠JS拦截结账行为。

2. 添加JS验证逻辑 #

打开主题的assets/theme.js（或者assets/cart.js，如果主题有单独的购物车JS文件），在文件末尾添加以下代码：

// 拦截结账按钮点击，验证条款复选框
document.querySelector('[data-action="checkout"]').addEventListener('click', function(e) {
  const termsCheckbox = document.getElementById('terms-agreement');
  if (!termsCheckbox.checked) {
    e.preventDefault(); // 阻止跳转结账页面
    alert('请先同意我们的条款和条件'); // 弹出提示
    // 可选：给复选框区域加错误样式
    termsCheckbox.closest('.terms-agreement').classList.add('error');
  }
});

如果你的结账按钮选择器不是[data-action="checkout"]，可以换成button[name="checkout"]，根据按钮实际的HTML属性调整即可。

3. 可选：添加错误提示样式 #

在assets/base.css或assets/component-cart.css里加一点样式，让未勾选时的提示更显眼：

.terms-agreement.error {
  color: #dc3545;
}
.terms-agreement.error label {
  padding-bottom: 2px;
  border-bottom: 1px solid #dc3545;
}

关键注意点 #

• 修改完文件后，一定要点击Shopify后台的「保存」，然后清空浏览器缓存再测试，不然可能看不到效果
• 如果用的是Dawn的区块编辑器，要确保你修改的是当前启用的购物车区块对应的文件
• 不要只依赖HTML的required，因为Shopify的结账跳转是通过JS触发的，原生表单验证不会触发，必须用JS拦截

内容的提问来源于stack exchange，提问作者Andres Torres