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.

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.register(productApi.initialize, {
  langDefinitions,
  models,
});

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.

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.register(api.initialize, {
     langDefinitions,
     models,
   });