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.
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:
Die vier Setter, die auf einer Position verfügbar sind:
Ein Comparator hat dieselbe Form, die Array.prototype.sort erwartet, und läuft nach dem Ausblenden und Umbenennen:
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:
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.
- 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.
- Hooks: die vollständige Hook-Referenz.
- Cart-Objekt: jedes Feld, auf das du verzweigen kannst.
- Custom CSS: die
cart-external-*-Klassenkonvention.