OVERVIEW

The cartBox allows reviewing the content of the quote before completing the order process. The cartBox can be included in any catalog or Configurator UI page.

The Qty of each first level line can be modified.

The productCount corresponds to the number of CP and SI lines to be displayed either generally or within the selected folder (if the cartBrowserSticker has been activated)

The cartBox is made of 3 main parts: header, footer, and content.

A quote header and footer for example to display the total price of the configuration and add action

buttons. [In case of a multi-level quote spreadsheet, the quote header can also contain a cartBrowserSticker (and a cartNavigationPathBox) allowing to browse the content of the quote by selecting a folder]

A quote content:

• The level ‘header’ displays the labels identifying each cartBox column
• Then one line is generated per cartLine :
  • The content of the generated line is made of a predefined part and dynamic additional columns
  • Each line can be parameterized depending on the type of line (CP, SI, Folder).
  • It is possible to define the insertion point directly from the line:
    • If the insertion point is activated on a FOLDER line, then the items are added ‘inside’ the folder at the last position.
    • If the insertion point is activated on a SI/CP line, then the items are added ‘below’ the insertion point.

Line (type CP | SI)

ATTRIBUTES DETAILS

SUB -ELTS	ATTRIBUTES	VALUE
	productCount: max number of product to be displayed in the box (in the current folder if cartBrowserSticker is activated)	#IMPLIED
	showProductCount: display the total number of products in the quote (number of line items or line items x Qty).	(cartSticker only) on (displays “$CURRENT_CART.totalNbItems”) / off / $CURRENT_CART. totalNbLineItems
	allowMultipleSelection: activate the ability to select several lines of the cartBox, thus allowing to perform actions (Copy, Cut, etc) on the whole selection at the same time.	on / off (off by default -- deactivated) The selection is made possible thanks to a checkbox on each line or via a global checkbox allowing the selection of all the lines When selecting a checkbox, then the insertion point is activated at the same time. If selecting several checkboxes, then the last line selected is set as the insertion point. When unselecting all lines, then the insertion point is reseted to inside the currently displayed folder
cartHeader	Please check parameterization below.

CARTHEADER / CARTFOOTER ATTRIBUTE DETAILS

CARTCONTENT ATTRIBUTES DETAILS

Reference: For more details regarding the parameterization of the Dynamic Content table, please refer to Dynamic Content.

Each line can be associated to a linkedAction:

CARTLINE	GROUP OF CARTCELLS
actionBox	Identifies the actions to be included in the cartLine:

Tip:

Keyword you can use in the cellExpression attribute of cells or in elements:

• $CURRENT_CARTLINE: allows to access the content of the current Quote Line.

  To retrieve the value of a specific cell, the keyword is concatenated with the name of the quote model column. For example (mapping with the standard Quote Model):

  Price of the product: $CURRENT_CARTLINE.SaPrice

• $CURRENT_CART: allows to access the content of the current quote.

  To retrieve the value of a specific cell, the keyword is concatenated with the name of the quote data.

  Quote Description: $CURRENT_CART.QuoteDescription

• $CURRENT_CART.totalNbItems: allows to retrieve the nb of items in the quote (Nb Lines x Qty).
• $CURRENT_CART. totalNbLineItems: allows to retrieve the nb of line items

Drag and Drop

When used in association with a productListBox, the cartBox can benefit from the capabilities of the dragAndDropPolicy.

If the “ddProducts” attribute of the DragAndDropPolicy is set to “on”, it activates the ability to drag a product from a productListBox in the Catalog and to drop it in the cartbox of the Catalog at any position in the list, including the top position.

This requires a UI design where a productListBox is displayed next to a cartBox. For instance:

Only one product can be dragged and dropped at the same time.

At runtime, just click on the product line and drag it. Drop it in the cartBox will have the same behavior than an "Add to quote" action. Droping the line elsewhere than in the cartBox has no effect.

The droping can only be done in the current folder. If the current folder contains sub-folders, it is not possible to drop the line in these sub-folders. To do so, the user will have to open this sub-folder and drag&drop the product there.

While dragging the product in the cartBox, a line is highlighted between existing lines indicating where the product will be dropped.

Tip:

In the case when the cartBox is visible when adding a product from the Catalog in the Quote, a focus is automatically done on the last added element in the cartBox. This occurs when using either drag & drop capabilities or the Add-To-Cart action.

Example:

XML Sample

<cartBox mode="on" cssName="cartBox" heightPercent="100" widthPercent="70" autosize="on" titleTranslationName="cartSticker.title" allowMultipleSelection=”off”>

<cartHeader>

<actionBox mode="on" cssName="cartStickerActionBox" hzAlignment="center"

vtAlignment="down" widthPercent="100" heightPercent="8" autosize="on">

<action actionName="BACK" alignment="right" resourceName="btnContinueShopping"

translationName="tooltip.continueShopping" url="" cssName=""/>

<action actionName="CLOSE" alignment="right" resourceName="btnOrder"

translationName="tooltip.order" url="" cssName=""/>

</actionBox>

</cartHeader>

<cartContent>

<cartLevel cssName="cartStickerProductLevel" level="header"

collapseable="off">

<cartLine>

<cartCell type="translation" cellTranslationName="cartBox.header

.unitPrice" />

<cartCell type="translation" cellTranslationName="cartBox.header

.quantity" />

<cartCell type="translation" cellTranslationName="cartBox.header

.finalPrice" />

<cartCell type="translation" cellTranslationName="cartBox.header

.action" />

</cartLine>

</cartLevel>

<cartLevel cssName="cartStickerProductLevel" level="others" collapseable="off">

"on" rmoUserType="*">

<cartCell format="monetary" type="expression" cellExpression="$CURRENT_CARTLINE.productPriceCartColumn"/>

<cartCell format="qtySelector" type="expression" cellExpression=

"$CURRENT_CARTLINE.QtyCartColumn"/>

<cartCell format="monetary" type="expression"

cellExpression="$CURRENT_CARTLINE.productPriceCartColumn"/>

<cartCell type="translation" cssName="cellDescrBkd" cellTranslationName="">

<linkedAction actionName="DELETE_CARTLINE" resourceName="btnDeleteCartLine" translationName="tooltip.btnDeleteCartLine" />

</cartCell>

<linkedAction actionName="ACTIVATE_CURRENT" resourceName=""

translationName="tooltip.activatecurrent" />

</cartLine>

<cartLine type="FOLDER" cssName="folderLine" collapseable="on" >

<cartCell type="translation" cellTranslationName=""/>

<cartCell type="translation" cellTranslationName=""/>

<cartCell format="monetary" cssName="cellCartFolder" type="expression"

cellExpression="$CURRENT_CARTLINE.folderTotalPriceCartColumn"/>

<cartCell type="translation" cellTranslationName="">

<linkedAction actionName="DELETE_CARTLINE" resourceName=

"btnDeleteCartLine" translationName="tooltip.btnDeleteCartLine" />

</cartCell>

</cartLine>

</cartLevel>

</cartContent>

<cartFooter>

<customLine cssName="myCssClass">

<cartCell type="expression" cssName="cartStikerPriceCell" cellExpression=

"$CURRENT_CART.totalNbItems" cellTranslationName="cartSticker.footer.total"/>

<cartCell type="expression" format="monetary" cssName="cartStikerPriceCell"

cellExpression="$CURRENT_CART.totalPrice1" />

</customLine>

<actionBox mode="on" cssName="cartStickerActionBox" hzAlignment="right"

vtAlignment="down" widthPercent="100" heightPercent="8" autosize="on">

<action actionName="BACK" alignment="right" resourceName="btnContinueShopping"

translationName="tooltip.continueShopping" url="" cssName=""/>

<action actionName="CLOSE" alignment="right" resourceName="btnOrder"

translationName="tooltip.order" url="" cssName=""/>

</actionBox>

</cartFooter>

</cartBox>

VISUAL IDENTITY

The cartBox is associated to a main CSS class defined in the XML layout file.

Tip:

A CSS class ‘justAdded’ allows to identify which line(s) of the cartBox is (are) the last one(s) to be added during the current CatalogUI/ConfUI session.

A translation is associated to the cartBox

<translation name="cartBox.moreProducts">... {0} products more</translation>

If a NEW_CARTFOLDER action is used from the cartBox, the flyer which is associated to this action uses the following translations:

<translation name="cartBox.action.newFolder.title">Name choice</translation>

<translation name="cartBox.action.newFolder.descr">Please choose a name for

<translation name="cartBox.action.newFolder.ok">Ok</translation>

<translation name="cartBox.action.newFolder.cancel">Cancel</translation>

OVERVIEW

The quote browser sticker (in a stickerBar from the cartBox) allows the end-user to browse the quote folder hierarchy

ATTRIBUTES DETAILS

Example:

XML Sample

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

VISUAL IDENTITY

The cartBrowserSticker is associated to a main CSS class defined in the XML layout file.

Tip:

The following translations are associated to the component:

<translation name="cartBrowserSticker.home"> Home</translation>

<translation name="cartBrowserSticker.title"> Quote Browser</translation>

OVERVIEW

The quote navigation path box allows the end-user to easily retrieve the current folder being displayed in the cartBox

ATTRIBUTES DETAILS

SUB-ELTS	ATTRIBUTES	VALUE
	vtAlignment: gives the vertical alignment of the box in its container/ page	up / down / middle / distributed
	rootResourceName: identifier of the icon associated to the root element	#IMPLIED
actionBox
	Identifies the actions to be included in the cartNavigationPathBox.	actionBox

Example:

XML Sample

<cartNavigationPathBox mode="on" cssName="cartNavigationPathBox"

widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up"

rootResourceName="cartNavigationPathBox.rootImg" autosize="on"

framedBox="off" >

<actionBox mode="on" cssName="cartStickerActionBox" hzAlignment="center"

vtAlignment="up" widthPercent="100" heightPercent="8" autosize="on">

<action actionName="OPEN_FLYER(flyerName=cartBox.actionFlyerNavigationPath

Box)" alignment="right" resourceName="btnOpenActionFlyer"

translationName="" url="" cssName=""/>

VISUAL IDENTITY

The cartNavigationPathBox is associated to a main CSS class defined in the XML layout file.

Tip:

The following translation is associated to the component:

<translation name="cartNavigationPathBox.home">Home</translation>

OVERVIEW

The quote sticker (in a stickerBar) shows a summary of the quote items. It displays the Name, Description and RMO Image of each product added to the quote as well as their Qty and price.

The cartSticker is made of 2 main parts:

• A quote footer for example to display the total price of the quote.
• A quote content with only one level.

For this level, one line is generated per cartLine (type CP or SI):

• The content of the generated line is made of a predefined part and dynamic additional columns
• Each line can be parameterized depending on the type of line (CP, SI, Folder).

Line (type CP | SI)

ATTRIBUTES DETAILS

Reference: The parameterization of the cartSticker is similar to the cartBox. For more details, please refer to cartBox

VISUAL IDENTITY

Tip:

The cartSticker is associated to a main CSS class defined in the XML layout file. A translation is associated to the cartSticker

<translation name="cartSticker.moreProducts">... {0} products more</translation>