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

# Warenkorbpositionen ausblenden und umbenennen

> Ein Cart-SDK-Anwendungsfall mit Line-Transforms und Comparators, um von Apps eingefügte Positionen auszublenden, umzubenennen und ihre Renderreihenfolge zu steuern.

Blende Positionen aus, die der Käufer nicht sehen soll, benenne schlecht lesbare Positionen um und steuere die Reihenfolge, in der alles gerendert wird — ohne den tatsächlichen Warenkorbinhalt anzufassen.

Das ersetzt das ältere Muster, Warenkorbelemente mit CSS oder `style.display = 'none'` zu verstecken. Eine Line-Transform wird bei jedem Rendern des Warenkorbs angewendet, sie überlebt also Updates, Re-Renders und das erneute Öffnen des Drawers.

<div id="hide-a-line">
  ## Eine Position ausblenden
</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>
  **Ausblenden ist nicht Entfernen.** Eine ausgeblendete Position bleibt im Warenkorb des Käufers, bleibt in der Summe und geht mit in den Checkout; sie wird nur nicht im Drawer gezeichnet. Sie verschwindet allerdings aus `getCart().items` und `itemCount`, sodass auch dein eigener Code sie nicht mehr sieht. Wenn sie wirklich weg sein soll, nutze [`removeItem`](/de/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Typische Kandidaten fürs Ausblenden:

```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">
  ## Eine Position umbenennen
</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);
  }
});
```

Die vier Setter, die auf einer Position verfügbar sind:

| Setter                            | Wirkung                                                                                                                                                   |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Blendet die Position im Drawer aus.                                                                                                                       |
| `setTitle(string)`                | Ändert den angezeigten Titel.                                                                                                                             |
| `setVariantTitle(string \| null)` | Ändert das angezeigte Varianten-Label. `null` entfernt es.                                                                                                |
| `setInternalProperties(obj)`      | Merged rein anzeigebezogene Properties, die ein [Custom-Code-Block](/de/aftersell/cart/custom-code-blocks) lesen kann. Werden nie in Shopify gespeichert. |

<div id="control-the-order">
  ## Die Reihenfolge steuern
</div>

Ein Comparator hat dieselbe Form, die `Array.prototype.sort` erwartet, und läuft nach dem Ausblenden und Umbenennen:

```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);
});
```

Gib `0` für Paare zurück, die dich nicht interessieren. Comparators werden als Tie-Breaker verkettet: Der erste, der einen Wert ungleich null zurückgibt, entscheidet dieses Paar, und `0` reicht die Entscheidung an den nächsten weiter, statt eine Reihenfolge zu erzwingen.

<div id="hide-a-whole-block-not-a-line">
  ## Einen ganzen Block ausblenden, nicht eine Position
</div>

Eine Line-Transform arbeitet auf Warenkorbpositionen. Um unterschiedliche **Block**-Einstellungen je nach Land, Markt oder Währung anzuzeigen (zum Beispiel unterschiedliche Rewards-Stufen), nutze [Conditions im Cart Editor](/de/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Kein Code nötig, und es überlebt Cart-Redesigns. Warenkorbsumme und Warenkorbinhalt sind **keine** Editor-Condition-Typen.

Greif zum SDK, wenn deine Regel etwas ist, das Conditions nicht abbilden können (Produkt-IDs im Warenkorb, eine eigene Summe und so weiter). In dem Fall fragst du im [Shadow Root](/de/aftersell/cart/sdk-overview#shadowroot) nach einer öffentlichen `cart-external-*`-Klasse:

```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>
  Das läuft nach jedem Render, der Block kann also kurz aufblitzen, bevor dein Code ihn ausblendet. Konditionales Rendering hat dieses Problem nicht, bevorzuge es also, wo immer es passt.
</Warning>

<div id="things-to-get-right">
  ## Worauf du achten musst
</div>

* **Transforms sind Setup-Aufrufe.** Registriere sie ganz oben in deinem Initialization-Script; kein `ready()` nötig.
* **Alle Transforms laufen.** Deine wird mit denen anderer Apps verkettet. Du kannst deren Transforms nicht ersetzen, und sie können deine nicht entfernen.
* **Eine Transform kann Preis, Menge oder Identität nicht ändern.** Sie ändert nur, was gerendert wird. Nutze die [Actions](/de/aftersell/cart/sdk-actions) für echte Änderungen.
* **Eine Transform, die einen Fehler wirft, wird stillschweigend übersprungen.** Die übrigen laufen weiter. Prüfe während der Entwicklung [`aftersellCartDebugEvents`](/de/aftersell/cart/sdk-overview#debugging).
* **`registerLineTransform` gibt eine Unregister-Funktion zurück**, falls du sie später rückgängig machen musst.

<div id="where-to-go-next">
  ## Nächste Schritte
</div>

* **[Hooks](/de/aftersell/cart/sdk-hooks)**: die vollständige Hook-Referenz.
* **[Cart-Objekt](/de/aftersell/cart/sdk-cart-object)**: jedes Feld, auf das du verzweigen kannst.
* **[Custom CSS](/de/aftersell/cart/custom-css)**: die `cart-external-*`-Klassenkonvention.