Catalog Components
collectionListBox
OVERVIEW
When inserted in a collectionPage, the collectionListBox identifies an area reserved to display information related to sub-collections.
In the XML file, the content of the collectionListBox describes the template of the UI object that will be applied to display the data of each sub-collection:
- Either via collectionPreviewBoxes: to display a subset of products contained in the collection
- Or via RMOBoxes: to display the RMO of sub-collections
- Or via menuBoxes
- Or via teaserListBoxes
- Or via a combinedBox organizing any of the boxes mentioned above.
Example of a collectionListBox where each subCollection is represented by a collectionPreviewBox:
Example of a collectionListBox without specifying the number of columns and where each subCollection is represented by a collectionPreviewBox without the ‘rolling’ effect.
Example of a collectionListBox where each subCollection is represented by a RMOBox:
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| cssName | #IMPLIED | |
| framedBox: generates the panel header and footer of the box | on / off | |
| mode: collectionListBox visible or not | on / off |
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| widthPercent: percentage of occupancy in the total width of the container/page | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the container/page | #IMPLIED | |
| autoSize | on / off | |
| hzAlignment: gives the horizontal alignment of the box in its container/ page | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in its container/ page | up / down / middle / distributed | |
| titleTranslationName: identifier of the translation used to give the title of the box | #IMPLIED | |
| collectionUserType: user type of the child collections to be displayed. | “*” any userTypes or a list of comma separated userTypes | |
| columnCount: nb. of columns NB: If columnCount = ‘-1’, all collections are organized horizontally on 1 line. | #IMPLIED | |
| collectionPreviewBox or RMOBox (with linkedAction) or menuBox or teaserListBox or combinedBox | A combined Box can be used to create a custom template to represent each box embedded in the collectionListBox: Ex: A RMOBox + A MenuBox The collectionListBox must contain at least 1 element. | description of the different boxes |
VISUAL IDENTITY
Each embedded box (RMOBox, collectionPreviewBox, combinedBox) is associated to a CSS class given by the user in the XML Layout , a generated CSS ‘col1’, ‘col2’ identifying the column position, and a CSS Class with the usertype of the collection being displayed.
Mapping between CSS Classes and component structure
When using the mode columnCount=’-1’, you need to specify in the CSS the width of the collection columns.
E.g.
.collectionListBox.horizontalBox table td.horizontalColumn { width: 307px !important;
}
collectionPreviewBox
OVERVIEW
The collectionPreviewBox displays the N first products of a collection.
Example with autoRollingTimer=’-1’
ATTRIBUTES DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| cssName | #IMPLIED | |
| mode: collectionPreviewBox 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/page | #IMPLIED | |
| heightPercent: percentage of occupancy in the total height of the container/page | #IMPLIED | |
| autoSize | on / off |
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| hzAlignment: gives the horizontal alignment of the box in its container/ page | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the box in its container/ page | up / down / middle / distributed | |
| productCount: max nb of products | #IMPLIED | |
| autoRollingTimer: automates the rolling of products (in ms the elapsed time to roll from 1 product to another one). If not specified, the user has to click to switch from a product to another one If =’-1’, then the products are displayed on 1 column. | #IMPLIED | |
| productUserType: userType of the items to be displayed in the box. | “*” any userTypes or a list of comma separated userTypes | |
| showCollectionDescr: shows the collection description as a title of the box. | on / off | |
| linkedAction | The linkedAction is launched when the end user clicks on the collection description Authorized linked actions: ACTIVATE_CURRENT: onClick, the end user is redirected to the corresponding collectionPage OPEN_FLYER: onClick, a rmoFlyer of the corresponding collection is opened. | linkedAction |
| itemSheet | itemSheet |
XML Sample
<collectionPreviewBox mode="on" cssName="collectionPreviewBox" widthPercent="100"
heightPercent="75" hzAlignment="left" vtAlignment="up" productUserType="*" productCount="5" autoRollingTimer="5000" autosize="off" framedBox="off"> <itemSheet
...> </itemSheet> </collectionPreviewBox>
VISUAL IDENTITY
Each box is associated to a CSS class given by the user in the XML Layout.
collectionTabs
OVERVIEW
The collectionTabs is another way of displaying a collection menu as well as a subset of the included products. Tabs can be positioned horizontally or vertically (accordion).
Example of horizontal collectionTabs:
Example of vertical collection Tabs:
For each collection included in the current one, a tab is generated. Each tab contains a list of itemSheet (one itemSheet is created per product in the collection of the tab)
By default the first tab is expanded.
ATTRIBUTES DETAILS
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| mode: collectionTabs 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 | |
| autoSize: (Cf. Appendix C – UI brick positioning) | on / off | |
| hzAlignment: gives the horizontal alignment of the productTabs in its container | left / right / center / justified | |
| vtAlignment: gives the vertical alignment of the productTabs in its container | up / down / middle / distributed | |
| tabPosition: selection of the tabs layout (horizontal or vertical) | horizontal / vertical | |
| titleTranslationName: collectionTabs area title | #IMPLIED |
| SUB -ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| collectionUserType: user type of the collections to be displayed. | “*” any userTypes or a list of comma separated userTypes | |
| productUserType: user type of the products to be displayed. | “*” any userTypes or a list of comma separated userTypes | |
| productCount: max nb of products per tab | #IMPLIED | |
| columnCount: nb of columns in each tab #IMPLIED | ||
| itemSheet | itemSheet |
XML Sample
<collectionTabs mode="on" cssName="collectionTabs" widthPercent="98" heightPercent="100" hzAlignment="left" vtAlignment="up" autosize="on" productUserType="*" collectionUserType="*" tabPosition="vertical" titleTranslationName="collectionTabs.title" productCount="5">
<itemSheet .../>
</collectionTabs>
Visual Identity
It is possible to modify the background of the each tab when the tab is ‘On’ or ‘Off’