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:
- Open the add-product-page.config.ts file in the store-extensions-src folder.
- 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:
- Open the add-product-page.config.ts file in the store-extensions-src folder.
- Remove the
productVariants
item from theaccordionItems
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:- Open the add-product-page.config.ts file in the store-extensions-src folder.
- Add the object for the new
ProductAdditionalDetailComponent
component to theaccordionItems
array. - Add the new component in the declarations and
entryComponents
of theorders-extension.module.ts
file.
Removing the scan field
You can remove the scan field from the Product details page by using the
following steps:
- 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.
- Remove
isf-barcode-scanner
element from add-product-page.component.html in the new component.