HotSpotDiagramDisplay Widget

The HotSpotDiagramDisplay widget presents a configured hot-spot diagram in the catalog. Selecting a hot spot opens the linked item’s details, including available image, price, and add-to-cart action.

Create the diagram and its item-linked hot spots in Hot Spot Diagram Maintenance, then associate the diagram with the applicable category or item.

Add the widget to a page

<Control src="LoadWidgetControl.ascx"
    FileLocation="HotSpotDiagramDisplay.html"
    Options="shape: 'circle',
        popupWidth: 300,
        popupHeight: 400" />

The widget uses the diagram identifier supplied by the HSP query-string value by default. Use diagram_ID to select a specific diagram instead.

Widget options

Option	Default	Valid values or format	Effect
diagram_ID String	Not specified	Diagram identifier	Overrides the diagram selected from the page query string.
width Number	Original diagram width	Pixels	Sets the diagram width and proportionally scales its height.
shape String	'circle'	'circle', 'triangle', 'square', 'pentagon', 'octagon', 'star'	Sets the hot-spot overlay shape.
popupWidth Number	300	Pixels	Sets the item-popup width.
popupHeight Number	400	Pixels	Sets the item-popup height.
popupShowTitle Boolean	true	true, false	Controls the popup title bar.
popupShowCloseButton Boolean	true	true, false	Controls the popup close button.
popupCloseOnOutsideClick Boolean	true	true, false	Allows a click outside the popup or the Esc key to close it.
popupModal Boolean	false	true, false	Displays the item popup as a modal window.
addToCartButtonText String	'Add to Cart'	Text	Sets the add-to-cart button label.
addedToCartButtonText String	'Added to Cart'	Text	Sets the add-to-cart status label.
addedToCartMessageTimeout Number	1500	Milliseconds	Sets the success message duration.
addToCartErrorMessageTimeout Number	3500	Milliseconds	Sets the error message duration.

The legacy source also supports CSS-class options for diagram, item, and button elements. Use site styling for appearance changes.

Validate the diagram

1. Open a category or item with an associated hot-spot diagram.
2. Confirm the configured overlay shape appears over each hot spot.
3. Select a hot spot and verify the linked item details match catalog configuration.
4. When available, add the item to the cart and confirm the cart updates correctly.