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

# Nascondi e rietichetta le righe del carrello

> Un caso d'uso del Cart SDK che usa line transform e comparator per nascondere righe inserite dalle app, rinominarle e controllare l'ordine in cui vengono renderizzate.

Nascondi le righe che l'acquirente non dovrebbe vedere, rinomina le righe che si leggono male e controlla l'ordine in cui tutto viene renderizzato, il tutto senza toccare ciò che è effettivamente nel carrello.

Questo sostituisce il vecchio pattern di nascondere gli elementi del carrello con CSS o `style.display = 'none'`. Un line transform viene applicato ogni volta che il carrello renderizza, quindi sopravvive ad aggiornamenti, re-render e riaperture del drawer.

<div id="hide-a-line">
  ## Nascondere una riga
</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>
  **Nascondere non è rimuovere.** Una riga nascosta rimane nel carrello dell'acquirente, rimane nel totale e arriva fino al checkout; semplicemente non viene disegnata nel drawer. Esce però da `getCart().items` e da `itemCount`, quindi anche il tuo stesso codice smette di vederla. Se vuoi che sparisca davvero, usa [`removeItem`](/it/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Cose che vale la pena nascondere comunemente:

```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">
  ## Rietichettare una riga
</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);
  }
});
```

I quattro setter disponibili su una riga:

| Setter                            | Effetto                                                                                                                                       |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Nasconde la riga dal drawer.                                                                                                                  |
| `setTitle(string)`                | Cambia il titolo visualizzato.                                                                                                                |
| `setVariantTitle(string \| null)` | Cambia l'etichetta della variante visualizzata. `null` la rimuove.                                                                            |
| `setInternalProperties(obj)`      | Fonde proprietà solo di rendering, che un [blocco Custom code](/it/aftersell/cart/custom-code-blocks) può leggere. Mai persistite su Shopify. |

<div id="control-the-order">
  ## Controllare l'ordine
</div>

Un comparator ha la stessa forma che `Array.prototype.sort` si aspetta, e viene eseguito dopo il nascondere e il rinominare:

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

Restituisci `0` per le coppie che non ti interessano. I comparator si compongono come criteri di spareggio, quindi il primo che restituisce un valore diverso da zero decide quella coppia e restituire `0` passa la decisione al successivo invece di imporre un ordine.

<div id="hide-a-whole-block-not-a-line">
  ## Nascondere un intero blocco, non una riga
</div>

Un line transform lavora sulle righe del carrello. Per mostrare impostazioni di **blocco** diverse per paese, mercato o valuta (per esempio livelli di Rewards diversi), usa le [condizioni nel cart editor](/it/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Nessun codice richiesto, e sopravvive ai redesign del carrello. Il totale del carrello e il contenuto del carrello **non** sono tipi di condizione dell'editor.

Ricorri all'SDK quando la tua regola è qualcosa che le condizioni non possono esprimere (ID di prodotti nel carrello, un totale personalizzato e così via). In tal caso, interroga lo [shadow root](/it/aftersell/cart/sdk-overview#shadowroot) per una classe pubblica `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>
  Questo viene eseguito dopo ogni render, quindi il blocco può lampeggiare a vista prima che il tuo codice lo nasconda. Il rendering condizionale non ha quel problema, quindi preferiscilo ovunque sia applicabile.
</Warning>

<div id="things-to-get-right">
  ## Cose da fare bene
</div>

* **I transform sono chiamate di set-up.** Registrali all'inizio del tuo script Initialization; non serve `ready()`.
* **I transform di tutti vengono eseguiti.** Il tuo si compone con quelli registrati da altre app. Non puoi sostituire i loro, e loro non possono eliminare il tuo.
* **Un transform non può cambiare prezzo, quantità o identità.** Cambia solo ciò che viene renderizzato. Usa le [azioni](/it/aftersell/cart/sdk-actions) per modifiche reali.
* **Un transform che lancia un errore viene saltato silenziosamente.** Gli altri vengono comunque eseguiti. Controlla [`aftersellCartDebugEvents`](/it/aftersell/cart/sdk-overview#debugging) durante lo sviluppo.
* **`registerLineTransform` restituisce una funzione di deregistrazione**, se hai bisogno di annullarlo in seguito.

<div id="where-to-go-next">
  ## Dove andare adesso
</div>

* **[Hooks](/it/aftersell/cart/sdk-hooks)**: il riferimento completo degli hook.
* **[Cart object](/it/aftersell/cart/sdk-cart-object)**: ogni campo su cui puoi ramificare.
* **[CSS personalizzato](/it/aftersell/cart/custom-css)**: la convenzione delle classi `cart-external-*`.