Bundelregels van een andere app groeperen

De meeste bundel-apps bouwen een bundel door elk onderdeel als een eigen winkelwagenregel toe te voegen, en ze vervolgens te koppelen met line item properties van hun eigen ontwerp. De Ajax API van Shopify geeft die regels aan de winkelwagen zonder enige aanwijzing dat ze bij elkaar horen, dus standaard toont de drawer een driedelige bundel als drie losse items, elk met een eigen prijs en aantal-stepper. Met setInternalProperties vertel je de winkelwagen dat ze één geheel zijn.

Hoe groeperen werkt

De winkelwagen groepeert regels op twee canonieke properties. Hij kent de property-namen van jouw bundel-app niet, dus jij vertaalt: lees wat de app heeft geschreven, en stempel het canonieke paar op elke regel met een line transform.

Property	Vereist	Waarde
`_aftersell_cart_bundle_id`	Ja	Een gedeeld ID. Elke regel met hetzelfde ID vormt één bundel.
`_aftersell_cart_bundle_role`	Nee	Zet op `parent` op de regel waaronder de bundel moet worden weergegeven.

Deze gaan via setInternalProperties, niet via Shopify. Ze zijn een render-only overlay: ze bereiken nooit properties, worden nooit naar Shopify gepersisteerd en verschijnen nooit op de bestelling.

Stap 1: ontdek wat je app schrijft

Elke bundel-app benoemt zijn properties anders, dus begin met kijken naar een echte winkelwagen. Voeg een bundel toe op je storefront en voer dit dan uit in de browserconsole:

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

Je zoekt een property die gedeeld wordt over de regels van de bundel. Het is meestal een verborgen property (de naam begint met _) met een ID, een referentie of de naam van de bundel. Iets als _bundle_id, _bundle_ref of _parent_id is typisch. Noteer de exacte key, en of één regel gemarkeerd is als het hoofdproduct.

Stap 2: map het op de canonieke properties

Plak in Cart settings → Custom script → Initialization, en vervang de property-namen door de namen die je hebt gevonden:

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

Dat is de hele integratie. Zodra twee of meer regels een ID delen, vouwt de winkelwagen ze samen tot één bundel.

Als je app geen hoofdproduct markeert, laat _aftersell_cart_bundle_role dan helemaal weg. De winkelwagen kiest een anker voor je.

Wat je krijgt

Zodra regels zijn gegroepeerd, draagt de ankerregel een bundle-object en rendert de drawer de bundel als één item:

Kinderen nesten onder het anker in plaats van als aparte rijen te verschijnen.
Aantal is atomair. Het aantal van de bundel wijzigen schaalt elk lid mee, met de perAnchorQty-verhouding van elk kind, zodat een bundel met twee van één onderdeel die twee-op-één-verhouding behoudt.
Verwijderen is atomair. De bundel verwijderen verwijdert elke lidregel in één request, in plaats van verweesde onderdelen achter te laten.
Eén prijsregel. Wat er wordt getoond volgt de bundle price-instelling op het Cart items-block: het totaal van alle leden, of alleen de prijs van het hoofdproduct.

Hoe het anker wordt gekozen

Het anker is de regel waaronder de bundel wordt weergegeven. De winkelwagen kiest hem in deze volgorde:

De regel met _aftersell_cart_bundle_role op parent.
Anders, het lid met de hoogste prijs.
Anders, het eerste lid in de winkelwagen.

De prijs-fallback klopt meestal, aangezien bundel-apps de korting doorgaans op het hoofdproduct zetten. Stel de rol expliciet in wanneer dat niet zo is, bijvoorbeeld wanneer het hoofdproduct het goedkoopste item is of gratis is.

Regels die je moet kennen

Een bundel heeft minimaal twee regels nodig. Een enkele regel met een bundel-ID wordt met rust gelaten en rendert normaal.
Native Shopify-bundels worden al afgehandeld. Regels die Shopify zelf als gecomponentiseerd markeert, worden door deze groepering overgeslagen en automatisch aangepast. Je hebt dit alleen nodig voor apps die losse regels toevoegen.
De transform draait bij elke render. Houd hem goedkoop en vrij van neveneffecten. Roep er geen actions in aan en doe er geen fetch in.
Samenvoegen is additief. Jouw properties worden samengevoegd met properties die door een andere transform zijn gezet. Bij een echt conflict over dezelfde key wint de laatst geregistreerde transform.
Groeperen draait na verbergen en hernoemen, en vóór sorteren. Dus een regel die je verbergt met setHidden wordt nooit onderdeel van een bundel, en een comparator ziet het anker, niet de kinderen.

Gegroepeerde kinderen verlaten state.items. Zodra regels in een bundel zijn samengevouwen, verschijnt alleen het anker in getCart().items en in event payloads; de kinderen verhuizen naar anchor.bundle.children. Ze tellen ook niet meer mee voor itemCount.Het winkelwagentotaal blijft onaangetast, omdat totalen rechtstreeks van Shopify komen. Groeperen wijzigt de presentatie, nooit wat de shopper betaalt.

Een bundel teruglezen

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

Om op de regels van een bundel te handelen, gebruik je bundle.memberKeys, dat de key van elk lid inclusief het anker bevat.

Het voor andere dingen gebruiken

Bundelgroepering is waarvoor setInternalProperties is gebouwd, maar de overlay is een algemeen kanaal voor render-only data die je afleidt uit een regel. Alles wat je erin zet is leesbaar op line.internalProperties en in een Custom code block, zonder de echte winkelwagen aan te raken:

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

Gebruik het wanneer de waarde afgeleid en alleen voor weergave is. Als de data de bestelling moet halen, hoort ze in een echte line item property, gezet met een verborgen properties[...]-input op het productformulier, zodat ze Shopify bereikt wie de toevoeging ook uitvoert.

Waar je verder kunt kijken

registerLineTransform: de hook waar dit doorheen loopt.
Cart object: de vorm van bundle en zijn kinderen.
Cart items block: de bundle price-instelling.

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

Bundelregels van een andere app groeperen

Hoe groeperen werkt

Stap 1: ontdek wat je app schrijft

Stap 2: map het op de canonieke properties

Wat je krijgt

Hoe het anker wordt gekozen

Regels die je moet kennen

Een bundel teruglezen

Het voor andere dingen gebruiken

Waar je verder kunt kijken

​Hoe groeperen werkt

​Stap 1: ontdek wat je app schrijft

​Stap 2: map het op de canonieke properties

​Wat je krijgt

​Hoe het anker wordt gekozen

​Regels die je moet kennen

​Een bundel teruglezen

​Het voor andere dingen gebruiken

​Waar je verder kunt kijken

Hoe groeperen werkt

Stap 1: ontdek wat je app schrijft

Stap 2: map het op de canonieke properties

Wat je krijgt

Hoe het anker wordt gekozen

Regels die je moet kennen

Een bundel teruglezen

Het voor andere dingen gebruiken

Waar je verder kunt kijken