OVERVIEW

The selectorBar is a horizontal menu allowing to browse the main steps of the configurable product.

ATTRIBUTES DETAILS

Warning:

It is possible to combine several selectors: the property “parentName” identifies the parent selector in charge of driving the display of tabs contained in the child one.

When an ACTIVATE action/event is fired by the UI or the model, when selector bars are used, the CPQ UI is automatically positioned on the corresponding selectorBar step.

Tip:

When using a Configurable Bundle in your Configuration Process, the CB elements will be automatically used in the selectorBar. Only Selection Groups will be shown as tabs in the selectorBar.

VISUAL IDENTITY

The selectorBar is associated to a main class. The resources associated to the states of the selector bar are declared in the XML Layout file.

• Mapping between CSS Classes and component structure
  
  

  . <-myMainClass>.came'teonMenu'.ElarltemAlterOn_cameleO'JilNew

  ext

  . <myMllinClass>..camet onMe:nu'.ElarlfemAfl:erOn_cameleo:11New a

  Menu tab with active state (onMouse0ver effect)

  
  
  

  Backg,rau11c=:I:<myMainClass>.cam l' omM'.enuBarlt mHover_cameleomNew

  ext = <my ·inClas..s>.cameleo11MenuBa.r'ltem1HOV'e't_eame1eonNe-w-:

  Menu tab with active state (current)

  
  
  
  Ba round: c;myM lnCI s>.cam,eit·eon'M'em1BarltemH0,ver cam.e,!'eonNew:

  Te,xt:= <myMa.lnCr s.s>,cam11l11:onM11111.1Barit11mHover:_cam11leonN' w·.11

  Sub-menu of the selector Bar

  
  
  

  Backgramr1c:I: . <myMalnClass;::,.came'l'eomMen1.Lcamel'eom'N11w

  Text:= <myMalnCl!ass>,cameleonMenultefft.'.cameleonNew a

  selector Bar Arrows (buttons can be active. inactive,. disabled) Navigation buttons wi h acitiive state::
  
  
  
  Narvigation buruons with inactive•stall:e{di,sabled)::
  
  
  

  Navigation bL!lttons with a,c,ijve state (onMouseOver effect):

  
  
  

OVERVIEW

The menuBar allows to browse a catalog and then access the collection/sub-collection.

ATTRIBUTES DETAILS

Example:

XML Sample

<menuBar cssName="menuBarMain" mode="on" name="menuBarID" parentName=""

widthPercent="100" heightPercent="100" autosize="on" hzAlignment="center" vtAlignment="up" showHome="on" showSummary="on" rmoUserType="" menuTabTranslationName="myTabTranslation" showLeaves="off" showNestedRoot="off" keyboradNav paginationMode="on" paginationStep="1" >

<subLevel>

<RMOBox mode="on"cssName="rmoBox"autosize="on"

VISUAL IDENTITY

Each tab and subLevel is identified by a <div>. The cssName and the userType of the element being identified by the tab (and subLevels) are used as CSS classes of the <div>.

A class indicates the state of the tab i.e. on, off, onMouseOver.

Tip:

Sublevel:

The widthPercent of the embedded boxes are calculated based on the width of the whole page. The sublevel is generated if at least 1 sub-Collection is present in the menuBox.

The teaserListBox is generated if at least 1 teaser is present for the given parent collection.

Mapping between CSS Classes and component structure.

OVERVIEW

A menuBox can be used in a subLevel of a menuBar to list the objects that can be browsed under a menu tab:

It can also be used in a collectionPreviewBox. In that case, each menu entry corresponds to a sub-collection of the current one.

ATTRIBUTES DETAILS

Example:

XML Sample

<menuBox mode="on" cssName="menuBox" autosize="off" widthPercent="20" heightPercent="100" hzAlignment="left" vtAlignment="up" rmoUserType="picto" collectionUserType="*" mainMenuTranslationName="" columnCount="2" depth="1" framedBox="off"/>

VISUAL IDENTITY

Mapping between CSS Classes and component structure

OVERVIEW

The sticker bar allows to gather an ordered list of stickers: preference, cart, search, browser. The sticker bar can be inserted into a hzUpperPart or any combinedBox.

ATTRIBUTES DETAILS

Example:

XML Sample

<stickerBar mode="on" cssName="stickerBar" widthPercent="30" heightPercent="100" hzAlignment="right" vtAlignment="up" autosize="on" >

<searchSticker ... >

</searchSticker>

<preferenceSticker ...>

</preferenceSticker>

<cartSticker ... >

</cartSticker>

</stickerBar>

VISUAL IDENTITY

Each element of the stickerBar is identified by a CSS Class: ‘cartSticker’ for the cartsticker, ‘preferenceSticker’ for the prefererenceSticker, ‘searchSticker’ for the searchSticker.

OVERVIEW

The browser sticker (in a stickerBar) allows the end-user to browse a catalog and then access the collection/sub-collection.

ATTRIBUTES DETAILS

Example:

XML Sample

<browserSticker mode="on" cssName="browserSticker" heightPercent="100" widthPercent="20" autosize="on" titleTranslationName="browserSticker.title" collectionUserType="*" />

VISUAL IDENTITY

The browserSticker is associated to a main CSS class defined in the XML layout file. Mapping between CSS Classes and component structure

The following translation is associated to the component:

<translation name="browserSticker.title"> Browse</translation>

OVERVIEW

The vertical selector allows to hierarchically browse the configurable product structure or the catalog structure.

By default, in a catalog context, the first menu entry is expanded up to the 2nd sub-level.

ATTRIBUTES DETAILS

Warning:

It is possible to combine a selectorBar (horizontal) and a verticalSelectorBar: the property “parentName” identifies the parent selector in charge to drive the display of tabs contained in the child one.

Example:

XML Sample

<verticalSelector mode="on" name="vtSelector1" cssName="vtSelector" parentName="" widthPercent="29" heightPercent="85" hzAlignment="left" vtAlignment="up" depth="20" titleTranslationName="vtSelector.title" titleResourceName="vtSelctRes" showNestedRoot="on" showLeaves="on" showHome="off" showSummary="off" showStatus="on" autoWrap="on" autoCut="on" autoExpand="2" expandedFolderResourceName="expanded.folder" collapsedFolderResourceName="collapsed.folder" activeFolderResourceName="actFolderRes" autosize="off">

<status statusName="ERROR" statusResourceName="status.error" statusTranslationName="status.error"/>

<status …/>

<folder folderLevel="home" folderResourceName="folderResHome" activeFolderResourceName="" NAFolderResourceName=""/>

VISUAL IDENTITY

The vertical selector is associated to a main CSS class.

The resources associated to the states of the vertical selector are declared in the XML Layout file.

Mapping between CSS Classes and component structure

• Main Layout :
  
  
• Hierarchical Levels :

A CSS class is generated per vertical selector hierarchical level. It allows customizing the background and font of these folders (Both active and inactive state).

• Expanded and collapsed tabs with active (current) state:
  
  

OVERVIEW

1. Standard behavior

The navigation path box allows the end-user to easily retrieve the current location along the configuration process.

1. Specificity for product links

If product links are used in the model, the navigationPathBox allows to display the dependencies between items during the navigation.

Warning:

This traceability is only activated when linked product are displayed via the UI component productListBox

Two representations are available:

1. If the navigationPolicy is not configured (Please refer to the chapter “navigation policy”), the links will not appear in the navigationPathBox. Only products will be displayed:
   1. Do not configure the navigationPolicy
   2. During the navigation, click on a parent product. Its path is displayed in the navigationPathBox
2. Click on a child product from the product page of the parent product. The navigationPathBox displays the path of the child product, within its collection, with no reference to the parent product
3. If the navigationPolicy is configured for your product links, the links will appear in the navigationPathBox:
   1. Configure the navigationPolicy
   2. During the navigation, click on a parent product. Its path is displayed in the navigationPathBox
4. Click on a child product from the product page of the parent product. The navigationPathBox displays the path to the child product, including the product link name
5. This representation can be combined with the linkDirection attribute to display the link in the navigationPathBox in the opposite direction. If linkDirection=”parent”:
   1. First click on the child product
   2. Then click on the parent product

      Tip:

      The translation which is generated in the breadcrumb is controlled by the following translation key :

      <translation name="navigationPath.linkdescr">{1} - {0}</translation>

      Where {1} represents the link description, and {0} the description of the linked product.

      The description of a link can be overridden via the following translations keys: in containing in containing replacing replaced by

      It corresponds to the link description displayed in the navigationPathBox.

ATTRIBUTES DETAILS

Example:

VISUAL IDENTITY

The navigation Path Box is associated to a main CSS class. Mapping between CSS Classes and component structure

OVERVIEW

The rolling selector offers a horizontal scrollable bar to browse a given level of the Catalog. Each element that can be browsed (collection, product) is displayed with its associated RMO Image and actions can optionally be activated.

The rolling selector can be integrated into a collection or a productPage. It can also be used in a GalleryViewer to choose which RMO will be browsed.

Rolling Selector in a productPage

Rolling Selector Vertical mode

Rolling Selector in a collectionPage (with galleryViewer)

ATTRIBUTES DETAILS

Warning:

The Dynamic Cross-Sell linkType could only be used from a Catalog Product page

Example:

XML Sample

<rollingSelector mode="on" cssName="rollingSelector" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" autosize="on" rmoUserType="" itemUserType="*" displayType="description" content="SI,CP" itemCount="10" linkType=”dynamicXsell(methodName=myMethodFromCPQDesigner)” titleTranslationName="rollingSelector.title" framedBox="off" paginationMode="on" oneStepPagination="off">

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="1" resourceName="imgPrice1" resourceAlignment="left" translationName="labelPrice1" translationAlignment="left"/>

<pricing method="CPE.GET(CPE.Settings.Session.PricingMethod[1])" range="2" resourceName="" resourceAlignment="left" translationName="labelPrice1" translationAlignment="left"/>

<linkedAction actionName="ACTIVATE_CURRENT" resourceName=""

VISUAL IDENTITY

The rollingSelector is associated to a main CSS class. Each item tab within the box is customized via secondary classes.

Mapping between CSS Classes and component structure