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

# Winkelwagenregels verbergen en herlabelen

> Een Cart SDK use case die line transforms en comparators gebruikt om door apps toegevoegde regels te verbergen, ze te hernoemen en de volgorde te bepalen waarin ze renderen.

Verberg regels die de shopper niet hoort te zien, hernoem regels die slecht leesbaar zijn en bepaal de volgorde waarin alles rendert, allemaal zonder aan te raken wat er daadwerkelijk in de winkelwagen zit.

Dit vervangt het oudere patroon van winkelwagen-elementen verbergen met CSS of `style.display = 'none'`. Een line transform wordt bij elke render van de winkelwagen toegepast, dus hij overleeft updates, re-renders en het opnieuw openen van de drawer.

<div id="hide-a-line">
  ## Een regel verbergen
</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>
  **Verbergen is niet verwijderen.** Een verborgen regel blijft in de winkelwagen van de shopper, blijft in het totaal en gaat door naar de checkout; hij wordt alleen niet getekend in de drawer. Hij valt wel weg uit `getCart().items` en `itemCount`, dus je eigen code ziet hem ook niet meer. Wil je hem echt weg hebben, gebruik dan [`removeItem`](/nl/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Veelvoorkomende dingen die het verbergen waard zijn:

```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">
  ## Een regel herlabelen
</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);
  }
});
```

De vier setters die op een regel beschikbaar zijn:

| Setter                            | Effect                                                                                                                                                      |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Verberg de regel in de drawer.                                                                                                                              |
| `setTitle(string)`                | Wijzig de weergegeven titel.                                                                                                                                |
| `setVariantTitle(string \| null)` | Wijzig het weergegeven variantlabel. `null` verwijdert het.                                                                                                 |
| `setInternalProperties(obj)`      | Voeg render-only properties samen, voor een [Custom code block](/nl/aftersell/cart/custom-code-blocks) om te lezen. Wordt nooit naar Shopify gepersisteerd. |

<div id="control-the-order">
  ## De volgorde bepalen
</div>

Een comparator heeft dezelfde vorm als `Array.prototype.sort` verwacht, en draait na verbergen en hernoemen:

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

Geef `0` terug voor paren waar je niet om geeft. Comparators componeren als tie-breakers, dus de eerste die een waarde ongelijk aan nul teruggeeft, beslist dat paar, en `0` teruggeven geeft de beslissing door aan de volgende in plaats van er een volgorde aan op te leggen.

<div id="hide-a-whole-block-not-a-line">
  ## Een heel block verbergen, geen regel
</div>

Een line transform werkt op winkelwagenregels. Om verschillende **block**-instellingen per land, markt of valuta te tonen (bijvoorbeeld verschillende Rewards-niveaus), gebruik je [voorwaarden in de cart editor](/nl/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Geen code nodig, en het overleeft herontwerpen van de winkelwagen. Winkelwagentotaal en winkelwageninhoud zijn **geen** editor-voorwaardetypes.

Grijp naar de SDK wanneer je regel iets is wat voorwaarden niet kunnen uitdrukken (product-ID's in de winkelwagen, een aangepast totaal, enzovoort). Bevraag in dat geval de [shadow root](/nl/aftersell/cart/sdk-overview#shadowroot) op een publieke `cart-external-*`-class:

```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>
  Dit draait na elke render, dus het block kan even in beeld flitsen voordat je code het verbergt. Conditionele rendering heeft dat probleem niet, dus geef daar de voorkeur aan waar het past.
</Warning>

<div id="things-to-get-right">
  ## Dingen om goed te doen
</div>

* **Transforms zijn set-up-aanroepen.** Registreer ze bovenaan je Initialization-script; geen `ready()` nodig.
* **De transforms van iedereen draaien.** De jouwe componeert met transforms die door andere apps zijn geregistreerd. Je kunt die van hen niet vervangen, en zij kunnen die van jou niet laten vallen.
* **Een transform kan prijs, aantal of identiteit niet wijzigen.** Hij wijzigt alleen wat er gerenderd wordt. Gebruik de [actions](/nl/aftersell/cart/sdk-actions) voor echte wijzigingen.
* **Een transform die een fout gooit wordt stilzwijgend overgeslagen.** De rest draait nog steeds. Controleer [`aftersellCartDebugEvents`](/nl/aftersell/cart/sdk-overview#debugging) tijdens het ontwikkelen.
* **`registerLineTransform` geeft een unregister-functie terug**, mocht je het later ongedaan willen maken.

<div id="where-to-go-next">
  ## Waar je verder kunt kijken
</div>

* **[Hooks](/nl/aftersell/cart/sdk-hooks)**: de volledige hook-referentie.
* **[Cart object](/nl/aftersell/cart/sdk-cart-object)**: elk veld waarop je kunt vertakken.
* **[Custom CSS](/nl/aftersell/cart/custom-css)**: de `cart-external-*`-classconventie.