User interface widgets

The user interface widgets in the Aurora starter store extend the functionality of available jQuery widgets to create a versatile, customer-friendly store. They add new functionality, changing the appearance and interaction experience in the store.

The Aurora starter store contains the following user interface widgets:

• wc.widgets.Carousel
  The Carousel widget wraps around a third-party plug-in, Owl Carousel. The Carousel widget is used in Content Carousel and Recommendation widgets to display multiple contents that transition from one image to the next. By default, the pagination control that is inherited from Owl Carousel is disabled. WebSphere Commerce generates pagination control with specified pagination buttons.

• wc.widgets.Grid
  The Grid widget is used to display product tables in various pages. The Grid widget helps to easily build a responsive table.

• wc.widget.RefreshArea
  The RefreshArea widget is used to wrap a Document Object Model (DOM) node that is refreshed by replacing the innerHTML property with new content loaded from the server. That is, a refresh area is a section of a page, which is dynamically updated with new content. A refresh area widget is associated with a registered refresh controller that handles listening for events that require this widget to be refreshed.

• wc.widget.ScrollablePane
  The ScrollablePane widget displays a scrolling thumbnail picker that displays product images and details. It provides a scrolling effect for the items or images that are contained within the content of the widget. Each item within the scrollable pane must be in contained in a ContentPane widget. The scrollable pane supports both automatic and manual scrolling of the items that are displayed in the widget.

• wc.widgets.Select
  The Select widget is an extension of the JQuery UI API selectmenu. The Select widget inherits all the functionality from JQuery widget selectmenu and displays a select box to match the overall style of the Aurora starter store.

• wc.widgets.ValidationTextbox
  The ValidationTextbox widget is used as input box with validation function in forms. With ValidationTextbox widget and JQuery datepicker widget, we can input a date by either typing or selecting from a calendar. ValidationTextbox requires wcTooltip widget to display invalid messages.

• wc.widgets.wcTooltip
  The wcTooltip widget is used to display error messages or information when a shopper hovers over an anchored element. wcTooltip is usually anchored on a Document Object Model (DOM) element.

• wc.widgets.WCDialog
  The WCDialog widget is an extension of JQuery UI API dialog and is used to display a pop up window, such as the mini shopping cart on the header, Language/Currency selection box, or quick info pop up box.

Related reference
WebSphere Commerce AJAX framework
AJAX framework