Product Discovery Data & Events

The Product Discovery drop-in emits search-related events including loading states, search results, and errors, enabling real-time search feedback and integration with other storefront components.

Version: 2.1.0

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

search/error (emits and listens)

Emitted when an error occurs during search operations such as query execution or facet loading.

Event payload

string

Usage

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.

Event payload

boolean

Usage

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.

Event payload

{
  result: ProductSearchResult;
  request: SearchVariables;
}

See ProductSearchResult, SearchVariables for full type definitions.

Usage

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

Data Models

The following data models are used in event payloads for this drop-in.

ProductSearchResult

Used in: search/result.

interface ProductSearchResult {
  facets: SearchFacet[];
  items: Product[];
  pageInfo: {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    pageSize: number;
  };
  suggestions?: string[];
  totalCount: number;
  metadata?: {
    filterableAttributes: RefineOption[];
    sortableAttributes: RefineOption[];
  };
}

SearchVariables

Used in: search/result.

interface SearchVariables {
  scope?: Scope;
  phrase?: string;
  filter?: SearchFilter[];
  sort?: SortOrder[];
  currentPage?: number;
  pageSize?: number;
  context?: SearchContext;
}