Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

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.

Emits Reference

Events produced by this drop-in that you can subscribe to.

EventDirectionDescription
wishlist/initializedEmitsEmitted when the component completes initialization

Listens Reference

Emits and Listens Reference

Bidirectional events that both emit state changes and listen for external updates.

EventDirectionDescription
wishlist/alertEmits and ListensTriggered when an alert or notification is triggered
wishlist/dataEmits and ListensTriggered when data is available or changes
wishlist/resetEmits and ListensTriggered 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/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/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/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();