> ## 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.

# 防止购物车中仅含 upsell 的购买

> 要求客户在结账前至少添加一件常规商品。

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

此自定义功能使用 HTML、CSS 和 JavaScript，在购物车仅包含 upsell 商品时阻止结账。它有助于确保 upsell 被视为附加优惠，而不是独立购买，从而支持更可控、更有针对性的 upsell 策略。

这可以确保 upsell 商品在特定边界内发挥作用，强调它们作为主要商品的补充商品的角色。

实施后，在购物车中至少添加一件非 upsell 商品之前，**checkout 按钮将被禁用**。

<div id="how-it-works">
  ## 工作原理
</div>

* 如果购物车仅包含 upsell 商品，checkout 按钮会变灰
* 按钮下方会显示一条警告消息
* 一旦添加了常规商品，按钮就会激活，警告消失——为确保 upsell 商品仅与相关触发商品一起购买的场景提供清晰的验证，例如显示有针对性的警告消息。

此设置非常适合具备 JavaScript 和 CSS 基础知识的商店店主或开发者。

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

前往：\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## 在 **Above announcements/rewards** 部分粘贴：
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>
```

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

<div id="in-the-below-checkout-button-section-paste">
  ## 在 **Below checkout button** 部分粘贴：
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

你可以随意调整警告消息的措辞，使其符合你的品牌语气。

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

前往：\
**Upcart > Cart Editor > Settings > Custom CSS**

粘贴以下代码：

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

这段代码为警告消息设置样式，并在视觉和功能上禁用 checkout 按钮。

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

设置完成后：

* 除非购物车中至少有一件非 upsell 商品，否则结账将被阻止
* 一条消息会告知客户结账被禁用的原因
* 整体体验流畅且符合品牌调性

将有效的 upsell 策略与这些技术相结合，还能消除购买流程中不必要的冲突，从而改善整体客户购物体验。这在以下情况下尤其有用：

* 防止意外的单件 upsell 购买
* 让 upsell 始终作为附加商品存在
* 更好地控制 AOV 和商品组合

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

如果你在自定义方面需要任何帮助，我们建议咨询 Shopify 专家，了解如何在 cart drawer 中添加 HTML、CSS 甚至 JavaScript。

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