Metafield-Daten auf Warenkorbzeilen anzeigen

Der Warenkorb weiß, was Shopifys Ajax API ihm mitteilt: Titel, Preise, Mengen, Eigenschaften. Deine Metafields kennt er nicht. Ein Cart Enricher ruft zusätzliche Produkt- oder Variantenfelder aus der Storefront API ab und hängt sie an jede passende Zeile an, damit du eine Lieferzeitschätzung, einen Hinweis „wird separat versendet“, eine Zutatenliste oder alles andere anzeigen kannst, was du am Produkt speicherst. Typische Einsatzzwecke: produktspezifische Lieferfenster, Allergen- oder Zutaten-Badges, ein eigenes „Geringer Bestand“-Kennzeichen, Multiplikatoren für Treuepunkte, Preise nur für Abonnenten.

Registriere den Enricher

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

Drei Felder:

Feld	Beschreibung
`id`	Namespace für das Ergebnis; es landet unter `line.metadata[id]`. Muss eindeutig sein; eine zweite Registrierung mit derselben `id` wird ignoriert.
`onType`	`'Product'` oder `'ProductVariant'`. Zugleich der Join-Schlüssel, also Produkt-ID vs. Varianten-ID.
`fragment`	Eine GraphQL-Feldauswahl (ohne äußere geschweifte Klammern), die in die Storefront-Abfrage eingefügt wird. Klammern müssen ausgeglichen sein.

Immer wenn der Warenkorb lädt oder sich ändert, ruft Aftersell dein Fragment für jedes Produkt bzw. jede Variante im Warenkorb ab. Der Abruf ist nicht blockierend: Der Warenkorb rendert sofort und sendet cart_updated erneut, sobald die Daten eintreffen. Ein langsames oder fehlschlagendes Fragment verzögert oder beschädigt den Warenkorb nie.

Lies die Daten

Da die Anreicherung asynchron erfolgt, ist line.metadata.delivery so lange undefined, bis der erste Abruf abgeschlossen ist. Sichere den Lesezugriff immer ab.

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

Rendere sie im Warenkorb

Die Anreicherung legt die Daten auf die Zeile; ein Custom-Code-Block im React-Modus zeichnet sie. Füge den Block als Sub-Block von Cart items hinzu, damit er einmal pro Zeile rendert und diese Zeile als props.line erhält:

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

Angereicherte Werte kommen unverändert und unbereinigt von der Storefront API zurück. Rendere sie wie oben als Text und niemals mit dangerouslySetInnerHTML oder durch das Schreiben von rohem HTML.

Daten auf Variantenebene

Setze onType: 'ProductVariant', wenn das Metafield an der Variante statt am Produkt hängt:

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

Mehr als Metafields

Das Fragment wird in eine Storefront-API-Abfrage eingefügt, daher funktioniert alles, was die API auf einem Product oder ProductVariant bereitstellt, nicht nur 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');
  });
});

Worauf du achten solltest

Sichere jeden Lesezugriff ab. metadata ist standardmäßig {}, und dein Namespace ist undefined, bis der Abruf abgeschlossen ist. Der Warenkorb rendert immer, bevor die Daten eintreffen.
Jede id ist ihr eigener Namespace. Mehrere Enricher koexistieren ohne Kollisionen, auch solche, die von anderen Apps registriert wurden.
Metafields müssen für die Storefront sichtbar sein. Ein Metafield, das nicht für die Storefront API freigegeben ist, gibt null zurück. Prüfe die Definition im Shopify-Adminbereich, wenn du nichts zurückbekommst.
Halte das Fragment klein. Es läuft für jedes Produkt im Warenkorb, bei jeder Warenkorbänderung. Frage die Felder ab, die du verwendest, nicht alles.
Registriere zur Einrichtungszeit. Es ist ein Hook, er gehört also an den Anfang deines Initialisierungsskripts.
Klammern müssen ausgeglichen sein. Keine äußeren geschweiften Klammern um das Fragment, aber jede verschachtelte Auswahl braucht ihr eigenes passendes Paar. Ein unausgeglichenes Fragment wird abgelehnt.

Nächste Schritte

registerCartEnricher: die vollständige Hook-Referenz.
Custom-Code-Blöcke: das Rendern der Daten.
Cart-Objekt: wo metadata auf einer Zeile liegt.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Metafield-Daten auf Warenkorbzeilen anzeigen

Registriere den Enricher

Lies die Daten

Rendere sie im Warenkorb

Daten auf Variantenebene

Mehr als Metafields

Worauf du achten solltest

Nächste Schritte

​Registriere den Enricher

​Lies die Daten

​Rendere sie im Warenkorb

​Daten auf Variantenebene

​Mehr als Metafields

​Worauf du achten solltest

​Nächste Schritte

Registriere den Enricher

Lies die Daten

Rendere sie im Warenkorb

Daten auf Variantenebene

Mehr als Metafields

Worauf du achten solltest

Nächste Schritte