> ## 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 にアップグレードした場合、これらのカスタマイズは動作しない可能性があります。[移行ガイド](/ja/upcart/upcart_v20_migration_guide)で提供されているバージョン 2 用の新しいセレクターを使用する必要があります。

カスタマイズが期待どおりに動作しない場合は、カートを自分でバージョン 1 に戻すことができます。Cart Editor で、左側メニュー上部にある **Cart version** ドロップダウンを使用し、**V1.0 (Legacy)** を選択してください。このドロップダウンは、カート内のすべてのモジュールが V2 になると表示されます。

現在、モジュールのバージョン 2 用の新しいカスタマイズテンプレートを作成中で、まもなく利用可能になる予定です。

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

このカスタマイズを使うと、特定の商品がカートに入っている場合に、リワードバーなどカートの特定の部分を非表示にできます。特定の SKU についてカート体験をシンプルにしたい場合や、特定のアイテムと一緒に特定のプロモーションが表示されないようにしたい場合に便利です。

このセットアップでは、商品 ID を使用してどの商品がカートに入っているかを検出し、一致が見つかった場合に選択した要素を非表示にします。ロジックは、Upcart エディタのカスタム HTML と CSS を使用して適用します。

***

<div id="when-to-use-this">
  ## 使いどころ
</div>

* プロモーション商品がカートに入っているときにリワードバーを非表示にする
* 商品タイプに応じて、カスタムコンテンツブロック、トラストバッジ、アップセルセクションを非表示にする
* 特定のアイテムについて、よりすっきりした、または最適化されたチェックアウトフローを維持する

この方法には、HTML と JavaScript の基本的な知識が必要です。

***

<div id="step-1-find-the-product-ids">
  ## ステップ 1：商品 ID を確認する
</div>

1. **Shopify 管理画面 > 商品**に移動します
2. 対象にしたい商品をクリックします
3. URL 内の `/products/` の後にある数値の商品 ID をコピーします

**例：**

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

これらの ID を、表示を制御する JavaScript の配列で使用します。

***

<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 Expert** との連携をおすすめします。カートドロワー内の HTML、CSS、JavaScript を支援してもらえます。

[Shopify Experts を見る](https://www.shopify.com/partners/directory)