Skip to main content

Product information

This component can be used whenever we want to display product information. It takes in a product ID and renders information such as the product name, identity information like the backend ID, custom ID, barcode and also the values of all the configured properties set in App:ProductDetail:Properties. Furthermore, it displays a nice image slider with available blobs including the barcode if available.

Usage#

Props#

interface IProductInformationProps {  // ID of the product to display information for  productId: number;  // Optional callback that can be sent to show and handle an open icon the component header. Use it to lead your user to a product page or something.  onOpenCallback?: () => void;}

Example#

const Example = ({ productId }: { productId: string }) => (  <Card>    <ProductInformation productId={exampleProductId} />  </Card>);

Component is unopinionated with regards to positioning relative to other content and thus the consumer can decide if it should reside in a box, card, modal etc.

Translations#

Add these translations to the module. Make sure there are no duplicates.

{  "product-information.title": "Product information",  "product-information.basic-info.product-name": "Product name",  "product-information.basic-info.eva-id": "EVA ID",  "product-information.basic-info.backend-id": "Backend ID",  "product-information.basic-info.custom-id": "Custom ID",  "product-information.basic-info.barcode": "Barcode",  "product-information.details.no-value": "No value"}