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. For common events shared across multiple drop-ins (such as locale, error, authenticated, etc.), see the Common events reference.

Version: 2.0.1

Tip

New to drop-in events? Learn about the event system architecture, including the publish-subscribe pattern, subscription configuration, and best practices for event handling.

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, data payload structure, and usage examples.

wishlist/alert (emits and listens)

Triggered when an alert or notification is triggered

Data payload

WishlistActionPayload | null

Usage

Listen to this event in your storefront:

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

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

// Later, when you want to stop listening
wishlistAlertListener.off();

wishlist/data (emits and listens)

Triggered when data is available or changes

Data payload

Wishlist | null

Usage

Listen to this event in your storefront:

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

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

// Later, when you want to stop listening
wishlistDataListener.off();

wishlist/initialized (emits)

Emitted when the component completes initialization

Data payload

Wishlist | null

Usage

Listen to this event in your storefront:

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

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

// Later, when you want to stop listening
wishlistInitializedListener.off();

wishlist/reset (emits and listens)

Triggered when the component state is reset

Data payload

void

Usage

Listen to this event in your storefront:

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

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

// Later, when you want to stop listening
wishlistResetListener.off();