Cart Updated

Description

The onCartUpdated listener fires whenever the contents of the cart change — such as when a product is added, removed, its quantity changes, or a discount is applied. Use it to refresh UI like cart totals, icons, or badges.

Re-read Superfans.variables.cart inside the listener. Do not use a cached cart object.

Function Signature

Superfans.listeners.onCartUpdated(() => {
  const cart = Superfans.variables.cart;
});

Example Usage

Superfans.listeners.onCartUpdated(() => {
  const cart = Superfans.variables.cart;
  const cartTotal = cart?.subtotal || 0;

  if (cartTotal > 500) {
    Superfans.actions.showToast({
      title: "Congrats",
      message: "You are eligible for Free Shipping!!"
    });
  }
});

Best Practices

1. Re-read live cart data: Always read Superfans.variables.cart inside the listener instead of caching the previous cart.
2. Debounce updates: Avoid flickering by batching UI updates if multiple events fire quickly.
3. Use the current discount shape: Read appliedDiscounts, cartLevelDiscounts, and items[].lineLevelDiscounts from the live cart object.

Caveats

1. Global event: Fires on any page where the cart changes.
2. Frequency: May fire multiple times for a single cart action (e.g., quantity change).
3. No payload: The listener callback does not receive the cart as an argument. Read Superfans.variables.cart.