Actions

Actions lesen und ändern den Warenkorb. Sie liegen unter window.aftersell.cart.actions.

Actions laufen, nachdem der Warenkorb bereit ist — innerhalb von ready() oder eines Event-Handlers.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});

Bevor der Warenkorb lädt, sind Actions Stubs. Jede protokolliert eine Konsolenwarnung mit dem Namen der Action, zum Beispiel cart.actions.addItem() called before the cart loaded, und tut nichts. Die asynchronen Actions lösen trotzdem ein Promise auf, sodass eine .then()-Kette normal läuft, statt zu werfen; getCart() gibt null zurück und formatMoney() einen leeren String.Nichts geht kaputt, wenn du eine zu früh aufrufst, aber es passiert auch nichts. Achte auf diese Warnung in der Konsole, wenn eine Action scheinbar nichts tut.

Jede Action

Action	Signatur	Rückgabe	Was sie tut
`open`	`open()`	Keine	Öffnet den Drawer.
`close`	`close()`	Keine	Schließt den Drawer.
`getCart`	`getCart()`	`AftersellCart \| null`	Liest den aktuellen Warenkorb.
`formatMoney`	`formatMoney(cents)`	`string`	Formatiert einen Betrag zur Anzeige.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Fügt eine Variante hinzu.
`removeItem`	`removeItem(key)`	`Promise`	Entfernt eine Zeile.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Setzt die Menge einer Zeile.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Tauscht die Variante einer Zeile.
`refresh`	`refresh()`	`Promise`	Lädt den Warenkorb neu von Shopify.
`visualRefresh`	`visualRefresh()`	Keine	Rendert neu, ohne neu zu laden.

Eine Action aus einem cart_updated-Handler aufzurufen kann eine Schleife erzeugen. Lies zuerst die zwei Regeln.

Drawer

open und close

Öffnet oder schließt den Cart-Drawer. Beide sind synchron und nehmen keine Argumente.

// Open the drawer from your own cart link.
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

// Close it after the shopper does something in a custom block.
window.aftersell.cart.actions.close();

Lesen

getCart()

Gibt das aktuelle Cart-Objekt zurück, oder null, bevor es geladen wurde. Das Ergebnis ist eine Kopie, das Mutieren ändert also nicht den echten Warenkorb.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return; // the initial load failed

  console.log(state.itemCount, 'items,', state.items.length, 'lines');
  console.log('Total:', window.aftersell.cart.actions.formatMoney(state.totalPrice));
});

Da es ein Snapshot ist, halte das Ergebnis nicht fest; lies es jedes Mal neu, wenn du aktuelle Daten brauchst. In einem Event-Handler hast du den frischen Warenkorb bereits als Payload, dort ist getCart() also redundant.

formatMoney(cents)

Formatiert einen Betrag in kleinster Einheit mit dem Geldformat deines Shops. Jeder Preis im SDK ist in Cents — so machst du daraus etwas Anzeigbares.

window.aftersell.cart.actions.formatMoney(5779);  // "$57.79"
window.aftersell.cart.actions.formatMoney(0);     // "$0.00"

// Show the cart total in your own header element.
window.aftersell.cart.events.on('cart_updated', (state) => {
  document.querySelector('#header-total').textContent =
    window.aftersell.cart.actions.formatMoney(state.totalPrice);
});

Überschreibe das Format mit configure({ money_format }).

Den Warenkorb ändern

Die Item-Actions identifizieren eine Zeile über ihren Shopify-key, nicht über die Varianten-ID, weil ein Warenkorb dieselbe Variante in mehreren Zeilen mit unterschiedlichen Properties enthalten kann. Lies ihn aus getCart().items[n].key.

addItem(variantId, quantity?)

Fügt dem Warenkorb eine Variante hinzu. quantity ist standardmäßig 1. Wird aufgelöst, sobald sich der Warenkorb eingependelt hat.

// Add one, then show the shopper.
window.aftersell.cart.actions.addItem(41720671830082).then(() => {
  window.aftersell.cart.actions.open();
});

// Add a specific quantity.
window.aftersell.cart.actions.addItem(41720671830082, 3);

Das Hinzufügen einer bereits im Warenkorb vorhandenen Variante erhöht die Menge dieser Zeile, statt eine zweite Zeile zu erstellen, solange die bestehende Zeile keine Line-Item-Properties hat. Eine Zeile mit Properties ist eine eigenständige Zeile, du bekommst also eine neue.

removeItem(key)

Entfernt eine Zeile vollständig.

// Remove any free line from the cart.
const gift = window.aftersell.cart.actions
  .getCart()
  .items.find((line) => line.finalLinePrice === 0);
if (gift) window.aftersell.cart.actions.removeItem(gift.key);

updateItemQuantity(key, quantity)

Setzt die Menge einer Zeile. Die Übergabe von 0 entfernt die Zeile.

const line = window.aftersell.cart.actions.getCart().items[0];
if (line) window.aftersell.cart.actions.updateItemQuantity(line.key, 3);

// Cap a line at one unit.
window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    if (line.variantId === LIMITED_VARIANT_ID && line.quantity > 1) {
      window.aftersell.cart.actions.updateItemQuantity(line.key, 1);
    }
  });
});

Das zweite Beispiel kann sicher aus cart_updated laufen, weil die > 1-Prüfung beim zweiten Durchlauf false ist. Siehe die zwei Regeln.

replaceLineVariant(key, variantId)

Tauscht die Variante einer Zeile und behält dabei Menge und Properties. Nützlich für einen Größen- oder Geschmacks-Umschalter im Warenkorb.

const line = window.aftersell.cart.actions.getCart().items[0];
window.aftersell.cart.actions.replaceLineVariant(line.key, 41720671862850);

Der Selling Plan der Zeile wird beim Tausch zurückgesetzt. Eine Abo-Zeile wird zu einem Einmalkauf, es sei denn, du wendest einen Plan erneut an.

Der Tausch ist ein Hinzufügen gefolgt von einem Entfernen, keine Bearbeitung an Ort und Stelle — das Ergebnis ist also eine neue Zeile: Sie bekommt einen neuen key und landet am Ende des Warenkorbs. Lies getCart() danach neu, statt den übergebenen Key wiederzuverwenden.

Aktualisieren

refresh()

Lädt den Warenkorb neu von Shopify. Verwende es, nachdem etwas außerhalb des SDK den Warenkorb geändert hat und der Drawer es nicht bemerkt hat.

// After a raw Ajax API call of your own.
fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Meistens brauchst du das nicht, da Aftersell bereits auf Shopifys Standard-Warenkorb-Events lauscht und von selbst neu lädt. Greif dazu, wenn eine benutzerdefinierte Integration diese umgeht.

visualRefresh()

Führt die Render-Transformationen erneut aus, ohne den Warenkorb von Shopify neu zu laden. Du brauchst es selten: Das Registrieren (oder Deregistrieren) einer Line-Transformation, eines Comparators, eines Enrichers oder eines der beiden Subscription-Hooks löst eines für dich aus. Nur die zwei Add-to-cart-Hooks tun das nicht, da sie nichts ändern, was bereits auf dem Bildschirm ist. Greif dazu, wenn sich etwas ändert, wovon eine Transformation abhängt, der Warenkorb selbst aber nicht:

// A currency switcher changed the format: repaint prices already on screen.
window.myTheme.onCurrencyChange((currency) => {
  window.aftersell.cart.configure({ money_format: FORMATS[currency] });
  window.aftersell.cart.actions.visualRefresh();
});

Hinweise und Randfälle

Asynchrone Actions werden aufgelöst, wenn die Änderung abgeschlossen ist. Eine abzuwarten lässt dich Arbeit sequenzieren, nachdem der Warenkorb sich tatsächlich aktualisiert hat.
getCart() gibt eine Kopie zurück. Sie zu mutieren tut dem echten Warenkorb nichts.
Es gibt keine Action für Rabattcodes. Angewendete Codes sind auf dem Warenkorb (discountCodes, totalDiscount) und pro Zeile (discountAllocations) lesbar; Käufer wenden sie über den Discount code-Block an.
Es gibt keine Action für Warenkorb-Attribute oder Notizen. Attribute sind auf dem Cart-Objekt lesbar; Käufer schreiben Notizen über den Notes-Block.
Um eine Zeile auszublenden statt zu entfernen, verwende registerLineTransform. Entfernen ändert die Gesamtsumme des Käufers; Ausblenden nicht.

Nächste Schritte

Cart-Objekt: was getCart() zurückgibt.
Events: wann du diese Actions ausführen solltest.
Hooks: ändere, wie eine Zeile gerendert wird, statt den Warenkorb zu ändern.
Use Cases: vollständige Lösungen für häufige Anforderungen.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Jede Action

Drawer

open und close

Lesen

getCart()

formatMoney(cents)

Den Warenkorb ändern

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Aktualisieren

refresh()

visualRefresh()

Hinweise und Randfälle

Nächste Schritte

​Jede Action

​Drawer

​open und close

​Lesen

​getCart()

​formatMoney(cents)

​Den Warenkorb ändern

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Aktualisieren

​refresh()

​visualRefresh()

​Hinweise und Randfälle

​Nächste Schritte

Jede Action

Drawer

open und close

Lesen

getCart()

formatMoney(cents)

Den Warenkorb ändern

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Aktualisieren

refresh()

visualRefresh()

Hinweise und Randfälle

Nächste Schritte