Next-generation platformDeprecated

Extending the Product details page

Edit online

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.

  1. 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

  2. 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.
  3. 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/.
  4. To add a new accordion item, add the corresponding object inside the accordionItems array in add-product-page.config.ts.
  5. 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:
  1. 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

  2. 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.
  3. 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.
Table 1. Properties of add-product-page.config.ts file
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 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.