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

# Masquer et renommer les lignes du panier

> Un cas d'usage du Cart SDK utilisant les transformations de lignes et les comparateurs pour masquer les lignes injectées par des applications, les renommer et contrôler leur ordre d'affichage.

Masquez les lignes que l'acheteur ne devrait pas voir, renommez les lignes mal libellées et contrôlez l'ordre dans lequel tout s'affiche, le tout sans toucher à ce qui est réellement dans le panier.

Cela remplace l'ancien schéma consistant à masquer les éléments du panier avec du CSS ou `style.display = 'none'`. Une transformation de ligne est appliquée à chaque rendu du panier, elle survit donc aux mises à jour, aux nouveaux rendus et aux réouvertures du tiroir.

<div id="hide-a-line">
  ## Masquer une ligne
</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>
  **Masquer n'est pas supprimer.** Une ligne masquée reste dans le panier de l'acheteur, reste dans le total et passe jusqu'au paiement ; elle n'est simplement pas dessinée dans le tiroir. Elle disparaît en revanche de `getCart().items` et de `itemCount`, donc votre propre code cesse aussi de la voir. Si vous voulez qu'elle disparaisse pour de bon, utilisez [`removeItem`](/fr/aftersell/cart/sdk-actions#removeitemkey).
</Warning>

Choses courantes qui méritent d'être masquées :

```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">
  ## Renommer une ligne
</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);
  }
});
```

Les quatre setters disponibles sur une ligne :

| Setter                            | Effet                                                                                                                                                       |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setHidden(bool)`                 | Masquer la ligne du tiroir.                                                                                                                                 |
| `setTitle(string)`                | Changer le titre affiché.                                                                                                                                   |
| `setVariantTitle(string \| null)` | Changer le libellé de variante affiché. `null` le supprime.                                                                                                 |
| `setInternalProperties(obj)`      | Fusionner des propriétés d'affichage uniquement, qu'un [bloc Custom code](/fr/aftersell/cart/custom-code-blocks) peut lire. Jamais persistées vers Shopify. |

<div id="control-the-order">
  ## Contrôler l'ordre
</div>

Un comparateur prend la même forme que celle attendue par `Array.prototype.sort`, et s'exécute après le masquage et le renommage :

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

Renvoyez `0` pour les paires qui ne vous intéressent pas. Les comparateurs se composent comme départageurs, donc le premier à renvoyer une valeur non nulle décide pour cette paire, et renvoyer `0` transmet la décision au suivant au lieu de lui imposer un ordre.

<div id="hide-a-whole-block-not-a-line">
  ## Masquer un bloc entier, pas une ligne
</div>

Une transformation de ligne agit sur les lignes du panier. Pour afficher des paramètres de **bloc** différents selon le pays, le marché ou la devise (par exemple des paliers Rewards différents), utilisez les [conditions dans l'éditeur de panier](/fr/aftersell/cart/blocks-overview#show-or-hide-by-market-country-or-currency). Aucun code requis, et cela survit aux refontes du panier. Le total et le contenu du panier ne sont **pas** des types de conditions de l'éditeur.

Utilisez le SDK lorsque votre règle est quelque chose que les conditions ne peuvent pas exprimer (des IDs de produits dans le panier, un total personnalisé, etc.). Dans ce cas, interrogez le [shadow root](/fr/aftersell/cart/sdk-overview#shadowroot) pour une classe publique `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>
  Ce code s'exécute après chaque rendu, donc le bloc peut apparaître brièvement avant que votre code ne le masque. Le rendu conditionnel n'a pas ce problème, préférez-le donc chaque fois que c'est possible.
</Warning>

<div id="things-to-get-right">
  ## Les points à ne pas rater
</div>

* **Les transformations sont des appels de configuration.** Enregistrez-les en haut de votre script Initialization ; pas besoin de `ready()`.
* **Les transformations de tout le monde s'exécutent.** La vôtre se compose avec toutes celles enregistrées par d'autres applications. Vous ne pouvez pas remplacer les leurs, et elles ne peuvent pas écarter la vôtre.
* **Une transformation ne peut pas changer le prix, la quantité ou l'identité.** Elle ne change que ce qui s'affiche. Utilisez les [actions](/fr/aftersell/cart/sdk-actions) pour de vraies modifications.
* **Une transformation qui lève une exception est ignorée silencieusement.** Les autres s'exécutent quand même. Consultez [`aftersellCartDebugEvents`](/fr/aftersell/cart/sdk-overview#debugging) pendant le développement.
* **`registerLineTransform` renvoie une fonction de désenregistrement**, si vous devez l'annuler plus tard.

<div id="where-to-go-next">
  ## Pour aller plus loin
</div>

* **[Hooks](/fr/aftersell/cart/sdk-hooks)** : la référence complète des hooks.
* **[Objet cart](/fr/aftersell/cart/sdk-cart-object)** : chaque champ sur lequel vous pouvez faire un branchement.
* **[Custom CSS](/fr/aftersell/cart/custom-css)** : la convention de classes `cart-external-*`.