Next-generation platformDeprecated

Sample use cases for customizing the Products details panel

This topic provides some use cases for the customization of the Product details panel.

Reordering of the accordion items

You can reorder the accordion items in the Product details panel. For example, you can show Product variant as the last accordion item Product details panel displayed in the Customer service view by using the following steps:
  1. Create the following folder structure under store-extensions-src, if not already present:

    store-extensions-src/app/app-common/product-details-modal

  2. Copy the customer-view-details.config.ts file from
    /store-frontend/src/app/app-common/product-details-modal
    to store-frontend/store-extensions-src/app/app-common/product-details-modal/.
  3. Update the accordionItems array based on your requirement. In this example, move the first item, productVariants and add it as the last item in this array.

Removing an accordion item

You can remove an accordion item from the Product details panel. For example, you can remove the Product variants accordion item from the Product details panel in the Order fulfillment view by using the following steps:
  1. Copy 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.
  2. Remove the productVariants item from the accordionItems array:
    {
        id: 'productVariants',
        tid: 'ProductVariantsComponent',
        component: ProductVariantsComponent,
        displayBundleKey: 'addProductToCart.LABEL_ProductVariants'
}

Adding a new accordion item

You can add a new accordion item to the Product details panel. For example, you can add Product additional details as a new accordion item to the Product details panel in the Order fulfillment view by using the following steps:
  1. Copy 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.
  2. Add the following object for the new ProductAdditionalDetailComponent component to the accordionItems array:
    {       
id: 'ProductAdditionalDetail',
tid: 'ProductAdditionalDetailComponent',
component: ProductAdditionalDetailComponent,
displayBundleKey: 'addProductToCart.LABEL_ProductAdditionalDetail'
}
  3. Add the new component in the declarations and entryComponents of the app-common-extension.module.ts file.

Updating the primary product information

You can customize the primary product information that is displayed in the Product details panel. For example, you can customize the Product details panel in the Order fulfillment view so that the SKU information is not displayed for any of the products by using the following steps:
  1. Create the following folder structure under store-extensions-src, if not already present:

    store-extensions-src/app/app-common/product-details-modal

  2. Copy the fulfillment-view-primary-detail component from /store-frontend/src/app/app-common/product-details-modal to /store-frontend/store-extensions-src/app/app-common/product-details-modal.
  3. Update the newly copied component to remove the SKU element from the HTML.