> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 在购物车中添加必选的条款和条件复选框

> 要求客户在继续 checkout 之前同意你的条款。

<div id="overview">
  # 概述
</div>

本教程向你展示如何在 checkout 按钮下方添加一个复选框，要求客户同意你商店的条款和条件。未勾选时，checkout 按钮和快捷支付按钮会被禁用。

这是确保法律合规、设定明确预期并为购物车体验增添专业感的绝佳方式。

***

<div id="what-this-customization-does">
  ## 此定制的作用
</div>

* 在 checkout 按钮下方添加条款和条件复选框
* 在客户同意之前阻止其进行 checkout
* 阻止标准 checkout 按钮。在快捷支付模块的**版本 1** 上，它还会将快捷按钮置灰 — 如果你使用版本 2，请参阅下面的说明
* 支持完全自定义的文本和链接

此定制需要基础的 HTML、JavaScript 和 CSS 知识。最适合具备入门级编程知识的店主或开发者。

<Warning>
  \*\*快捷按钮部分仅适用于版本 1。\*\*该脚本查找的是 `#upcart-additional-checkout-buttons`，CSS 设置的样式是 `.upcart-express-pay-button` — 两者都属于版本 1 的快捷支付模块。版本 2 渲染的是 `#upcart-express-payments`，并克隆 Shopify 自身的按钮，这些按钮不带上述任一选择器，因此即使未勾选复选框，快捷 checkout 仍然可以点击。标准 checkout 按钮在两个版本上都会被阻止。
</Warning>

***

<div id="step-1-add-custom-html">
  ## 第 1 步：添加自定义 HTML
</div>

1. 前往 **Upcart > Cart Editor > Settings > Custom HTML**
2. 将以下内容粘贴到 **Above announcements/rewards**：

```
<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>
```

<Note>
  **旧版说明：**`window.upcartOnCartLoaded` 回调仍然可用，但已弃用并会在控制台记录警告。所有新脚本请使用 `upcartSubscribeCartLoaded`。
</Note>

1. 将以下内容粘贴到 **Below checkout button**。请更新链接和文本以匹配你商店的条款：

```
<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>
```

***

<div id="step-2-add-custom-css">
  ## 第 2 步：添加自定义 CSS
</div>

1. 前往 **Upcart > Cart Editor > Settings > Custom CSS**
2. 粘贴以下内容以控制样式：

```
.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}
```

你可以通过更新 `color`、`background-color` 和 `opacity` 值来更改颜色，以匹配你的品牌风格。

***

<div id="final-result">
  ## 最终效果
</div>

当客户打开购物车时：

* 在勾选复选框之前，checkout 按钮和快捷按钮处于禁用状态
* 如果客户在未同意的情况下尝试继续，会出现红色警告消息
* 一旦勾选复选框，所有按钮都会变为可用

***

<div id="need-help">
  ## 需要帮助？
</div>

对于高级实现或更复杂的需求，我们建议与 **Shopify 专家**合作。Upcart 的支持团队不协助编写或排查自定义代码。

[查看 Shopify 专家](https://www.shopify.com/partners/directory)