Product Details Data & Events

The Product Details drop-in emits product configuration and validation events, enabling real-time validation feedback and coordination with other storefront components.

Version: 1.3.5

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

pdp/data (emits and listens)

Triggered when data is available or changes.

Event payload

ProductModel | null

See ProductModel for full type definition.

Usage

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.

Event payload

Usage

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.

Event payload

boolean

Usage

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.

Event payload

ValuesModel

See ValuesModel for full type definition.

Usage

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

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