PDP initialization

Customizing the product details page (PDP) drop-in component initializers can help you meet your project requirements and use cases.

Configuration options

The PDP drop-in component initializers allow you to define the language definitions, default locale, and models that your project will use.

Option	Type	Req?	Description
langDefinitions	object	No	Provides language definitions for internationalization (i18n).
defaultLocale	string	No	Specifies the default locale. If not provided, defaults to en-US.
models	object	No	Defines the data structure and initial data. Options include initialData, transform, and fallBackData.
scope	string	No	Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.

Note

Models are used to define the data structure and initial data for the PDP drop-in. The initialData object contains product details, options, and attributes.

Example

The following code shows the default implementation of the PDP drop-in component initializer in the Commerce boilerplate:

// Define the models object with a ProductDetails property
const models = {
  ProductDetails: {
    initialData: { ...product },
  },
};

// Initialize drop-in components
initializers.mountImmediately(initialize, {
  langDefinitions,
  models,
});

Scope Configuration

The scope option enables scoped contexts for the PDP drop-in. When provided, the component runs in an isolated context. This allows multiple independent PDP instances on the same page without conflicts.

Use cases for scoped PDP initialization:

• Product Comparison: Initialize multiple PDP instances for side-by-side product comparison
• Quick View: Initialize PDP instances for modal or overlay product previews

Example

The following example demonstrates how to initialize multiple scoped PDP instances:

// Initialize PDP
initializers.mountImmediately(initialize, {
  sku: 'SKU-001',
  langDefinitions,
});

// Initialize PDP with different scope
initializers.mountImmediately(initialize, {
  sku: 'SKU-002',
  langDefinitions,
  scope: 'modal',
});

Set default product options

When a user navigates to the product detail page (PDP) on your site, you can set certain options as preselected defaults for complex products. This use case allows merchandisers to set default options through the Adobe Commerce Admin, which provides a more customized and streamlined shopping experience.

Default option selection is not supported out-of-the-box for complex products. Instead, you must use product attributes and customize the PDP drop-in component initializers to define which attribute and value is used by default.

1. Log in to the Adobe Commerce Admin.

2. Create a custom attribute (default_options) to define default options for each product.

   Note

   Be sure to set Visible on Catalog Pages on Storefront to Yes.

3. Ensure that the default_options attribute has been exported to the Catalog Service and that the attribute’s roles field includes visible_in_pdp. See the ProductViewAttribute type documentation for details.

4. Use the products query to find the id of the default_options attribute for each product.

5. Add the id of the default_options attribute to the initialData object for each complex product.

6. Use the id to set the optionsUIDs in the initialData object.

   // Define the models object with a ProductDetails property
   const models = {
     ProductDetails: {
       initialData: {
         ...initialData,
         // Set the optionsUIDs for each product
         optionsUIDs: [
           '<id>', // Use the id of the default_options attribute for product 1
           '<id>', // Use the id of the default_options attribute for product 2
         ],
       },
     },
   };
   
   // Register Initializers
   initializers.mountImmediately(initialize, {
     langDefinitions,
     models,
   });