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

# 使用商品 ID 隐藏特定购物车元素

> 使用商品 ID 根据购物车中的内容有条件地隐藏奖励进度条或其他购物车元素。

⚠️ **重要提示**

此自定义功能仅适用于 Upcart 购物车模块的版本 1。如果你最近将购物车升级到了版本 2，这些自定义可能无法工作。你需要使用[迁移指南](/zh/upcart/upcart_v20_migration_guide)中为版本 2 提供的新选择器。

如果你的自定义功能未按预期工作，你可以自行将购物车回退到版本 1：在购物车编辑器中，使用左侧菜单顶部的 **Cart version** 下拉菜单并选择 **V1.0 (Legacy)**。该下拉菜单会在购物车中所有模块都升级到 V2 后出现。

我们目前正在为模块版本 2 开发新的自定义模板，很快就会推出。

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

此自定义功能可让你在购物车中存在特定商品时隐藏购物车的特定部分，例如奖励进度条。当你想为某些 SKU 简化购物车体验，或防止特定促销活动与某些商品同时出现时，此功能非常有用。

此设置使用商品 ID 来检测购物车中有哪些商品，并在找到匹配项时隐藏所选元素。你将在 Upcart 编辑器中使用自定义 HTML 和 CSS 来应用该逻辑。

***

<div id="when-to-use-this">
  ## 何时使用
</div>

* 当购物车中有促销商品时隐藏奖励进度条
* 根据商品类型隐藏自定义内容块、信任徽章或 upsell 版块
* 为特定商品保持更简洁或更有针对性的结账流程

此方法需要基础的 HTML 和 JavaScript 知识。

***

<div id="step-1-find-the-product-ids">
  ## 第 1 步：查找商品 ID
</div>

1. 前往 **Shopify Admin > Products**
2. 点击你要定位的商品
3. 从 URL 中 `/products/` 之后复制数字商品 ID

**示例：**

```
/products/1234567890 → 1234567890
```

你将在控制可见性的 JavaScript 数组中使用这些 ID。

***

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

1. 前往 **Upcart > Cart Editor > Settings > Custom HTML**
2. 将以下代码**同时**粘贴到 **Above announcements/rewards** 和 **On empty cart screen** 两个 HTML 位置
3. 将 `productIDsToExclude` 中的值替换为你的商品 ID
4. 将 `.YOUR-CLASS-HERE` 更新为你想隐藏的购物车元素（例如：`.upcart-rewards`、`.custom-message`、`.trust-badge`）

```
<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>
```

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

***

<div id="step-3-optional-fallback-css">
  ## 第 3 步：可选的后备 CSS
</div>

如果你想确保元素在购物车完全加载之前就被隐藏，请在 **Custom CSS** 部分添加以下代码：

```
.YOUR-CLASS-HERE {   display: none; }
```

**注意：** 在 JavaScript 运行之前，这可能会对所有用户临时隐藏该元素，从而导致闪烁。在大多数情况下，最好依靠 JavaScript 方法。

***

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

设置完成后：

* 如果购物车包含指定商品之一，目标购物车元素（例如奖励进度条）将被隐藏
* 否则该元素保持可见
* 你可以复用此逻辑，根据针对特定商品的规则隐藏或显示不同元素

***

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

对于更复杂的自定义功能，我们建议与 **Shopify 专家**合作。他们可以协助处理购物车抽屉内的 HTML、CSS 和 JavaScript。

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