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

# Skjul og omdøb kurvlinjer

> En Cart SDK-use case, der bruger line transforms og comparators til at skjule app-injicerede linjer, omdøbe dem og styre rækkefølgen, de renderes i.

Skjul linjer, kunden ikke bør se, omdøb linjer, der læses dårligt, og styr rækkefølgen, alt renderes i, alt sammen uden at røre ved, hvad der faktisk er i kurven.

Dette erstatter det ældre mønster med at skjule kurvelementer med CSS eller `style.display = 'none'`. En line transform anvendes, hver gang kurven renderes, så den overlever opdateringer, re-renders og genåbninger af skuffen.

<div id="hide-a-line">
  ## Skjul en linje
</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>
  **At skjule er ikke at fjerne.** En skjult linje bliver i kundens kurv, bliver i totalen og går med til checkout; den tegnes bare ikke i skuffen. Den forsvinder dog fra `getCart().items` og `itemCount`, så din egen kode holder også op med at se den. Vil du have den væk for alvor, så brug [`removeItem`](/da/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Almindelige ting, der er værd at skjule:

```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">
  ## Omdøb en linje
</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 fire settere, der er tilgængelige på en linje:

| Setter                            | Effekt                                                                                                                               |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `setHidden(bool)`                 | Skjul linjen fra skuffen.                                                                                                            |
| `setTitle(string)`                | Ændr den viste titel.                                                                                                                |
| `setVariantTitle(string \| null)` | Ændr den viste variantetiket. `null` fjerner den.                                                                                    |
| `setInternalProperties(obj)`      | Flet render-only properties ind, som en [Custom code-blok](/da/aftersell/cart/custom-code-blocks) kan læse. Gemmes aldrig i Shopify. |

<div id="control-the-order">
  ## Styr rækkefølgen
</div>

En comparator har samme form, som `Array.prototype.sort` forventer, og kører efter skjul og omdøbning:

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

Returnér `0` for par, du ikke bekymrer dig om. Comparators sammensættes som tie-breakers, så den første, der returnerer en værdi forskellig fra nul, afgør det par, og at returnere `0` giver beslutningen videre til den næste i stedet for at påtvinge en rækkefølge.

<div id="hide-a-whole-block-not-a-line">
  ## Skjul en hel blok, ikke en linje
</div>

En line transform arbejder på kurvlinjer. For at vise forskellige **blok**-indstillinger efter land, marked eller valuta (for eksempel forskellige Rewards-niveauer) skal du bruge [betingelser i cart editoren](/da/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Ingen kode kræves, og det overlever redesigns af kurven. Kurvtotal og kurvindhold er **ikke** betingelsestyper i editoren.

Ræk ud efter SDK'et, når din regel er noget, betingelser ikke kan udtrykke (produkt-ID'er i kurven, en custom total og så videre). I det tilfælde forespørg [shadow root'en](/da/aftersell/cart/sdk-overview#shadowroot) efter en offentlig `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>
  Dette kører efter hver render, så blokken kan blinke frem, før din kode skjuler den. Betinget rendering har ikke det problem, så foretræk det, hvor det passer.
</Warning>

<div id="things-to-get-right">
  ## Ting du skal have styr på
</div>

* **Transforms er opsætningskald.** Registrér dem øverst i dit Initialization-script; ingen `ready()` nødvendig.
* **Alles transforms kører.** Din sammensættes med alle registreret af andre apps. Du kan ikke erstatte deres, og de kan ikke droppe din.
* **En transform kan ikke ændre pris, antal eller identitet.** Den ændrer kun, hvad der renderes. Brug [actions](/da/aftersell/cart/sdk-actions) til rigtige ændringer.
* **En transform, der kaster, springes over stille.** Resten kører stadig. Tjek [`aftersellCartDebugEvents`](/da/aftersell/cart/sdk-overview#debugging) under udviklingen.
* **`registerLineTransform` returnerer en afregistreringsfunktion**, hvis du senere skal fortryde den.

<div id="where-to-go-next">
  ## Hvor du kan gå hen herfra
</div>

* **[Hooks](/da/aftersell/cart/sdk-hooks)**: den fulde hook-reference.
* **[Cart-objektet](/da/aftersell/cart/sdk-cart-object)**: hvert felt du kan forgrene på.
* **[Custom CSS](/da/aftersell/cart/custom-css)**: `cart-external-*`-klassekonventionen.