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

> 使用自定义 HTML，在购物车中添加单个 upsell 后隐藏 upsell 模块。

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

此自定义功能会在客户接受一个 upsell 后立即隐藏 upsell 区块，从而防止同时添加多个 upsell。一旦该 upsell 被移除，模块会重新显示。

在以下情况下这非常有用：

* 简化购物车体验
* 减少决策疲劳
* 保持某些优惠的稀缺感

***

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

* 当客户接受一个 upsell 时，upsell 区块会被隐藏
* 如果该 upsell 商品被移除，upsell 区块会再次显示
* 适用于 AI 推荐和手动设置的 upsell

***

<div id="where-to-add-the-code">
  ## 在哪里添加代码
</div>

1. 前往 **Upcart > Cart Editor > Settings > Custom HTML**

<Warning>
  **下面的选择器仅适用于 Version 1。**`.upcart-upsells-module` 位于 V1 upsells 轮播上。如果你的 Upsells 模块使用的是 **Version 2**，请在全部三个处理程序中将其替换为 `.upcart-public-upsell`——脚本的其余部分保持不变。请参阅 [V2 CSS 选择器库](/zh/upcart/upcart_css_selector_library_v2)。
</Warning>

2. 将以下代码粘贴到 **Above announcements/rewards** 位置

***

<div id="html-script-to-copy">
  ## 要复制的 HTML 脚本
</div>

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

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

***

<div id="result">
  ## 结果
</div>

添加此自定义功能后：

* 只有在客户尚未接受任何 upsell 时，才会看到 upsell
* 添加 upsell 后，upsell 模块会立即隐藏
* 如果 upsell 商品被移除，模块会自动重新显示
* 无需配置商品 ID 或标签

这样可以让你的 upsell 体验保持专注、简洁，并且客户更易于参与。

***

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

如需更高级的自定义，我们建议与 **Shopify 专家**合作。他们可以协助处理 cart drawer 中的 HTML、CSS 和 JavaScript。

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