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
The product card display the following 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 commercialDimensionParameter, usually it is commercialDimensions
. 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 can be displayed using 2 different scales. First scale is composed of values A+++,A++,A+,A,B,C,D. Second scale is composed of values A,B,C,D,E,F,G. Depending of scale and 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 for first scale is defined by the application distribution setting energyLabelParameter, usually it is energyLabel
.
The parameter name for second scale is defined by the application distribution setting energyLabelParameter2, usually it is energyLabel2
.
If both parameters are defined on a product, the second scale value is displayed in priority. If the second scale value is empty or different of the 7 possible values then the first scale value is displayed.
Price
The price (7) in product card can display regular, discounted, membership or reduced price with validity dates or stock message. The eco-fee price can also be displayed. See Set Up the Pricing.