The WebSphere Commerce Ajax Framework

With the new Aurora store front comes many new and exciting features. One feature I really like is the way the store uses Ajax throughout the user interface. The WebSphere Commerce Ajax Framework is based on Dojo (check out the Dojo Ajax documentation here) and it does a great job in easing the use of Dojo in your store front. You can read more about the framework here in the InfoCenter.

But lets dive on the implementation just a little.

The basic flow of the framework is to define callable actions on the server using the Struts framework. You then define the services in JavaScript, identify areas on the screen that will consume the Ajax calls output, and call the service during an event – like an end user click or mouse over.

You can update business objects or refresh the user interface with a basic service call. A good example in the starter store is the mini-shopping cart popup that displays when an item is added to the cart or when the shopper hovers over the shopping cart area. The dialog appears for a few seconds and then disappears.  Like all dojo types you simply put the declaration in the DIV element:

dojoType=”wc.widget.WCDialog” id=”MiniShoppingCart” relatedSource=”miniCartDiv”>

You can read more about the wc.widget.WCDialog widget here, however, this declaration tells the Dojo subsystem to refresh this DIV area with the shopping cart content. In the following example I show something a little different since the result is a dialog popup and not an on screen refresh using dojoType.

<DIV id=widget_minishopcart onmouseover="javascript:showMiniShopCartDropDown('widget_minishopcart','quick_cart_container','orderItemsListAutoClose');"

The id (widget_minishopcart) ends up being the relativeId and ties the JavaScript call to showMiniSopCartDropDown to the location of the new dialog. Inside of that JavaScript method you make a call to the service to show the popup dialog:

dropDownDlg = new wc.widget.WCDialog({relatedSource: relativeId, x:x1, y:y1, title:dialogTitleElement.innerHTML},pane);

The other interface widgets you might want to check out are:

What other reusable widgets do you think we could create?

Short URL: http://bit.ly/11xzihb

Leave a Reply