Comparison Tools
COMPARISON TOOLS
A product can be added to a list (identified by a name) in order to be compared to other ones:
<action actionName="COMPARE(compareList=compareListID)" ></action>
The comparePreviewBox allows to have an overview of the list of products which have been added to the comparator
<comparePreviewBox source="compareListID" ></compareBox>
The compareBox displays a table to compare product properties and is dynamically refreshed when new products are added.
<compareBox source="compareListID" ></compareBox>
When inserted in the comparePage, the ‘source’ can have a ‘*’ value:
<compareBox source="*" ></compareBox>
[In that case, the compareBox will display the content of any compareList passed in the context of its parent container]
The compareBox can be added in any page of the Catalog in particular in the comparePage that can be opened with the following action:
<action actionName="OPEN_PAGE(pageName=comparePage, compareList=compareListID)">
Or it can be called from a comparePreviewBox:
<action actionName="OPEN_PAGE(pageName=comparePage)">
[In that case, the compareList is inherited from the comparePreviewBox containing the OPEN_PAGE action]
.
Typical Use Case
(Several Collection page having their dedicated comparison product lists, pointing to a single comparison page):
compareFlyer
OVERVIEW
A compareFlyer pops up a compareBox which aims at comparing data related to the selected products (RMOTexts, Prices, Business Properties…Etc.).
The compareFlyer can be called from any actionBox or linked action. The list of products displayed in the compareBox depends on the listID used as a source of the compareBox.
Please refer to: How to use Flyers? For more details
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: compareFlyer visible or not | on/off | |
| name: identifier of the Flyer. This name is used as a parameter of the OPEN_FLYER action. | #IMPLIED | |
| resizable: flyer resizable or not | on/off | |
| titleTranslationName: identifier of the translation used to give the title of the flyer | #IMPLIED | |
| titleResourceName: identifier of the resource to be displayed in the title of the flyer. | #IMPLIED | |
| vtPosition: gives the vertical position of the flyer in the screen | up / middle / down / auto | |
| hzPosition: gives the horizontal position of the flyer in the screen | left / center / right / auto | |
| vtSize: gives in pixel the vertical size of the flyer | #IMPLIED | |
| hzSize: gives in pixel the horizontal size of the flyer | #IMPLIED | |
| compareBox | A compareBox can be inserted in the productFlyer. | #REQUIRED |
VISUAL IDENTITY
The compareFlyer is associated to a main CSS class. The resource associated to the header part of the compareFlyer is declared in the XML Layout file.
compareBox
OVERVIEW
The compareBox is a table allowing to compare products as far as their Prices, associated RMOs and business properties are concerned.
The characteristics displayed in the compareBox correspond to Business Properties attached to each product and defined as follows:
- IsVisible = “true” AND IsComparable = “true” Or
- IsVisible = “true” AND IsComparable = “true” AND IsScoreable = “true”
The BPs that can be scored are gathered into a specific section of the compare table if showScoring=’on’.
When the user clicks on the Name, Descr, RMOText of the products (this action will be available if no URL has already been defined on the RMO), the action is launched.
In addition to this action, an actionBox can be declared in the itemSheet to provide additional features.
To print more than 4 items on the comparePage, the best option is to use the landscape print mode of your web browser.
ATTRIBUTES DETAILS
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: compareBox visible or not | on/off |
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| widthPercent: percentage of occupancy in the total width of the container | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the container/flyer | #IMPLIED | |
| autoSize: (Cf. Appendix – UI brick positioning) | on/off | |
| hzAlignment: gives the horizontal alignment of the box in its container | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in its container | up / down / middle / distributed | |
| source: identifies the list of products to be displayed in the comparison table. | #IMPLIED. or “*” (in that case the source is inherited from the action/box that has redirected the user to the ComparePage) | |
| source: identifies the list of products to be displayed in the comparison table. | #IMPLIED | |
| displayType: to display the name of the product, or the description or both | name / description The attribute can be multivalued (and ordered): e.g. ‘name,description’ | |
| rmoUserType: user type of the RMO information to be displayed | #IMPLIED “*” means ‘any’ userType | |
| showText: displays the RMOText | on/off |
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| showBPS: displays the BPSet descriptions to organize and separate the Business Properties. When showBPS=’on’, the sections of the comparison table are collapsible. | on/off | |
| showScoring: Scoring section visible or not (the scoring section title can be changed in the translation part of the XML file) | on/off | |
| bpsUserType: user type of the BPS to be displayed in the comparison table. | #IMPLIED “*” means ‘any’ userType | |
| pricing | ||
| method: CPE of the pricing method that will be used to display the price or element of the elements in the cell | #IMPLIED | |
| range: range of the displayed price | #IMPLIED | |
| element: element to be displayed | ||
| resourceName: resource associated to the price | #IMPLIED | |
| resourceAlignment: alignment of the graphical resource | left/right | |
| translationName: a translatable title associated to the price | #IMPLIED | |
| translationAlignment: position of the title | left/right |
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| linkedAction | Action launched when clicking on the RMOText, Name and/or Descr of the product. | linkedAction |
XML Sample
<compareBox source="compareListID" cssName="compareBox" hzAlignment="right"
vtAlignment="up" widthPercent="100" heightPercent="90" autosize="off"
rmoUserType="*" displayType="name,description" showText="on" showBPS="on"
bpsUserType="*">
<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])"
range="1" resourceName="" resourceAlignment="left" translationName=""
translationAlignment="right" />
<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])"
range="2" resourceName="" resourceAlignment="left" translationName=""
translationAlignment="right" />
<linkedAction actionName="OPEN_FLYER(flyerName=config.productFlyer)"
resourceName="" translationName="tooltip.openProductFlyer" />
<actionBox mode="on" cssName="myCssClass" hzAlignment="left"
vtAlignment="down" widthPercent="100" heightPercent="100" autosize="off">
<action actionName="OPEN_FLYER(flyerName=config.productFlyer)"
alignment="center" resourceName="btnOpenRmoFlyer"
translationName="tooltip.openProductFlyer" url="" />
</actionBox>
</compareBox>
VISUAL IDENTITY
The compareBox is associated to a main CSS class. It is possible to specify a personalized CSS class for each embedded module.
Mapping between CSS Classes and component structure
comparePreviewBox
OVERVIEW
The comparePreviewBox displays the list of products to be compared. It is possible to remove a product from the comparison list using the ‘remove’ action.
It can be inserted into any catalogPage.
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: comparePreviewBox visible or not | on/off | |
| framedBox: generates the panel header and footer of the box | on/off | |
| **widthPercent: percentage of occupancy in the total width of the container | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the container/flyer | #IMPLIED |
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| autoSize: (Cf. Appendix C – UI brick positioning) | on/off | |
| **hzAlignment: gives the horizontal alignment of the box in its container | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in its container | up / down / middle / distributed | |
| source: identifier of the compare list | #IMPLIED | |
| rmoUserType: userType to be used for the RMO display | #IMPLIED “*” means any userType | |
| displayType: to display the name of the product, or the description or both | name / description The attribute can be multivalued (and ordered): e.g. ‘name,description’ name appears before description. | |
| showImage: Product RMO image visible or not | on/off | |
| titleTranslationName: box title | #IMPLIED | |
| actionBox | This action box allow to add an action to open the comparePage. | actionBox |
XML Sample
<comparePreviewBox mode="on" cssName="comparePreviewBox"
widthPercent="98" heightPercent="100" hzAlignment="left"
vtAlignment="up" autosize="on" source="compareListID" rmoUserType=""
displayType="name,description"
titleTranslationName="comparePreviewBox.title" framedBox="on">
<actionBox mode="on" cssName="myCssClass" hzAlignment="center"
vtAlignment="down" widthPercent="100" heightPercent="100" autosize="on">
<action actionName="OPEN_PAGE(pageName=comparePage)"
alignment="right" resourceName="btnOpenComparePage"
translationName="tooltip.compare" url=""/>
</actionBox>
</comparePreviewBox>
VISUAL IDENTITY
The comparePreviewBox is associated to a main CSS class. It is possible to specify a personalized CSS class for each embedded module.