Extending the Product details panel

You can customize the Product details panel that is displayed from any of the views in Sterling Store Engagement.

Customizing the accordion items

You can add a new accordion item or replace an existing out-of-the-box accordion item in the Product details panel.

The configuration file that you must update to override the out-of-the-box accordion items in the Product details panel in the Customer service view is customer-view-details.config.ts and for the other views is fulfillment-view-details.config.ts.

Use the following procedure to customize the Product details panel:

Create the following folder structure under store-extensions-src, if not already present: store-extensions-src/app/app-common/product-details-modal
Copy app-common-extension.module.ts from WORKSPACE/store-frontend/src/app/app-common to WORKSPACE/store-frontend/store-extensions-src/app/app-common.
Note: If app-common-extension.module.ts is already present, do not copy the file. Custom components and providers are declared in this file.
To customize the accordion items in the Product details panel in the Customer service view, copy the customer-view-details.config.ts file from WORKSPACE/store-frontend/src/app/app-common/product-details-modal to WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal.
To customize the accordion items in the Product details panel in the Order fulfillment, Inventory management, or Configuration views, copy the fulfillment-view-details.config.ts file from WORKSPACE/store-frontend/src/app/app-common/product-details-modal to WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal.

Customizing primary product details pane

You can customize the primary product details pane on the Product details panel. The component that you have to customize to override the out-of-the-box primary product details in the Customer service view is customer-view-primary-detail.ts and for the other views is fulfillment-view-primary-detail.ts.

The following table lists the properties in the fulfillment-view-details.config.ts and customer-view-details.config.ts files.

Table 1. Properties in configuration files
Property	Type	Description
`primaryDetail`	object	Used to define the primary product details section of the page. This property can take the following values: `tid`. For testing. `component`. Component reference.
`accordionItems`	array<object>	Used to define the accordion panes as individual objects. This property can take the following values: `id`. Unique ID for the item, which can be used to expand the accordion pane based on a condition or to handle data emitter logic in parent container by using switch case `tid`. Used for testing. `component`. Component reference. `displayBundleKey`. Title for the accordion pane. `lazyLoad`. Optional. Indicates whether to load the accordion component initially or upon expanding the component.

These components are loaded dynamically and the following inputs are passed to these components:

Inputs for the primary product detail component

primaryData. Response from the getCompleteItemList API.
parentComponentId. Component ID and the tid in the config.
activatedRoute Reference of this component's ActivatedRoute

Inputs for the accordion item component

config. The config mentioned for this panel in add-product-page.config.ts file.
primaryData. Same input as mentioned for the primary detail component.
activatedRoute. Reference of activatedRoute for this component.