Product Details Data & Events

The Product Details 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: 1.3.5

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
pdp/valid	Emits	Emitted when validation state changes
pdp/setValues	Listens	Fired by Pdp (pdp) when values are set programmatically
pdp/data	Emits and listens	Triggered when data is available or changes
pdp/values	Emits and listens	Triggered when form or configuration values change

Event details

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

pdp/data (emits and listens)

Triggered when data is available or changes

Data payload

ProductModel | null

Usage

Listen to this event in your storefront:

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

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

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

pdp/setValues (listens)

Fired by Pdp (pdp) when values are set programmatically

Data payload

This event’s data payload structure is not documented in the source code.

Usage

Listen to this event in your storefront:

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

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

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

pdp/valid (emits)

Emitted when validation state changes

Data payload

boolean

Usage

Listen to this event in your storefront:

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

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

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

pdp/values (emits and listens)

Triggered when form or configuration values change

Data payload

ValuesModel

Usage

Listen to this event in your storefront:

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

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

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