Vis metafield-data på kurvlinjer

Kurven ved, hvad Shopifys Ajax API fortæller den: titler, priser, antal, properties. Den kender ikke dine metafields. En cart enricher henter ekstra produkt- eller variantfelter fra Storefront API’et og vedhæfter dem til hver matchende linje, så du kan vise et leveringsestimat, en “sendes separat”-advarsel, en ingrediensliste eller alt andet, du gemmer på produktet. Typiske anvendelser: leveringsvinduer pr. produkt, allergen- eller ingrediensbadges, et custom “lav lagerbeholdning”-flag, multiplikatorer for loyalitetspoint, priser kun for abonnenter.

Registrér enricheren

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

Tre felter:

Felt	Beskrivelse
`id`	Namespace for resultatet; det lander på `line.metadata[id]`. Skal være unikt; en anden registrering med samme `id` ignoreres.
`onType`	`'Product'` eller `'ProductVariant'`. Også join-nøglen, altså produkt-ID vs. variant-ID.
`fragment`	En GraphQL-feltudvælgelse (uden ydre klammer), der splejses ind i Storefront-forespørgslen. Klammer skal balancere.

Hver gang kurven indlæses eller ændres, henter Aftersell dit fragment for hvert produkt eller variant i kurven. Hentningen er ikke-blokerende: kurven renderes med det samme og gen-udsender cart_updated, når dataene lander. Et langsomt eller fejlende fragment forsinker eller ødelægger aldrig kurven.

Læs dataene

Fordi berigelse er asynkron, er line.metadata.delivery undefined, indtil den første hentning resolves. Beskyt altid læsningen.

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

Render det i kurven

Berigelse lægger dataene på linjen; en Custom code-blok i React-tilstand tegner det. Tilføj blokken som en Cart items-underblok, så den renderes én gang pr. linje og modtager den linje som 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>
  );
}

Berigede værdier kommer tilbage fra Storefront API’et som de er og usaniterede. Render dem som tekst, som ovenfor, og aldrig med dangerouslySetInnerHTML eller ved at skrive rå HTML.

Data på variantniveau

Sæt onType: 'ProductVariant', når metafieldet ligger på varianten frem for produktet:

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

Mere end metafields

Fragmentet splejses ind i en Storefront API-forespørgsel, så alt, API’et eksponerer på et Product eller ProductVariant, virker, ikke kun 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');
  });
});

Ting du skal have styr på

Beskyt hver læsning. metadata er som standard {}, og dit namespace er undefined, indtil hentningen resolves. Kurven renderes, før dataene ankommer, altid.
Hvert id er sit eget namespace. Flere enrichers sameksisterer uden at kollidere, inklusive dem registreret af andre apps.
Metafields skal være Storefront-synlige. Et metafield, der ikke er eksponeret for Storefront API’et, returnerer null. Tjek definitionen i Shopify admin, hvis du intet får tilbage.
Hold fragmentet lille. Det kører for hvert produkt i kurven, ved hver kurvændring. Bed om de felter, du bruger, ikke alt.
Registrér på opsætningstidspunktet. Det er en hook, så den hører hjemme øverst i dit Initialization-script.
Klammer skal balancere. Ingen ydre klammer omkring fragmentet, men enhver indlejret udvælgelse skal have sit eget matchende par. Et ubalanceret fragment afvises.

Hvor du kan gå hen herfra

registerCartEnricher: den fulde hook-reference.
Custom code-blokke: rendering af dataene.
Cart-objektet: hvor metadata sidder på en linje.

Kom godt i gang

Startside

Bedste praksis

Mersalg efter køb

Kurv

Mersalg ved checkout (Shopify Plus)

Takkeside

Mersalg på produktsiden

Rokt Thanks

Strategier

Analyser og sporing

Integrationer

Aftersell MCP

Fakturering og konto

Fejlfinding

Registrér enricheren

Læs dataene

Render det i kurven

Data på variantniveau

Mere end metafields

Ting du skal have styr på

Hvor du kan gå hen herfra

​Registrér enricheren

​Læs dataene

​Render det i kurven

​Data på variantniveau

​Mere end metafields

​Ting du skal have styr på

​Hvor du kan gå hen herfra

Registrér enricheren

Læs dataene

Render det i kurven

Data på variantniveau

Mere end metafields

Ting du skal have styr på

Hvor du kan gå hen herfra