Tablet interactions

Account and checkout flows

The account and checkout flows in the tablet storefront are developed based on the dojox/mobile/tests/test_iPad-Settings.html file by overriding style and adding features to the standard widgets.

Account flows

The starting page for account pages is the MyAccountView.jsp file, which includes two sections.

The navigation section on the left (under My Account), and the details section on the right (under Summary):

The navigation section shows menu items on the left, located in the MyAccountNavigationView.jsp file.

The details section on the right display pages that are assigned to different menu items. The mapping between the items and the JSP files is located in the AjaxMyAccountView.jsp file. It uses the detailViewIndex parameter to determine which page to load.

Each menu item is an instance of the wc.mobile.ListItem Dojo class. The URL attribute defines the JSP file to load in the details section. Once the section is loaded with the defined JSP file, it is cached within the page unless another page is loaded. This behavior can be overridden by the cached parameter. See wc.mobile._ItemBase for more information.

The functionality within the account section is typically managed by JavaScript within the MyAccount.js and Common.js files. A typical flow for functions in this framework is that after an action is completed, it is necessary to either reload the page, or jump to another page once the action is complete. There are functions in the Common.js file created for the purpose of selecting different tabs, for example, selectTab, goBack, and goBackAndSelect.

Checkout flows

The checkout flows are similar to the account flows. The navigation items are disabled so that customers cannot click on certain items before it is necessary. This flow results in a wizard, where customers are only able to navigate forward or backward within the flow.

The starting page for the checkout flow is the Checkout.jsp file. The mapping between the items and the JSP files is located in the Navigation.jsp file.

The functions within the checkout are typically located in the Checkout.js, Common.js and ServicesDeclaration.js files. Most of the actions use AJAX service calls. As a result, most post service actions are located in the ServicesDeclaration.js file.

Communications with WebSphere Commerce

Two mechanisms are used when communicating with WebSphere Commerce: The typical post action, and AJAX service calls. Most AJAX service calls use the framework provided by the Madisons starter store. See WebSphere Commerce AJAX framework for more information.

The timeout amount can be modified using the GLOBAL_TIMEOUT variable in the CommonJSToInclude.jspf file when working with AJAX functions in the ServicesDeclaration.js file.

Dojo 1.7

The tablet storefront requires Dojo 1.7,b5. It uses modified mobile widgets from the dojox.mobile library. The following classes are modified for the tablet storefront: