Warenkorbpositionen ausblenden und umbenennen

Blende Positionen aus, die der Käufer nicht sehen soll, benenne schlecht lesbare Positionen um und steuere die Reihenfolge, in der alles gerendert wird — ohne den tatsächlichen Warenkorbinhalt anzufassen. Das ersetzt das ältere Muster, Warenkorbelemente mit CSS oder style.display = 'none' zu verstecken. Eine Line-Transform wird bei jedem Rendern des Warenkorbs angewendet, sie überlebt also Updates, Re-Renders und das erneute Öffnen des Drawers.

Eine Position ausblenden

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

Ausblenden ist nicht Entfernen. Eine ausgeblendete Position bleibt im Warenkorb des Käufers, bleibt in der Summe und geht mit in den Checkout; sie wird nur nicht im Drawer gezeichnet. Sie verschwindet allerdings aus getCart().items und itemCount, sodass auch dein eigener Code sie nicht mehr sieht. Wenn sie wirklich weg sein soll, nutze removeItem.

Typische Kandidaten fürs Ausblenden:

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

Eine Position umbenennen

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

Die vier Setter, die auf einer Position verfügbar sind:

Setter	Wirkung
`setHidden(bool)`	Blendet die Position im Drawer aus.
`setTitle(string)`	Ändert den angezeigten Titel.
`setVariantTitle(string \| null)`	Ändert das angezeigte Varianten-Label. `null` entfernt es.
`setInternalProperties(obj)`	Merged rein anzeigebezogene Properties, die ein Custom-Code-Block lesen kann. Werden nie in Shopify gespeichert.

Die Reihenfolge steuern

Ein Comparator hat dieselbe Form, die Array.prototype.sort erwartet, und läuft nach dem Ausblenden und Umbenennen:

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

Gib 0 für Paare zurück, die dich nicht interessieren. Comparators werden als Tie-Breaker verkettet: Der erste, der einen Wert ungleich null zurückgibt, entscheidet dieses Paar, und 0 reicht die Entscheidung an den nächsten weiter, statt eine Reihenfolge zu erzwingen.

Einen ganzen Block ausblenden, nicht eine Position

Eine Line-Transform arbeitet auf Warenkorbpositionen. Um unterschiedliche Block-Einstellungen je nach Land, Markt oder Währung anzuzeigen (zum Beispiel unterschiedliche Rewards-Stufen), nutze Conditions im Cart Editor. Kein Code nötig, und es überlebt Cart-Redesigns. Warenkorbsumme und Warenkorbinhalt sind keine Editor-Condition-Typen. Greif zum SDK, wenn deine Regel etwas ist, das Conditions nicht abbilden können (Produkt-IDs im Warenkorb, eine eigene Summe und so weiter). In dem Fall fragst du im Shadow Root nach einer öffentlichen cart-external-*-Klasse:

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

Das läuft nach jedem Render, der Block kann also kurz aufblitzen, bevor dein Code ihn ausblendet. Konditionales Rendering hat dieses Problem nicht, bevorzuge es also, wo immer es passt.

Worauf du achten musst

Transforms sind Setup-Aufrufe. Registriere sie ganz oben in deinem Initialization-Script; kein ready() nötig.
Alle Transforms laufen. Deine wird mit denen anderer Apps verkettet. Du kannst deren Transforms nicht ersetzen, und sie können deine nicht entfernen.
Eine Transform kann Preis, Menge oder Identität nicht ändern. Sie ändert nur, was gerendert wird. Nutze die Actions für echte Änderungen.
Eine Transform, die einen Fehler wirft, wird stillschweigend übersprungen. Die übrigen laufen weiter. Prüfe während der Entwicklung aftersellCartDebugEvents.
registerLineTransform gibt eine Unregister-Funktion zurück, falls du sie später rückgängig machen musst.

Nächste Schritte

Hooks: die vollständige Hook-Referenz.
Cart-Objekt: jedes Feld, auf das du verzweigen kannst.
Custom CSS: die cart-external-*-Klassenkonvention.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Aftersell-Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Warenkorbpositionen ausblenden und umbenennen

Eine Position ausblenden

Eine Position umbenennen

Die Reihenfolge steuern

Einen ganzen Block ausblenden, nicht eine Position

Worauf du achten musst

Nächste Schritte

​Eine Position ausblenden

​Eine Position umbenennen

​Die Reihenfolge steuern

​Einen ganzen Block ausblenden, nicht eine Position

​Worauf du achten musst

​Nächste Schritte

Eine Position ausblenden

Eine Position umbenennen

Die Reihenfolge steuern

Einen ganzen Block ausblenden, nicht eine Position

Worauf du achten musst

Nächste Schritte