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.

Version: 3.0.0-beta1

Events reference

Event	Direction	Description
wishlist/initialized	Emits	Emitted when the component completes initialization.
wishlist/alert	Emits and listens	Triggered when an alert or notification is triggered.
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)

Triggered when an alert or notification is triggered.

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/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.

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

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;
  updated_at: string;
  sharing_code: string;
  items_count: number;
  items: Item[];
}

WishlistActionPayload

Used in: wishlist/alert.

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