Product Details Functions

The Product Details drop-in provides API functions that enable you to programmatically control behavior, fetch data, and integrate with Adobe Commerce backend services.

Version: 1.3.5

Function	Description
fetchProductData	Fetches product data for a given SKU.
getFetchedProductData	Returns previously fetched product data from cache..
getProductConfigurationValues	Returns the current product configuration values..
getProductData	Returns the product data for a given product SKU.
getRefinedProduct	Returns refined product data with specific options selected.
isProductConfigurationValid	Checks if the current product configuration is valid..
setProductConfigurationValid	Sets a callback to be called when product configuration validity changes..
setProductConfigurationValues	Sets a callback to be called when product configuration values change..

fetchProductData

The fetchProductData function fetches product data for a given SKU. It can fetch either simple product data or refined product data with selected options.

const fetchProductData = async (
  sku: string,
  options?: Options
): Promise<any>

Parameter	Type	Req?	Description
sku	string	Yes	The SKU (Stock Keeping Unit) of the product to fetch.
options	Options	No	Optional configuration including `anchors` (anchor options), `optionsUIDs` (selected option IDs), `preselectFirstOption` (whether to preselect first option), `isBundle` (whether product is a bundle), and `skipTransform` (whether to skip data transformation).

Events

Does not emit any drop-in events.

Returns

Returns void.

getFetchedProductData

The getFetchedProductData function returns previously fetched product data from cache.

const getFetchedProductData = async (
  { scope, }: { scope?: string } = {}
): Promise<ProductModel | null>

Parameter	Type	Req?	Description
options	string } = {}	Yes	Optional configuration for retrieving cached product data.

Events

Does not emit any drop-in events.

Returns

Returns ProductModel or null.

getProductConfigurationValues

The getProductConfigurationValues function returns the current product configuration values.

const getProductConfigurationValues = async (
  { scope, }: { scope?: string } = {}
): ValuesModel | null

Parameter	Type	Req?	Description
options	string } = {}	Yes	Optional configuration for retrieving product configuration values.

Events

Does not emit any drop-in events.

Returns

Returns ValuesModel or null.

getProductData

The getProductData function returns the product data for a given product SKU. It fetches data from Adobe Commerce and optionally preselects the first available option. The function calls the products query.

const getProductData = async (
  sku: string,
  options?: { preselectFirstOption?: boolean; optionsUIDs?: string[]; },
  raw?: boolean
): Promise<ProductModel | null>

Parameter	Type	Req?	Description
sku	string	Yes	The SKU (Stock Keeping Unit) of the product to fetch.
preselectFirstOption	boolean	No	Whether to automatically preselect the first available option for configurable products.
optionsUIDs	string[]	No	An array of option UIDs to preselect for the product.
raw	boolean	No	Whether to return raw GraphQL data without transformation.

Events

Does not emit any drop-in events.

Returns

Returns ProductModel or null.

getRefinedProduct

The getRefinedProduct function returns refined product data with specific options selected. This is used for configurable products where options have been chosen. The function calls the refineProduct query.

const getRefinedProduct = async (
  sku: string,
  optionUIDs: string[],
  anchorOptions?: string[],
  raw?: boolean
): Promise<ProductModel | null>

Parameter	Type	Req?	Description
sku	string	Yes	The SKU (Stock Keeping Unit) of the product to fetch.
optionUIDs	string[]	Yes	An array of option UIDs representing the selected variant.
anchorOptions	string[]	No	Anchor options for the product selection.
raw	boolean	No	Whether to return raw GraphQL data without transformation.

Events

Does not emit any drop-in events.

Returns

Returns ProductModel or null.

isProductConfigurationValid

The isProductConfigurationValid function checks if the current product configuration is valid.

const isProductConfigurationValid = async (
  { scope, }: { scope?: string } = {}
): boolean | null

Parameter	Type	Req?	Description
options	string } = {}	Yes	Configuration options to validate.

Events

Does not emit any drop-in events.

Returns

Returns boolean | null.

setProductConfigurationValid

The setProductConfigurationValid function sets a callback to be called when product configuration validity changes.

const setProductConfigurationValid = async (
  callback: (prev: boolean) => boolean,
  options?: { scope?: string }
): any

Parameter	Type	Req?	Description
callback	prev: boolean	No	A callback function that receives the validity status of the product configuration.

Events

Emits the pdp/valid event.

Returns

Returns void.

setProductConfigurationValues

The setProductConfigurationValues function sets a callback to be called when product configuration values change.

const setProductConfigurationValues = async (
  callback: (prev: ValuesModel) => ValuesModel,
  options?: { scope?: string }
): any

Parameter	Type	Req?	Description
callback	prev: ValuesModel	No	A callback function that receives the updated product configuration values.

Events

Emits the pdp/values event.

Returns

Returns void.

Data Models

The following data models are used by functions in this drop-in.

ProductModel

The ProductModel object is returned by the following functions: getFetchedProductData, getProductData, getRefinedProduct.

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[];
  videos?: Video[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: string;
  externalParentId?: string;
  variantSku?: string;
  productType?: ProductType | undefined;
}

Video

The Video interface defines the shape of a product video object returned as part of the ProductModel.

interface Video {
  url: string;
  title?: string;
  description?: string;
  preview?: {
    url: string;
    label?: string;
    roles?: string[];
  };
}

ValuesModel

The ValuesModel object is returned by the following functions: getProductConfigurationValues.

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