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

# カートラインの非表示とラベル変更

> ライントランスフォームとコンパレーターを使って、アプリが挿入したラインを非表示にし、名前を変更し、レンダリング順序を制御するCart SDKのユースケース。

購入者に見せるべきでないラインを非表示にし、読みづらいラインの名前を変更し、すべてのレンダリング順序を制御します。これらはすべて、カートの実際の中身に触れることなく行えます。

これは、CSSや`style.display = 'none'`でカート要素を隠す従来のパターンに代わるものです。ライントランスフォームはカートがレンダリングされるたびに適用されるため、更新、再レンダリング、ドロワーの再オープンをまたいで維持されます。

<div id="hide-a-line">
  ## ラインを非表示にする
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<Warning>
  **非表示は削除ではありません。** 非表示のラインは購入者のカートに残り、合計にも含まれ、チェックアウトまで引き継がれます。単にドロワーに描画されないだけです。ただし`getCart().items`と`itemCount`からは外れるため、あなた自身のコードからも見えなくなります。本当に取り除きたい場合は[`removeItem`](/ja/aftersell/cart/sdk-actions#removeitemkey)を使用してください。
</Warning>

非表示にする価値のある一般的なケース：

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});
```

<div id="relabel-a-line">
  ## ラインのラベルを変更する
</div>

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});
```

ラインで使用できる4つのセッター：

| セッター                              | 効果                                                                                                |
| --------------------------------- | ------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | ラインをドロワーから非表示にします。                                                                                |
| `setTitle(string)`                | 表示されるタイトルを変更します。                                                                                  |
| `setVariantTitle(string \| null)` | 表示されるバリエーションラベルを変更します。`null`で削除します。                                                               |
| `setInternalProperties(obj)`      | [カスタムコードブロック](/ja/aftersell/cart/custom-code-blocks)が読み取れるレンダリング専用プロパティをマージします。Shopifyには永続化されません。 |

<div id="control-the-order">
  ## 順序を制御する
</div>

コンパレーターは`Array.prototype.sort`が期待するのと同じ形式で、非表示化とリネームの後に実行されます。

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});
```

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});
```

関心のないペアには`0`を返してください。コンパレーターはタイブレーカーとして合成されるため、最初に非ゼロ値を返したものがそのペアを決定し、`0`を返すと順序を強制せず次のコンパレーターに判断を委ねます。

<div id="hide-a-whole-block-not-a-line">
  ## ラインではなくブロック全体を非表示にする
</div>

ライントランスフォームはカートラインに対して機能します。国、マーケット、通貨に応じて異なる**ブロック**設定を表示するには（たとえば異なるRewardsティア）、[カートエディターの条件](/ja/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency)を使用してください。コードは不要で、カートの再デザイン後も維持されます。カート合計とカートの内容は、エディターの条件タイプには**含まれません**。

条件では表現できないルール（カート内の商品ID、カスタム合計など）の場合はSDKを使用してください。その場合は、[shadow root](/ja/aftersell/cart/sdk-overview#shadowroot)からパブリックな`cart-external-*`クラスをクエリします。

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});
```

<Warning>
  これは各レンダリングの後に実行されるため、コードが非表示にする前にブロックが一瞬表示されることがあります。条件付きレンダリングにはこの問題がないため、適用できる場面ではそちらを優先してください。
</Warning>

<div id="things-to-get-right">
  ## 注意すべきポイント
</div>

* **トランスフォームはセットアップの呼び出しです。** Initializationスクリプトの先頭で登録してください。`ready()`は不要です。
* **すべてのトランスフォームが実行されます。** あなたのものは、他のアプリが登録したものと合成されます。他のアプリのものを置き換えることはできず、他のアプリもあなたのものを取り除くことはできません。
* **トランスフォームは価格、数量、アイデンティティを変更できません。** レンダリング内容を変更するだけです。実際の変更には[アクション](/ja/aftersell/cart/sdk-actions)を使用してください。
* **エラーをスローしたトランスフォームは静かにスキップされます。** 残りは引き続き実行されます。開発中は[`aftersellCartDebugEvents`](/ja/aftersell/cart/sdk-overview#debugging)を確認してください。
* **`registerLineTransform`は登録解除関数を返します。** 後で元に戻す必要がある場合に使用してください。

<div id="where-to-go-next">
  ## 次に読むべきページ
</div>

* **[フック](/ja/aftersell/cart/sdk-hooks)**：フックの完全なリファレンス。
* **[カートオブジェクト](/ja/aftersell/cart/sdk-cart-object)**：分岐に使えるすべてのフィールド。
* **[カスタムCSS](/ja/aftersell/cart/custom-css)**：`cart-external-*`クラスの規約。