Gruppér bundle-linjer fra en anden app

De fleste bundle-apps bygger en bundle ved at tilføje hver komponent som sin egen kurvlinje og derefter kæde dem sammen med line item properties af eget design. Shopifys Ajax API leverer de linjer til kurven uden nogen indikation af, at de hører sammen, så som standard viser skuffen en tredelt bundle som tre urelaterede varer, hver med sin egen pris og antalsvælger. setInternalProperties er måden, du fortæller kurven, at de er én ting.

Sådan fungerer gruppering

Kurven grupperer linjer på to kanoniske properties. Den kender ikke din bundle-apps property-navne, så du oversætter: læs hvad appen skrev, og stempl det kanoniske par på hver linje med en line transform.

Property	Påkrævet	Værdi
`_aftersell_cart_bundle_id`	Ja	Et delt ID. Hver linje med samme ID er én bundle.
`_aftersell_cart_bundle_role`	Nej	Sæt til `parent` på den linje, bundlen skal vises som.

Disse går gennem setInternalProperties, ikke gennem Shopify. De er et render-only overlay: de når aldrig properties, gemmes aldrig i Shopify og vises aldrig på ordren.

Trin 1: find ud af, hvad din app skriver

Hver bundle-app navngiver sine properties forskelligt, så start med at kigge på en rigtig kurv. Tilføj en bundle på din storefront, og kør så dette i browserkonsollen:

window.aftersell.cart.actions.getCart().items.forEach((line) => {
  console.log(line.title, line.properties);
});

Du leder efter en property, der deles på tværs af bundlens linjer. Det er normalt en skjult property (navnet starter med _), som indeholder et ID, en reference eller bundlens navn. Noget som _bundle_id, _bundle_ref eller _parent_id er typisk. Notér den præcise nøgle, og om én linje er markeret som hovedproduktet.

Trin 2: map det til de kanoniske properties

Indsæt i Cart settings → Custom script → Initialization, og erstat property-navnene med dem, du fandt:

window.aftersell.cart.hooks.registerLineTransform((line) => {
  const props = line.properties;
  if (!props) return;

  const bundleId = props._bundle_id;
  if (!bundleId) return;

  line.setInternalProperties({
    _aftersell_cart_bundle_id: bundleId,
    // Mark the main product so the bundle renders under it.
    _aftersell_cart_bundle_role: props._bundle_role === 'main' ? 'parent' : 'child',
  });
});

Det er hele integrationen. Så snart to eller flere linjer deler et ID, folder kurven dem sammen til én bundle.

Hvis din app ikke markerer et hovedprodukt, så udelad _aftersell_cart_bundle_role helt. Kurven vælger et anker for dig.

Hvad du får

Når linjerne er grupperet, bærer ankerlinjen et bundle-objekt, og skuffen renderer bundlen som en enkelt vare:

Børn indlejres under ankeret i stedet for at vises som separate rækker.
Antal er atomart. Ændres bundlens antal, skaleres hvert medlem sammen, ved brug af hvert barns perAnchorQty-ratio, så en bundle med to af én komponent bevarer det to-til-en-forhold.
Fjernelse er atomar. Fjernes bundlen, fjernes hver medlemslinje i én forespørgsel, i stedet for at efterlade forældreløse komponenter.
Én prisrække. Hvad den viser, følger bundle price-indstillingen på Cart items-blokken: totalen for alle medlemmer eller hovedproduktets pris alene.

Sådan vælges ankeret

Ankeret er den linje, bundlen vises som. Kurven vælger det i denne rækkefølge:

Linjen med _aftersell_cart_bundle_role sat til parent.
Ellers medlemmet med den højeste pris.
Ellers det første medlem i kurven.

Pris-fallbacken er normalt rigtig, da bundle-apps typisk lægger rabatten på hovedproduktet. Sæt rollen eksplicit, når den ikke er det, for eksempel når hovedproduktet er den billigste vare eller er gratis.

Regler, der er værd at kende

En bundle kræver mindst to linjer. En enkelt linje med et bundle-ID lades i fred og renderes normalt.
Shopifys native bundles er allerede håndteret. Linjer, som Shopify selv markerer som komponentiserede, springes over af denne gruppering og tilpasses automatisk. Du har kun brug for dette til apps, der tilføjer separate linjer.
Transformen kører ved hver render. Hold den billig og fri for bivirkninger. Kald ikke actions og lav ikke fetch inde fra den.
Fletning er additiv. Dine properties flettes med dem, der er sat af en anden transform. Ved en ægte konflikt om samme nøgle vinder den sidst registrerede transform.
Gruppering kører efter skjul og omdøbning, og før sortering. Så en linje, du skjuler med setHidden, bliver aldrig del af en bundle, og en comparator ser ankeret, ikke børnene.

Grupperede børn forlader state.items. Når linjer er foldet ind i en bundle, vises kun ankeret i getCart().items og i event-payloads; børnene flytter til anchor.bundle.children. De tæller heller ikke længere med i itemCount.Kurvtotalen påvirkes ikke, fordi totaler kommer direkte fra Shopify. Gruppering ændrer præsentationen, aldrig hvad kunden betaler.

Læs en bundle tilbage

window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    if (!line.bundle) return;
    console.log(line.title, 'is a bundle of', line.bundle.children.length, 'items:');
    line.bundle.children.forEach((child) => {
      console.log('  ', child.quantity, 'x', child.title);
    });
  });
});

For at handle på en bundles linjer skal du bruge bundle.memberKeys, som indeholder key for hvert medlem inklusive ankeret.

Brug det til andre ting

Bundle-gruppering er det, setInternalProperties blev bygget til, men overlayet er en generel kanal for render-only data, du udleder af en linje. Alt, du lægger der, kan læses på line.internalProperties og i en Custom code-blok, uden at røre den rigtige kurv:

window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.properties?._preorder_ship_date) {
    line.setInternalProperties({ _badge: `Ships ${line.properties._preorder_ship_date}` });
  }
});

Brug det, når værdien er udledt og kun til visning. Hvis dataene skal overleve til ordren, hører de hjemme i en rigtig line item property, sat med et skjult properties[...]-input på produktformularen, så den når Shopify, uanset hvem der udfører tilføjelsen.

Hvor du kan gå hen herfra

registerLineTransform: hooken dette kører igennem.
Cart-objektet: formen på bundle og dens børn.
Cart items-blokken: bundle price-indstillingen.

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

Gruppér bundle-linjer fra en anden app

Sådan fungerer gruppering

Trin 1: find ud af, hvad din app skriver

Trin 2: map det til de kanoniske properties

Hvad du får

Sådan vælges ankeret

Regler, der er værd at kende

Læs en bundle tilbage

Brug det til andre ting

Hvor du kan gå hen herfra

​Sådan fungerer gruppering

​Trin 1: find ud af, hvad din app skriver

​Trin 2: map det til de kanoniske properties

​Hvad du får

​Sådan vælges ankeret

​Regler, der er værd at kende

​Læs en bundle tilbage

​Brug det til andre ting

​Hvor du kan gå hen herfra

Sådan fungerer gruppering

Trin 1: find ud af, hvad din app skriver

Trin 2: map det til de kanoniske properties

Hvad du får

Sådan vælges ankeret

Regler, der er værd at kende

Læs en bundle tilbage

Brug det til andre ting

Hvor du kan gå hen herfra