Metafield-data op winkelwagenregels tonen

De winkelwagen weet wat de Ajax API van Shopify hem vertelt: titels, prijzen, aantallen, properties. Hij kent je metafields niet. Een cart enricher haalt extra product- of variantvelden op uit de Storefront API en koppelt ze aan elke overeenkomende regel, zodat je een leverindicatie, een “wordt apart verzonden”-waarschuwing, een ingrediëntenlijst of wat je ook maar op het product opslaat kunt tonen. Typische toepassingen: levervensters per product, allergenen- of ingrediëntenbadges, een aangepaste “bijna uitverkocht”-vlag, loyaliteitspuntenvermenigvuldigers, prijzen alleen voor abonnees.

De enricher registreren

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

Drie velden:

Veld	Beschrijving
`id`	Namespace voor het resultaat; het komt terecht op `line.metadata[id]`. Moet uniek zijn; een tweede registratie met hetzelfde `id` wordt genegeerd.
`onType`	`'Product'` of `'ProductVariant'`. Ook de join-key, dus product-ID vs. variant-ID.
`fragment`	Een GraphQL-veldselectie (zonder buitenste accolades) die in de Storefront-query wordt gesplitst. Accolades moeten in balans zijn.

Telkens wanneer de winkelwagen laadt of verandert, haalt Aftersell je fragment op voor elk product of elke variant in de winkelwagen. De fetch is non-blocking: de winkelwagen rendert onmiddellijk en zendt cart_updated opnieuw uit zodra de data binnenkomt. Een traag of falend fragment vertraagt of breekt de winkelwagen nooit.

De data lezen

Omdat enrichment asynchroon is, is line.metadata.delivery undefined totdat de eerste fetch resolvet. Bescherm de leesactie altijd met een guard.

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

Het in de winkelwagen renderen

Enrichment zet de data op de regel; een Custom code block in React-modus tekent het. Voeg het block toe als een Cart items sub-block zodat het één keer per regel rendert en die regel ontvangt als 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>
  );
}

Verrijkte waarden komen as-is en ongesanitized terug uit de Storefront API. Render ze als tekst, zoals hierboven, en nooit met dangerouslySetInnerHTML of door rauwe HTML te schrijven.

Data op variantniveau

Stel onType: 'ProductVariant' in wanneer het metafield op de variant staat in plaats van op het product:

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

Meer dan metafields

Het fragment wordt in een Storefront API-query gesplitst, dus alles wat de API op een Product of ProductVariant beschikbaar stelt werkt, niet alleen 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');
  });
});

Dingen om goed te doen

Bescherm elke leesactie. metadata is standaard {} en je namespace is undefined totdat de fetch resolvet. De winkelwagen rendert altijd voordat de data arriveert.
Elk id is zijn eigen namespace. Meerdere enrichers bestaan naast elkaar zonder te botsen, inclusief die door andere apps zijn geregistreerd.
Metafields moeten Storefront-zichtbaar zijn. Een metafield dat niet aan de Storefront API is blootgesteld, geeft null terug. Controleer de definitie in de Shopify admin als je niets terugkrijgt.
Houd het fragment klein. Het draait voor elk product in de winkelwagen, bij elke winkelwagenwijziging. Vraag om de velden die je gebruikt, niet om alles.
Registreer op set-up-tijd. Het is een hook, dus hij hoort bovenaan je Initialization-script.
Accolades moeten in balans zijn. Geen buitenste accolades rond het fragment, maar elke geneste selectie heeft zijn eigen bijpassende paar nodig. Een ongebalanceerd fragment wordt geweigerd.

Waar je verder kunt kijken

registerCartEnricher: de volledige hook-referentie.
Custom code blocks: de data renderen.
Cart object: waar metadata op een regel staat.

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Winkelwagen

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Metafield-data op winkelwagenregels tonen

De enricher registreren

De data lezen

Het in de winkelwagen renderen

Data op variantniveau

Meer dan metafields

Dingen om goed te doen

Waar je verder kunt kijken

​De enricher registreren

​De data lezen

​Het in de winkelwagen renderen

​Data op variantniveau

​Meer dan metafields

​Dingen om goed te doen

​Waar je verder kunt kijken

De enricher registreren

De data lezen

Het in de winkelwagen renderen

Data op variantniveau

Meer dan metafields

Dingen om goed te doen

Waar je verder kunt kijken