Skip to main content
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.

Masquer une ligne

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.
Choses courantes qui méritent d’être masquées :

Renommer une ligne

Les quatre setters disponibles sur une ligne :

Contrôler l’ordre

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

Masquer un bloc entier, pas une ligne

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. 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 pour une classe publique cart-external-* :
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.

Les points à ne pas rater

  • 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 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 pendant le développement.
  • registerLineTransform renvoie une fonction de désenregistrement, si vous devez l’annuler plus tard.

Pour aller plus loin

  • Hooks : la référence complète des hooks.
  • Objet cart : chaque champ sur lequel vous pouvez faire un branchement.
  • Custom CSS : la convention de classes cart-external-*.