Product Discovery Data & Events

The Product Discovery 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.1.0

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
search/error	Emits and listens	Triggered when an error occurs
search/loading	Emits and listens	Triggered when loading state changes
search/result	Emits and listens	Triggered when results are available

Event details

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

search/error (emits and listens)

Triggered when an error occurs

Data payload

string

Usage

Listen to this event in your storefront:

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

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

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

search/loading (emits and listens)

Triggered when loading state changes

Data payload

boolean

Usage

Listen to this event in your storefront:

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

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

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

search/result (emits and listens)

Triggered when results are available

Data payload

{
result: ProductSearchResult;
request: SearchVariables;
}

Property	Type	Description
result	ProductSearchResult	See type definition in source code
request	SearchVariables	See type definition in source code

Usage

Listen to this event in your storefront:

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

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

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