Understand the configure-price components

Commerce includes a set of components you can use to integrate with Oracle CPQ in price-and-configure scenarios.

These scenarios allow shoppers to customize and buy complex products. For example, if your store sells laptops, a shopper can configure their laptop by choosing options like processor, memory, and storage.

The configure-price components support the integration with CPQ with the following:

• Support in the OSF JS API to interface with the Commerce Server-Side Extension (SSE) that handles orchestration with the CPQ Rest API. See Implement configuration customization via the CPQ Configuration API for details about the SSE.
• The Configure button you add to the Product Detail Page layout. This allows a shopper to open a configuration dialog.
• Components that let you provide common configuration types. These include selector types (radio buttons, drop-down lists, toggles, date/time picker.
• Support for CPQ array set selections in a table.
• Displays updated product pricing based on the configuration selections a shopper chooses.
• Lets the shopper add the configured product to the cart.
• Lets the shopper edit the configured product from the cart.
• Lets the shopper check out with the configured product in the cart.

Detailed information about each widget's code, including actions, selectors, fetchers, and endpoints, is available in the JS API documentation that you can download from Oracle Customer Connect.

Include CPQ plug-ins in OSF applications

The CPQ configure-price plug-ins are included with Commerce, but they are not enabled and available by default in reference applications. This section describes how to add them to an OSF application.

First, you must add extensions dependencies to your application since the CPQ integration is managed by SSEs:

1. Navigate to your <workspace-dir>/packages/apps/<appname> folder
2. Run the following commands:

   yarn add @oracle-cx-commerce/extensions-endpoints

   yarn add @oracle-cx-commerce/extensions-actions

   yarn install

3. Make sure the dependencies are installed to your local node_modules/@oracle-cx-commerce folder.

Now configure the application.

First, open the following file, or create it if it does not exist:

packages/apps/<appname>/assets/components/product-configure/index.json

Add the ProductConfigure button type to the file:

{ 
    "type": "ProductConfigure"
}

Next, open the following file, or create it if it does not exist:

packages/apps/<appname>/assets/components/product-details-container/layout.json

Add a Configure button to the Product Details page by including the product-configure component in ProductDetailsContainer layout. For example:

{
          "layout": [
            {
              "components": [
                "product-image-viewer",
                "product-name",
                "product-price",
                "product-variant-options",
                "product-inventory-status",
                "product-add-to-cart-button",
                "product-configure",
                "product-social-sharing",
                "product-long-description"
              ],
              "width": 12
            }
          ],
          "component": "ProductDetailsContainer",
          "title": "ProductDetails"
        }

Finally, add plug-in exports to your application:

1. Navigate to your <workspace-dir>/packages/apps/<appname>/src/plugins/actions/index.js file and add the following line:

   export * from '@oracle-cx-commerce/extensions-actions';

2. Navigate to your <workspace-dir>/packages/apps/<appname>/src/plugins/actions/meta.js file and add the following line:

   export * from '@oracle-cx-commerce/extensions-actions/meta';

3. Navigate to <workspace-dir>/packages/apps/<appname>/src/plugins/endpoints/index.js file and add the following line:

   export * from '@oracle-cx-commerce/extensions-endpoints';

4. Navigate to <workspace-dir>/packages/apps/<appname>/src/plugins/endpoints/meta.js file and add the following line:

   export * from '@oracle-cx-commerce/extensions-endpoints/meta';