Afficher les données de metafields sur les lignes du panier

Le panier connaît ce que l’API Ajax de Shopify lui indique : titres, prix, quantités, propriétés. Il ne connaît pas vos metafields. Un enrichisseur de panier (cart enricher) récupère des champs de produit ou de variante supplémentaires depuis l’API Storefront et les attache à chaque ligne correspondante, afin que vous puissiez afficher une estimation de livraison, un avertissement « expédié séparément », une liste d’ingrédients, ou toute autre information stockée sur le produit. Utilisations typiques : fenêtres de livraison par produit, badges d’allergènes ou d’ingrédients, un indicateur « stock faible » personnalisé, des multiplicateurs de points de fidélité, des prix réservés aux abonnés.

Enregistrer l’enrichisseur

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'delivery',
  onType: 'Product',
  fragment: `
    deliveryWindow: metafield(namespace: "custom", key: "delivery_window") { value }
    shipsSeparately: metafield(namespace: "custom", key: "ships_separately") { value }
  `,
});

Trois champs :

Champ	Description
`id`	Espace de noms pour le résultat ; il atterrit dans `line.metadata[id]`. Doit être unique ; un second enregistrement avec le même `id` est ignoré.
`onType`	`'Product'` ou `'ProductVariant'`. C’est aussi la clé de jointure, donc ID de produit vs ID de variante.
`fragment`	Une sélection de champs GraphQL (sans accolades extérieures) insérée dans la requête Storefront. Les accolades doivent être équilibrées.

Chaque fois que le panier se charge ou change, Aftersell récupère votre fragment pour chaque produit ou variante du panier. La récupération est non bloquante : le panier s’affiche immédiatement et réémet cart_updated une fois les données arrivées. Un fragment lent ou en échec ne retarde ni ne casse jamais le panier.

Lire les données

Comme l’enrichissement est asynchrone, line.metadata.delivery vaut undefined jusqu’à ce que la première récupération aboutisse. Protégez toujours la lecture.

window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    const deliveryWindow = line.metadata.delivery?.deliveryWindow?.value;
    if (!deliveryWindow) return; // not fetched yet

    console.log(line.title, 'arrives in', deliveryWindow);
  });
});

L’afficher dans le panier

L’enrichissement place les données sur la ligne ; un bloc de code personnalisé en mode React les dessine. Ajoutez le bloc comme sous-bloc Cart items afin qu’il s’affiche une fois par ligne et reçoive cette ligne via props.line :

function CustomCode(props) {
  const data = props.line?.metadata?.delivery;
  const window_ = data?.deliveryWindow?.value;

  if (!window_) return null;

  return (
    <div className="cart-external-custom-code_html" style={{ fontSize: '12px', opacity: 0.7 }}>
      Arrives in {window_}
    </div>
  );
}

Les valeurs enrichies reviennent de l’API Storefront telles quelles et non assainies. Affichez-les en tant que texte, comme ci-dessus, et jamais avec dangerouslySetInnerHTML ni en écrivant du HTML brut.

Données au niveau de la variante

Définissez onType: 'ProductVariant' lorsque le metafield se trouve sur la variante plutôt que sur le produit :

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'pricing',
  onType: 'ProductVariant',
  fragment: `
    anchorPrice: metafield(namespace: "custom", key: "anchor_price") { value }
    subscriberPrice: metafield(namespace: "custom", key: "subscriber_price") { value }
  `,
});

Plus que des metafields

Le fragment est inséré dans une requête de l’API Storefront, donc tout ce que l’API expose sur un Product ou un ProductVariant fonctionne, pas seulement les metafields :

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'productInfo',
  onType: 'Product',
  fragment: `
    tags
    vendor
    productType
    availableForSale
  `,
});

// Then: warn about anything from a drop-ship vendor.
window.aftersell.cart.events.on('cart_updated', (state) => {
  const hasDropship = state.items.some((line) => {
    const tags = line.metadata.productInfo?.tags;
    return tags?.includes('dropship');
  });
});

Points à ne pas manquer

Protégez chaque lecture. metadata vaut {} par défaut et votre espace de noms est undefined jusqu’à ce que la récupération aboutisse. Le panier s’affiche avant l’arrivée des données, toujours.
Chaque id est son propre espace de noms. Plusieurs enrichisseurs coexistent sans collision, y compris ceux enregistrés par d’autres applications.
Les metafields doivent être visibles côté Storefront. Un metafield qui n’est pas exposé à l’API Storefront renvoie null. Vérifiez la définition dans l’admin Shopify si vous ne recevez rien.
Gardez le fragment petit. Il s’exécute pour chaque produit du panier, à chaque changement du panier. Demandez les champs que vous utilisez, pas tout.
Enregistrez au moment de la configuration. C’est un hook, donc sa place est en haut de votre script d’initialisation.
Les accolades doivent être équilibrées. Pas d’accolades extérieures autour du fragment, mais toute sélection imbriquée nécessite sa propre paire correspondante. Un fragment déséquilibré est rejeté.

Où aller ensuite

registerCartEnricher : la référence complète du hook.
Blocs de code personnalisés : afficher les données.
Objet Cart : où se trouve metadata sur une ligne.

Prise en main

Page d'accueil

Bonnes pratiques

Ventes incitatives post-achat

Panier

Ventes incitatives au paiement (Shopify Plus)

Page de remerciement

Ventes incitatives sur la page produit

Rokt Thanks

Stratégies

Analyses et suivi

Intégrations

Aftersell MCP

Facturation et compte

Dépannage

Afficher les données de metafields sur les lignes du panier

Enregistrer l’enrichisseur

Lire les données

L’afficher dans le panier

Données au niveau de la variante

Plus que des metafields

Points à ne pas manquer

Où aller ensuite

​Enregistrer l’enrichisseur

​Lire les données

​L’afficher dans le panier

​Données au niveau de la variante

​Plus que des metafields

​Points à ne pas manquer

​Où aller ensuite

Enregistrer l’enrichisseur

Lire les données

L’afficher dans le panier

Données au niveau de la variante

Plus que des metafields

Points à ne pas manquer

Où aller ensuite