Wishlist Data & Events

The Wishlist drop-in emits wishlist state changes when items are added, removed, or updated, enabling synchronization with other storefront components and external integrations.

Version: 2.0.1

Tip

For information about event architecture, subscription patterns, and best practices, see the Events guide.

Events reference

Drop-ins communicate via the event bus.

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

wishlist/alert (emits and listens)

Triggered when an alert or notification is triggered.

Event payload

WishlistActionPayload | null

See WishlistActionPayload for full type definition.

Usage

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)

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.

Usage

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

Usage

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.

Event payload

void

Usage

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();

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;
  }