OVERVIEW

A productFlyer pops up a productBox which aims at displaying all information related to the current product

Reference:

The product flyer can be called from value selectors or dynamic table cell. Provided that the current item linked to the open productFlyer action is a product (SI/CP/CP), the context of the flyer becomes the current item.

Please refer to: How to use Flyers For more details

Warning:

As the OPEN_FLYER action can call all kind of flyers, the names of these flyers have to be unique in the XML file.

ATTRIBUTES DETAILS

VISUAL IDENTITY

Tip

The translation associated to the productFlyer title is dynamically built following the associated

{0} will be replaced on the fly at runtime by the description of the product.

The productFlyer is associated to a main CSS class. The resource associated to the header part of the productFlyer is declared in the XML Layout file.

OVERVIEW

The productBox:

• gives an overview of the currently displayed item (CP/SI/SP) (via an itemSheet module),
• lists its properties (BPSBox module),
• displays the associated multimedia objects (rmoBox module)
• shows associated products (productLinkBox module) – crossSelling, upSelling, etc.
  
  

The layout of the productBox can be organized thanks to combined boxes containing the various modules (itemSheet, productLinkBox, BPSBox, rmoBox, actionBox).

BPSBox, productLinkBox and rmoBox can be displayed as flat simple boxes or in productTabs (horizontally – standard tabs or vertically – accordion).

ATTRIBUTES DETAILS

Example:

XML Sample

<productBox mode="on" cssName="productBox" widthPercent="100" heightPercent="100" autosize="off" hzAlignment="left" vtAlignment="up" productExpression="rootCP" titleTranslationName="productBoxHome.title" titleResourceName="">

<!--Main Part of the product Box -->

<combinedBox mode="on" cssName="myCssClass" autosize="off" widthPercent="80" heightPercent="90" showPanel="on" hzAlignment="left" vtAlignment="middle">

<itemSheet ... >

<!--Cf. itemSheet -->

</itemSheet>

<!--Product Tabs organizing the BPSBox and the Multimedia RMOBoxes -->

<productTabs ...>

<!--Cf. productTabs -->

</productTabs>

</combinedBox>

<!--Right Part of the product Box -->

<combinedBox mode="on" cssName="myCssClass" autosize="off" widthPercent="20" heightPercent="90" showPanel="on" hzAlignment="left" vtAlignment="middle">

<productTabs ...>

<productLinkBox ...>

VISUAL IDENTITY

The productBox is associated to a main CSS class. It is possible to specify a personalized CSS class for each embedded module.

The item sheet gives an overview of the current product (RMO, Description, Price). It can be used in a productBox and a collectionTabs

Tip:

It is possible to customize a linkedAction on the itemSheet.

When the user clicks on the Name, Description, RMOText or RMOImage of the product (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 (such as ‘add to compare’ …)

ATTRIBUTES DETAILS

Tip:

{0} will be replaced on the fly at runtime by the price to be displayed.

NB: If the translation does not contain {0}, translationAlignment attribute is used to position the translation title and price.

Example:

XML Sample

<itemSheet mode="on" cssName="itemSheet" autosize="off" widthPercent="100" heightPercent="50" hzAlignment="left" vtAlignment="up" displayType="description,name" showText="on" showImage="on" rmoUserType="*">

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

<linkedAction actionName="OPEN_FLYER(flyerName=home.rmoFlyer)" resourceName="btnpenRmoFlyer" translationName="tooltip.openRmoFlyer" />

<actionBox mode="on" cssName="actionBox" hzAlignment="left" vtAlignment="down" widthPercent="100" heightPercent="8" autosize="off">

<action actionName="NEXT" alignment="right" resourceName="btnStart" translationName="tooltip.start" url="" />

</actionBox>

</itemSheet>

VISUAL IDENTITY

The Zoom button will be present if an OnZoom image is present on model Side. Mapping between CSS Classes and component structure

OVERVIEW

Used in the productBox, this module displays a table listing the Business Properties of the current product.

Tip:

If the Business Property value is a Business Value (BVAL):

• If a RMO Image (for the given userType) has been attached to the BVAL, the image is displayed and the description of the BVAL is used as a tooltip.
• If no RMO Image is present, the BVAL description is displayed.
  
  
  1. Attributes Details

Example:

XML Sample

<BPSBox cssName="bpsBox" autosize="off" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" userType="*" showBPS="off" titleTranslationName="" />

1. Visual Identity

Mapping between CSS Classes and component structure

OVERVIEW

Used in a productBox, the productLinkBox lists the products linked to the currently displayed item. All type of links can be displayed: CrossSelling, UpSelling or custom links. The content of each line of the displayed table is customizable.

The productLinkBox can be integrated in a productBox via combinedBox or productTab.

ATTRIBUTES DETAILS

A dynamic content table is a CPQ XML template describing the way CPQ UI will build a table whose content mainly depends on the model.

Example of a Dynamic Content table used for the UI rendering of the configuration Breakdown

The summaryContent-confBreakdown (in the summaryBox) is a Dynamic Content table displaying the list of steps and questions answered by the end-user along with the sales script.

For each hierarchical level identified by its type (E.g. ‘header’, ‘rootCP’, ‘nodeCP’ for confBreakdown content, ‘header’, ‘others’ for salesBreakdown ) the structure of the line and its contained cells has to be defined.

Definition:

A cell is the elementary table brick defining:

• Which information has to be retrieved and displayed in the table: information either comes from the layout file (static) or is returned by the engine from the model (dynamic)
• How this information will be displayed (Type of information to be displayed, associated CSS class)

An attribute of the linkContent (or summaryContent in the summaryBox) indicates the total number of columns in the table (‘cellCount’ attribute). Then the space occupied by each cell is determined.

In the following example, the total number of columns for the table is 4.

A table cell can contain one of the following data type:

• Translation: the cell displays a text coming from the Layout file (declared in the section). This text is automatically translated into the runtime language.
  • The value of the attribute cellTranslationName is the identifier of the translation.
• Resource: the cell displays a graphical resource declared in the section. This image is automatically retrieved depending on the runtime language.
  • The attribute cellResourceName contains the identifier of the resource.
• Expression: the cell displays an information retrieved from the model by a Cameleon Process Expression (CPE).
  • The cellExpression can be an absolute CPE or an expression containing an optional keyword (e.g. $CURRENT_MATCHING_ITEM where $CURRENT_MATCHING_ITEM is replaced dynamically at runtime by the CPE of the item being processed).
• Item (only for PartialMatching- summaryContent, linkContent): the cell displays the whole element (retrieved from the model by a CPE) with its RMO, description etc.
  • The attribute cellExpression contains the identifier of the item

    Tip:

    When a linkedAction is used in a cell, some elements are clickable.

    • If the cell is a translation : the translation is clickable
    • If the cell is a resource : the resource is clickable
    • If the cell is an expression: the value of the expression is clickable
    • If the cell is an item: the Name and Description of the product are clickable.

The value of the cell gives the context of the linkedAction, in particular when the action’s goal is to open a RMO/Product flyer.

The following table explains the attributes associated to a cell definition:

Tip:

When the cell contains an ‘expression’ the display of targeted data can be controlled via a specific formatting (Format Attribute - E.g. Monetary, Date etc…)

If no transformation is applied, the value is displayed with respect of its original format.

LINKCONTENT ATTRIBUTES DETAILS

Tip:

Keyword you can use in the cellExpression attribute of cells:

• $CURRENT _ITEM: is replaced at runtime by the CPE of the item(s) returned while browsing the product links.
• $CURRENT_LINK: is replaced at runtime by the CPE of the browsed product link.

  Example:

  XML Sample

  In this example, the link box contains a list of item sheets (cell type="item") representing the linked items.

  <linkContent cssName="myCssClass">

  <level cssName="myCssClass" level="others">

  <line>

  <cell type="item" cssName="productMatchingLevel" cellExpression="$CURRENT_ITEM" rmoUserType="*">

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

  <linkedAction actionName="OPEN_FLYER(flyerName=config.productFlyer)" resourceName="btnOpenProductFlyer" translationName="tooltip.openProductFlyer" />

  </cell>

  </line>

  </level>

  </linkContent>

  
  
  

VISUAL IDENTITY

Mapping between CSS Classes and component structure

OVERVIEW

The productTabs is another way of displaying and organizing the modules (RMO, BPS and productLink boxes) in the productBox

Tabs can be positioned horizontally or vertically (accordion). Example of horizontal productTabs:

Example of vertical productTabs:

ATTRIBUTES DETAILS

The following modules can be integrated in a productTab:

• 1 BPSBox,
• 1 (or several when subTabsMode =’on’) productLinkBox & linkContent,
• 1 (or several when subTabsMode =’on’) RMOBox
• 1 ProductListBox (to list linked products in a produtPage),
• 1 WhereUsedBox

  Example:

  XML Sample

  <productTabs mode="on" cssName="productTabs" autosize="off" widthPercent="98" heightPercent="50" hzAlignment="center" vtAlignment="up" tabPosition="horizontal" titleTranslationName="">

  <productTab mode="on" cssName="productTab" titleTranslationName="productTab.BPSBox" tabContentTranslationName="productTab.tabContentTitle" subTabsMode="on">

  <BPSBox cssName="bpsBox" autosize="off" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" userType="*" showBPS="off" titleTranslationName="BPSBox.title" />

  </productTab>

  <productTab mode="on" cssName="productTab" titleTranslationName="productTab.RMOBox" tabContentTranslationName="productTab.tabContentTitle" subTabsMode="on">

  <RMOBox mode="on" cssName="rmoBox" autosize="off" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" rmoUserType="*" titleResourceName="" titleTranslationName="rmoBox.box1" content="file" contentPosition="vertical" />:

  <RMOBox mode="on" cssName="rmoBox" autosize="off" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" rmoUserType="*" titleResourceName="" titleTranslationName="rmoBox.box2" content="image text file"

  contentPosition="vertical" />

  </productTab>

  </productTabs>

VISUAL IDENTITY

The productTabs and productTab are associated to a main CSS class. Mapping between CSS Classes and component structure

OVERVIEW

A product list box allows to display a list of products:

• contained in a collection
• returned by a guided selling process
• returned as a result of a search process
• linked to a specific product or to the products added to the quote (in that case the type of link to be displayed is specified by the linkType attribute).
• being spare parts of a parent product (inside a sparePartsBox)

Only 1 productListBox can be inserted in a collectionPage, in a needAnalysisPage, in a sparePartsBox, in a productTab or in a searchPage.

Several productListBox can be inserted into a cartPage or a productPage.

This box is refreshed each time

• a needAnalysis filterMethod is executed [in collection and needAnalysisPage]
• a search process returns a result [in the searchPage]
• a hotspot has been selected [in the sparePartsViewerBox]
• the user enters the cartPage

From this box, the end-user can sort the products regarding:

• their Name (or Description) [depending on the first element declared in the displayType attribute]
• BPs on the product and/or the productLink (Visible and flagged as IsLeading) - only in list view (BPs are classified by BPS workspace/name and then by BPs position within a given BPS)
• Price (First declared price)
• Their hotspot IDs [in the sparePartsBox]>Tip:

  The pricing column is generated when at least one tag is present in the XML. If the Business Property value is a Business Value (BVAL):

  • If a RMO Image (for the given userType) has been attached to the BVAL, the image is displayed and the description of the BVAL is used as a tooltip.
  • If no RMO Image is present, the BVAL description is displayed.

He can also activate the filterSticker to retrieve a subset of the displayed products. The end user can also switch from a list to a grid view.

Depending on the context, the productListBox can have some specificities listed below.

1. Standard Collection Product List
   • When used in collectionPage to display a list of contained items
   • Or when used to display the results of a needAnalysis

List view:

Grid View:

1. Variant for the Search Page
   • When used in a searchPage to display the list of resulting items (after a standard or full text search, or a search on product links)

The product list box is able to display the products resulting from the search in a collection of Catalog (standard / advanced / full text search) but also the product breadcrumbs when the search is made from a standard item (search on the product links of a root product)

List view:

Tip:

When a search on linked products is launched [usage in conjunction with the searchLinkedProductsBox], the resulting products are displayed in the product list as well as their ‘productPathes’

For more details, check the following chapter Search process

1. Variant for Product Links
   • When used in a productPage (or cartPage or productTab) to display children of the current item for a specific productLink (linkType attribute defined and linkDirection=’child’)
   • Or when used in a productPage (or cartPage or productTab) to display parents of the current item for a specific productLink (linkType attribute defined and linkDirection=’parent’)

When the productList is used to display linked products, it is possible to display several levels of the product structure (productLinkSubLevel=”on”).

1. Variant for Spare Parts
   • When used in a sparePartsBox (linkType, linkDirection attributes from the layout file are ignored and predefined to linkType=’SpareParts’ and linkDirection=’child’)

Variant 1 - An additional column on the left is generated to allow sorting the list by Hotspot ID as well as selecting a specific hotspot to highlight it in the viewer (It is also possible to use a HOTSPOT action to display a button in the produtRow or Cell).

Variant 2 - Moreover, the productListBox in the SparePartsBox interprets the replacement type of links. If an item which is a spare part of the current item has been superseded, the last replacing item (of the first replacement path) is shown in the list. Moreover, the replacement path can be shown via the productPathBox

E.g.: SI001 has been replaced by SI001c. The productListBox (of the sparePartsBox) of SIA will show SI001c (and optionally the replacement path: <SI001b<SI001a<SI001)

SI002a will not be displayed in the productListBox.

Variant 3 - Finally, the default quantity associated to the ADD_TO_CART action corresponds to the quantity specified on the sparePart link.

Icon conditional display for parts with an exploded view

Tip:

An icon to be displayed on product list lines can be activated in CSS class. This icon is used only for the variant of the productListBox for Spare Parts. When activated, if a given part in the product list also has an exploded view, the icon is displayed on the corresponding line.

For instance:

.productListBox_SP .iconDiagram

{ width: 20px; height: 20px; background: url('../images/btn/btnIconeInfo.png'); background-size: 100% 100%; }

ATTRIBUTES DETAILS

• listView :

In the XML layout file, the listView can contain a productRow.

At run time, one product row is generated per product to be displayed.

• productRow :

The productRow represents a product by displaying its multimedia Image and Text as well as its properties and optionally its prices.

• productPathBox

• gridView :

In the XML layout file, the gridView can contain a productCell.

At run time, one product cell is generated per product to be displayed.

• productCell :
  
  

|Sub -Elts| Attributes| Value| |:|:|:| | |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. | |rmoUserType : userType of the displayed RMOs| #IMPLIED

“*” means any userType |linked

Action| The linkedAction is launched when the end user clicks on the RMO Image, RMOText, Name or Description of the product

Authorized linked actions:

• ACTIVATE_CURRENT: onClick, the end user is redirected to the corresponding productPage
• OPEN_FLYER: onClick, a rmoFlyer of the corresponding product is opened.| linkedAction

|actionBox| Action area within the productCell. | actionBox |

externalFlyer

In List view or Grid view, in the action box, you can add the OPEN_FLYER action referencing an externalFlyer. A custom button is then displayed for each view and clicking on it opens the corresponding external component in the externalFlyer with the parent context as input. For more details on the setup of external components, see External Component

Example:

XML Sample

<productListBox cssName="productListBox" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up"<productListBox cssName="productListBox"

widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" autosize="on" framedBox="on" productCount="5" titleTranslationName="" showBP="on">

<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"/>

<listView mode="on">

<productRow displayType="name, description" rmoUserType="">

<linkedAction actionName="ACTIVATE_CURRENT" resourceName="" translationName="tooltip.activatecurrent" />

</productRow>

<actionBox mode="on" cssName="actionBoxTransparent" hzAlignment="left" vtAlignment="down" widthPercent="100" heightPercent="100" autosize="on">

<action actionName="COMPARE(compareList=compareListID)" alignment="right" resourceName="btnCompareNow" translationName="action.addToCompare" url=""/>

<action cssName="actionBoxHover" actionName="ADD_TO_CART(qty=on, goTo=cartPage)" alignment="right" resourceName="action.addToCart" translationName="action.addToCart" url=""/>

<action cssName="actionBoxHover" actionName="CONFIGURE" alignment="right" resourceName="action.configureNow" translationName="action.configureNow" url=""/>

</actionBox>

</listView>

<gridView mode="on" columnCount="4">

<productCell displayType="name, description" rmoUserType="">

<linkedAction actionName="ACTIVATE_CURRENT" resourceName="" translationName="tooltip.activatecurrent" />

<actionBox mode="on" cssName="myCssClass" hzAlignment="center" vtAlignment="down" widthPercent="100" heightPercent="100" autosize="on">

<action actionName="COMPARE(compareList=compareListID)" alignment="right" resourceName="btnCompareNow" translationName="action.addToCompare" url=""/>

VISUAL IDENTITY

Tip:

The following translations are associated to the component:

<translation name="productListBox.spareParts.replacements">Replacing:

</translation>

<translation name="productListBox.productCount.label"> {0} Products</translation>

<translation name="productListBox.grid.label"> Grid </translation>

<translation name="productListBox.list.label"> List </translation>

<translation name="productListBox.productColumn.label"> Product </translation>

<translation name="productListBox.hotspotColumn.label">Hotspot</translation>

<translation name="productListBox.priceColumn.label"> Price </translation>

<translation name="productListBox.noProductsFound"> No product found.</translation>

On mouse over the color of the line background (in list view) or the cell background (in grid view) changes.

Tip:

A CSS class allows identifying in the productPathBox the non-eligible products (notEligible).

A CSS class identifying the class of the object (SI/CP/SP) is generated on each line or cell of the productList

A CSS class corresponding to the userType of the product is also generated on each line of the productList to allow customizing the UI rendering depending on the userType.

When the product links sub-levels are activated, a CSS class corresponding to the depth in the product structure is generated to allow creating for example an indentation between the lines (e.g. subLine level1 fold1).

OVERVIEW

The filterSticker can be integrated into a productListBox. It allows the end-user to fill criteria to filter the list of products.

Filtering criteria can be:

• Labels (ordered list of distinct labels attached both to the products and to the rootCollection)
• and/or BP values (list of Visible and IsFilterable BPs having their domain obtained by look-up)
• and/or a price

Label area:

• If an RMOImage (‘on’) exists (for the given rmoUserType), the RMOImage is displayed and the description is used as a tooltip
• If no RMOImage exists, only the label description is displayed. Several labels can be selected (Filtering condition: resultingProduct is IN (selectedLabel1 OR selectedLabel2 OR…).

BPs area:

BPs domains are refreshed each time a user selects a criteria. The BP values are represented using:For Simple BPs:

For List BPs:

Pricing area:

This area displays a selector allowing the end-user to filter the products between priceMin and priceMax. (Filtering condition: resultingProduct price is BETWEEN (minPrice, maxPrice)).

By default, the priceMax and priceMin values are retrieved by lookup.

Filtering Process:

The quickFiltering expression built by the filterSticker is a combination of filtering conditions linked by an ‘AND’ operator.

Example of quickFiltering expression:

resultingProduct.BP2_listType CONTAINS_ANY (value1)

AND resultingProduct.BP3_simpleType EQUALS (value2)

AND resultingProduct ISLABELED (selectedLabel)

AND resultingProduct.price BETWEEN (100€;200€)]

AND resultingProduct.BP_Numeric BETWEEN (10;200)]

Each time the user selects/modifies a criteria, other ones are re-evaluated: When clicking on

ClearAll, the quickFilter is reset.

ATTRIBUTES DETAILS

VISUAL IDENTITY

Tip:

The following translations are associated to the component:

<translation name="filterSticker.allLabels">All</translation>

<translation name="filterSticker.price">Price</translation>

OVERVIEW

The sparePartsBox allows to easily browse the spare parts catalog structure. A specific navigation, via the parts schematics (by clicking on hotspots in the interactive viewer), allows to browse complex products structure and breakdown directly from the product page.

The layout of the sparePartsBox allows the sparePartsViewerBox and productListBox to be organized vertically (on 2 columns) or horizontally.

When a user clicks on a hotspot from the viewer, the embedded productListBox is automatically positioned on the corresponding item (which is also highlighted), even if the product list is paginated or if the associated part is in a sub-level.

When a user clicks on the hotspot ID from the productListBox, the viewer is refreshed to highlight all corresponding hotspots in the part schematics.

ATTRIBUTES DETAILS

Example:

XML Sample

<sparePartsBox cssName="myCssClass" autosize="on" widthPercent="100" userType="*" heightPercent="100" hzAlignment="left" vtAlignment="up" titleTranslationName="sparePartsBox.title">

<sparePartsViewerBox cssName="sparePartsViewerBox" autosize="on" framedBox="on" widthPercent="50" heightPercent="100" hzAlignment="left" vtAlignment="up" userType="*"

titleTranslationName="sparePartsViewerBox.title" mouseCanMove="true" mouseCanZoom="false">

<!--...-->

</sparePartsViewerBox>

<productListBox cssName="productListBox" widthPercent="50" heightPercent="100" hzAlignment="left" vtAlignment="up" autosize="on" framedBox="on" productCount="3"

titleTranslationName="productListBoxSpareParts.title" showBP="on" >

<!--...-->

</productListBox>

VISUAL IDENTITY

The sparePartsBox is associated to a main CSS class. It is possible to specify a personalized CSS class for each embedded module.

OVERVIEW

The sparePartsViewerBox allows display a subset (or all) of the parts schematics associated to a standard item. From this viewer, the end-user will be able to

• Select a hotspot to point a specific part of the schema (the productListBox will be refreshed accordingly)
• Zoom/unZoom the views
• Move within a view to target a specific part of the schema
• Display a RMO or ProductFlyer by clicking on an action associated to each hotspot.
  
  

ATTRIBUTES DETAILS

Example:

XML Sample

<sparePartsViewerBox cssName="sparePartsViewerBox" autosize="on" framedBox="on" widthPercent="50" heightPercent="100" hzAlignment="left" vtAlignment="up" userType="*"

titleTranslationName="sparePartsViewerBox.title" mouseCanMove="true" mouseCanZoom="false">

<linkedAction actionName="OPEN_FLYER(flyerName=config.rmoFlyer)" resourceName="btnOpenActionFlyer" translationName="" />

</sparePartsViewerBox>

VISUAL IDENTITY

The sparePartsViewerBox is associated to a main CSS class.

Tip:

The color of the hotspots can be modified by changing the values of the color properties of the following classes which are not real CSS class but

/** STATIC CSS CLASS USED FOR HOTSPOT COLORATION

*************************************************/

/** BE CAREFULL: this css classes are not interpreted by browser but directly by SparePartsView component (due to canvas restrictions).

/** You can use combination of following class :

/**- SparePartsBoxViewer-selected or SparePartsBoxViewer-original (define if color is for unselected or selected hotspot).

/**- isNode : used for hotspot that represent a node (in product list box)

/**- levelXXX: where XXX is the hotspot level in tree (0 is first level).

/** Following samples are OK :

====> default selected color

.SparePartsBoxViewer-selected {

color: rgba(255, 0, 0, 0.5);

}

====> color for selected hotspots on level 1

.SparePartsBoxViewer-selected .level1 {

color: rgba(0, 0, 0, 0.5);

}

====> default color for hotspots (THIS STYLE IS THE ONLY ONE MANDATORY)

.SparePartsBoxViewer-original {

color: rgba(0, 255, 0, 0.5);

}

====> color for nodes hotspots

.SparePartsBoxViewer-original .isNode {

color: rgba(0, 0, 255, 0.5);

}

====> color for hotspots on level1 (first sub level).

.SparePartsBoxViewer-original .level1 {

color: rgba(0, 255, 255, 0.5);

}

====> color for unselected nodes hotspots on root level

.SparePartsBoxViewer-selected {

color: rgba(0, 200, 150, 0.5);

}

.SparePartsBoxViewer-original {

color: rgba(30, 55, 120, 0.5);

}

.SparePartsBoxViewer-background {

color: rgba(255, 255, 255, 1.0);

}

.SparePartsBoxViewer-initial-image {

position:absolute;

top:0;

bottom:0;

margin:auto;

}

OVERVIEW

The whereUsed box in the productPage of the SI 1.2.1 will allow to display this product hierarchy.

Example:

The whereUsed box lists all the product links which are taken into account when building the product link structure. In the example above, the breakdown, spareParts and replacement type of links are used.

<whereUsedBox mode="on" cssName="whereUsedBox" widthPercent="100" heightPercent="100" autosize="on" hzAlignment="left" vtAlignment="up"

On the left part of the whereUsedBox, the end-user will be able to click on a ‘root’ product and then browse the structure from the root product (SIA or B or C), to the currently displayed item (SI1.2.1) by following the different links.

A parameter hiddenLinks allows to hide part of the structure. For example, if hiddenLinks=”replacement’, as the SI1.1 has been replaced by SI1.1a which has being replaced by SI1.1b, only the SI1.1b will appear in the resulting structure:

Warning:

The whereUsedBox is only available when links are defined between standard items (SI). The component does not handle CP and/or SP;

The process to retrieve the root products and create the tree structures is time consuming.

It is not recommended to use the whereUsedBox directly in a product page but to embed it in a flyer or in a productTab to only launch the process when the user clicks on the tab/button.

ATTRIBUTES DETAILS

Example:

XML Sample

<whereUsedBox mode="on" cssName="whereUsedBox" widthPercent="100" heightPercent="100" autosize="on" hzAlignment="left" vtAlignment="up" displayType="name" rmoUserType="*" linkType="Kits,spareParts,replacement" hiddenLinks="" treeNodeWidth="100" treeNodeHeight="50" titleTranslationName="whereUsedBox.title">

<linkedAction actionName="ACTIVATE_CURRENT" resourceName="btnActivate" translationName=""/></whereUsedBox>

VISUAL IDENTITY

The whereUsedBox is associated to a main CSS class.

Tip:

The color of the links and the rectangles can be adjusted depending on the type of the product link.

E.g. to display the Breakdown type of links in Blue :

.whereUsedBox path.link.Breakdown {

stroke: hsl(200, 82%, 58%);

The image associated to the tree structure to launch the linked action is identified by the following ressourceId:

<resource name="whereUsedBox.detailedView"> theme/catalogDesktop/images/whereused/treeViewOpenDetail.png</resource>