Winkelwagenregels verbergen en herlabelen

Verberg regels die de shopper niet hoort te zien, hernoem regels die slecht leesbaar zijn en bepaal de volgorde waarin alles rendert, allemaal zonder aan te raken wat er daadwerkelijk in de winkelwagen zit. Dit vervangt het oudere patroon van winkelwagen-elementen verbergen met CSS of style.display = 'none'. Een line transform wordt bij elke render van de winkelwagen toegepast, dus hij overleeft updates, re-renders en het opnieuw openen van de drawer.

Een regel verbergen

// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Verbergen is niet verwijderen. Een verborgen regel blijft in de winkelwagen van de shopper, blijft in het totaal en gaat door naar de checkout; hij wordt alleen niet getekend in de drawer. Hij valt wel weg uit getCart().items en itemCount, dus je eigen code ziet hem ook niet meer. Wil je hem echt weg hebben, gebruik dan removeItem.

Veelvoorkomende dingen die het verbergen waard zijn:

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Een regel herlabelen

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});

De vier setters die op een regel beschikbaar zijn:

Setter	Effect
`setHidden(bool)`	Verberg de regel in de drawer.
`setTitle(string)`	Wijzig de weergegeven titel.
`setVariantTitle(string \| null)`	Wijzig het weergegeven variantlabel. `null` verwijdert het.
`setInternalProperties(obj)`	Voeg render-only properties samen, voor een Custom code block om te lezen. Wordt nooit naar Shopify gepersisteerd.

De volgorde bepalen

Een comparator heeft dezelfde vorm als Array.prototype.sort verwacht, en draait na verbergen en hernoemen:

// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});

// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});

Geef 0 terug voor paren waar je niet om geeft. Comparators componeren als tie-breakers, dus de eerste die een waarde ongelijk aan nul teruggeeft, beslist dat paar, en 0 teruggeven geeft de beslissing door aan de volgende in plaats van er een volgorde aan op te leggen.

Een heel block verbergen, geen regel

Een line transform werkt op winkelwagenregels. Om verschillende block-instellingen per land, markt of valuta te tonen (bijvoorbeeld verschillende Rewards-niveaus), gebruik je voorwaarden in de cart editor. Geen code nodig, en het overleeft herontwerpen van de winkelwagen. Winkelwagentotaal en winkelwageninhoud zijn geen editor-voorwaardetypes. Grijp naar de SDK wanneer je regel iets is wat voorwaarden niet kunnen uitdrukken (product-ID’s in de winkelwagen, een aangepast totaal, enzovoort). Bevraag in dat geval de shadow root op een publieke cart-external-*-class:

window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});

Dit draait na elke render, dus het block kan even in beeld flitsen voordat je code het verbergt. Conditionele rendering heeft dat probleem niet, dus geef daar de voorkeur aan waar het past.

Dingen om goed te doen

Transforms zijn set-up-aanroepen. Registreer ze bovenaan je Initialization-script; geen ready() nodig.
De transforms van iedereen draaien. De jouwe componeert met transforms die door andere apps zijn geregistreerd. Je kunt die van hen niet vervangen, en zij kunnen die van jou niet laten vallen.
Een transform kan prijs, aantal of identiteit niet wijzigen. Hij wijzigt alleen wat er gerenderd wordt. Gebruik de actions voor echte wijzigingen.
Een transform die een fout gooit wordt stilzwijgend overgeslagen. De rest draait nog steeds. Controleer aftersellCartDebugEvents tijdens het ontwikkelen.
registerLineTransform geeft een unregister-functie terug, mocht je het later ongedaan willen maken.

Waar je verder kunt kijken

Hooks: de volledige hook-referentie.
Cart object: elk veld waarop je kunt vertakken.
Custom CSS: de cart-external-*-classconventie.

Aan de slag

Startpagina

Best practices

Post-purchase upsells

Aftersell-winkelwagen

Checkout-upsells (Shopify Plus)

Bedankpagina

Upsells op de productpagina

Rokt Thanks

Strategieën

Analytics en tracking

Integraties

Aftersell MCP

Facturering en account

Probleemoplossing

Winkelwagenregels verbergen en herlabelen

Een regel verbergen

Een regel herlabelen

De volgorde bepalen

Een heel block verbergen, geen regel

Dingen om goed te doen

Waar je verder kunt kijken

​Een regel verbergen

​Een regel herlabelen

​De volgorde bepalen

​Een heel block verbergen, geen regel

​Dingen om goed te doen

​Waar je verder kunt kijken

Een regel verbergen

Een regel herlabelen

De volgorde bepalen

Een heel block verbergen, geen regel

Dingen om goed te doen

Waar je verder kunt kijken