Skip to main content

Set Up the Product Card

Products are presented in the catalog or in search results by a Product Card. The purpose of this section is to detail information that appears on this card and how to configure it.

Fig 1 : Product card sample

Fig.1: Product card sample

The product card display the following elements :

Fig 2 : Product card elements

Fig.2: Product card elements

Refer to Range Creation, Verification and Update to define Product identity, description, pictures and parameters with 3D Cloud.

Thumbnail​

The product thumbnail (1) is the presentation.thumbnail of the product.

Name​

The name (2) is the definition.name of the product in the language of the planner. It is display on 1 line in the product card. if too large it is ellipsed. The planner language is setup in the application distribution and optionally overriden in the url.

Short Description​

The short description (3) is the definition.shortDescription of the product in the language of the planner. It is display on 3 lines in the product card. if too large it is cut and the end is not displayed.

Product Information Icon​

The product information icon (4) is displayed if the product has a commercial description definition.commercialDescription in the language of the planner. Clicking it opens the product information popup. This pop up can be customized, see Integrate the Planner to your Website.

Commercial Dimension​

The commercial dimension (5) is defined as a parameter on the product. The parameter name is defined by the application distribution setting dimensionParameter. This string parameter describes the dimensions or characteristics of the product that can be read and understood by a human. Dimensions combination, precision and units vary between products and categories.

Energy Efficiency Label​

The energy efficiency label (6) associated to a product is composed of values A+++,A++,A+,A,B,C,D. Depending of value the energy efficiency label is displayed as an arrow with proper shape, size and color containing the energy efficiency class value.

The parameter name is defined by the application distribution setting energyLabelParameter, usually it is energyLabel.

Price​

The price (7) in product card can display regular, membership or reduced price with validity dates or stock message. The eco-fee price can also be displayed. See Set Up the Pricing.