Next-generation platformDeprecated

Sample use cases for customizing the Product details page

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

Reordering of accordion items

You can reorder the accordion items in the Product details page. For example, use the following steps to show Product variant as the last accordion item:
  1. Open the add-product-page.config.ts file in the store-extensions-src folder.
  2. 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 page. For example, use the following steps to remove the Product variants accordion item:
  1. Open the add-product-page.config.ts file in the store-extensions-src folder.
  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 page. For example, use the following steps to add ProductAdditionalDetailComponent as a new accordion item:
  1. Open the add-product-page.config.ts file in the store-extensions-src folder.
  2. Add the object for the new ProductAdditionalDetailComponent component to the accordionItems array.
  3. Add the new component in the declarations and entryComponents of the orders-extension.module.ts file.

Removing the scan field

You can remove the scan field from the Product details page by using the following steps:
  1. Copy add-product-page folder from store-frontend/src/app/features/orders/order-capture-wizard-page/add-product-page to store-extensions-src/app/features/orders/order-capture-wizard-page/add-product-page.
  2. Remove isf-barcode-scanner element from add-product-page.component.html in the new component.