Wishlist Data & Events

The Wishlist drop-in uses the event bus to emit and listen to events for communication between drop-ins and external integrations.

Events reference

Event	Direction	Description
wishlist/initialized	Emits	Emitted when the component completes initialization.
wishlist/alert	Emits and listens	Emitted when the wishlist shows an alert or notification.
wishlist/allItems	Emits	Emitted when the full list of all wishlist items is available or changes.
wishlist/data	Emits and listens	Triggered when data is available or changes.
wishlist/reset	Emits and listens	Triggered when the component state is reset.

Event details

The following sections provide detailed information about each event, including its direction, event payload, and usage examples.

wishlist/alert (emits and listens)

Emitted when the wishlist shows an alert or notification.

Event payload

WishlistActionPayload | null

See WishlistActionPayload for full type definition.

Example

import { events } from '/@dropins/tools/event-bus.js';

events.on('wishlist/alert', (payload) => {
  console.log('wishlist/alert event received:', payload);
  // Add your custom logic here
});

wishlist/allItems (emits)

Emitted when the full list of all wishlist items across all pages is available or changes. This event provides the complete item list, unlike wishlist/data which contains the current page of items.

Event payload

Item[]

Example

import { events } from '/@dropins/tools/event-bus.js';

events.on('wishlist/allItems', (items) => {
  console.log('wishlist/allItems event received:', items);
  // Add your custom logic here
});

wishlist/data (emits and listens)

Emitted when wishlist data is updated or retrieved. This event is triggered after operations like adding items, removing items, or updating quantities in the wishlist.

Event payload

Wishlist | null

See Wishlist for full type definition.

Scoping

By default, wishlist/data carries the shopper’s active wishlist, and every listener shares that one channel. When you render an additional wishlist (such as a “Save for Later” list) alongside the active one, pass a scope so its data travels on its own channel and does not overwrite the active list. A container rendered with the same scope listens only to that channel.

import { events } from '/@dropins/tools/event-bus.js';

// Listen only to the 'save-for-later' channel
events.on('wishlist/data', (payload) => {
  console.log('save-for-later data:', payload);
}, { scope: 'save-for-later' });

The drop-in functions that load or mutate a wishlist accept { scope } and emit on that channel. See Render an additional wishlist for the full pattern.

Example

import { events } from '/@dropins/tools/event-bus.js';

events.on('wishlist/data', (payload) => {
  console.log('wishlist/data event received:', payload);
  // Add your custom logic here
});

wishlist/initialized (emits)

Emitted when the wishlist component completes initialization. This indicates the wishlist is ready to display items and accept user interactions.

Event payload

Wishlist | null

See Wishlist for full type definition.

Example

import { events } from '/@dropins/tools/event-bus.js';

events.on('wishlist/initialized', (payload) => {
  console.log('wishlist/initialized event received:', payload);
  // Add your custom logic here
});

wishlist/reset (emits and listens)

Triggered when the component state is reset.

Event payload

undefined

This event does not include a payload.

Example

import { events } from '/@dropins/tools/event-bus.js';

events.on('wishlist/reset', (payload) => {
  console.log('wishlist/reset event received:', payload);
  // Add your custom logic here
});

Data Models

The following data models are used in event payloads for this drop-in.

Wishlist

Used in: wishlist/data, wishlist/initialized.

interface Wishlist {
  id: string;
  name?: string;
  updated_at: string;
  sharing_code: string;
  items_count: number;
  items: Item[];
}

WishlistActionPayload

Used in: wishlist/alert.

interface WishlistActionPayload {
    action: WishlistAlertProps.action;
    item: WishlistAlertProps.item;
  }