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.

Auto-generated on 2025-10-21. Do not edit this page directly.

Emits Reference

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

Event	Direction	Description
pdp/valid	Emits	Emitted when validation state changes

Listens Reference

Events this drop-in listens for from external sources.

Event	Direction	Description
pdp/setValues	Listens	Fired by Pdp (pdp) when values are set programmatically

Emits and Listens Reference

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

Event	Direction	Description
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/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/setValues (listens)

Fired by Pdp (pdp) when values are set programmatically

Data payload

Caution

No TypeScript definition available. Refer to the event implementation for payload structure details.

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/data (emits and listens)

Triggered when data is available or changes

Data payload

ProductModel | null

Tip

ProductModel is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

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/values (emits and listens)

Triggered when form or configuration values change

Data payload

ValuesModel

Tip

ValuesModel is a complex type with multiple properties. Key properties typically include id, domain-specific data fields, and metadata.

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