概述

本教程向你展示如何在 checkout 按钮下方添加一个复选框，要求客户同意你商店的条款和条件。未勾选时，checkout 按钮和快捷支付按钮会被禁用。这是确保法律合规、设定明确预期并为购物车体验增添专业感的绝佳方式。

此定制的作用

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

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

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

第 1 步：添加自定义 HTML

前往 Upcart > Cart Editor > Settings > Custom HTML
将以下内容粘贴到 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>

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

将以下内容粘贴到 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>

第 2 步：添加自定义 CSS

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

.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 值来更改颜色，以匹配你的品牌风格。

最终效果

当客户打开购物车时：

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

需要帮助？

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

开始使用

购物车模块

购物车设置

固定购物车按钮

Multicart

自定义

分析

集成与兼容性

计费与账户

故障排除

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

概述

此定制的作用

第 1 步：添加自定义 HTML

第 2 步：添加自定义 CSS

最终效果

需要帮助？

​概述

​此定制的作用

​第 1 步：添加自定义 HTML

​第 2 步：添加自定义 CSS

​最终效果

​需要帮助？

概述

此定制的作用

第 1 步：添加自定义 HTML

第 2 步：添加自定义 CSS

最终效果

需要帮助？