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.

Version: 1.3.5

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, event payload, and usage examples.

pdp/data (emits and listens)

Triggered when data is available or changes.

Event payload

ProductModel | null

See ProductModel for full type definition.

Example

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

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

pdp/setValues (listens)

Fired by Pdp (pdp) when values are set programmatically.

Event payload

Example

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

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

pdp/valid (emits)

Emitted when validation state changes.

Event payload

boolean

Example

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

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

pdp/values (emits and listens)

Triggered when form or configuration values change.

Event payload

ValuesModel

See ValuesModel for full type definition.

Example

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

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

Data Models

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

ProductModel

Used in: pdp/data.

interface ProductModel {
  name: string;
  sku: string;
  isBundle: boolean;
  addToCartAllowed: boolean;
  inStock: boolean | null;
  shortDescription?: string;
  metaDescription?: string;
  metaKeyword?: string;
  metaTitle?: string;
  description?: string;
  images?: Image[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: string;
  externalParentId?: string;
  variantSku?: string;
  productType?: ProductType | undefined;
}

ValuesModel

Used in: pdp/values.

interface ValuesModel {
  sku: string;
  quantity: number;
  optionsUIDs?: string[];
  enteredOptions?: Array<{ uid: string; value: string }>;
}