Extending the Product details page

You can customize your Product details page by adding new accordion panes or replacing an existing out-of-the-box component in the accordion pane.

Customizing the accordion items

Use the following procedure to customize the accordion items in the Product details page.

Create the following folder structure under store-extensions-src, if not already present:
store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page
Copy the orders-extension.module.ts file from
WORKSPACE/store-frontend/src/app/features/orders
to WORKSPACE/store-frontend/store-extensions-src/app/features/order.

Note: If orders-extension.module.ts is already present, do not copy the file. Custom components and providers are declared in this file.
Copy the add-product-page.config.ts file from
WORKSPACE/store-frontend/src/app/features/orders/order-capture-wizard-page/add-product-page/
to WORKSPACE/store-frontend/store-extensions-src/app/features/order/order-capture-wizard-page/add-product-page/.
To add a new accordion item, add the corresponding object inside the accordionItems array in add-product-page.config.ts.
To remove any accordion item, remove the corresponding item from the accordionItems array in add-product-page.config.ts.

Customizing the primary product details pane

You can customize the primary product details pane on the Product details page. For example, use the following steps to customize this pane so that the SKU information is not displayed for any of the products:

Create the following folder structure under store-extensions-src, if not already present:
store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page
Copy the primary-detail component from
/store-frontend/src/app/features/orders/order-capture-wizard-page/add-product-page/primary-detail
to store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page.
Update the newly copied component to remove the SKU element from the HTML.

add-product-page.config.ts properties

The following table lists the properties in the add-product-page.config.ts file.

Property Type Description

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.

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 dynamically loaded, and the following inputs are passed to these components:

Inputs for the primary product detail component
primaryData - Response from the getCompleteItemList API.
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.