Implementing mobile WebSphere Commerce

Page 2 of 11  Document options PDF - Fits A4 and Letter 1259 KB (49 pages) Get Adobe® Reader® Sample code My developerWorks needs you! Connect to your technical community Rate this tutorial Help us improve this content

Inspecting the ConsumerDirect store from a mobile device

In this first part of the tutorial, you will browse the ConsumerDirect starter store using a typical browser. These views are then accessed using a mobile device simulator to get an idea of how the standard starter store renders in such a device. This justifies the need to have views specifically for each device type.

View the existing ConsumerDirect search in a standard browser

Before making any modifications to ConsumerDirect, examine the AdvancedSearchView in a typical browser. Do the following to display the ConsumerDirect catalog search page:

1. Start the IBM WebSphere Commerce Developer from your Windows® Start Menu.
2. When the application is started, right-click the WebSphere Commerce Test Server and select Start.
3. When the server is started, open a standard Web browser and enter the following URL in the Address field:

   http://localhost/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp

   
   
4. The ConsumerDirect language selection page appears. Click United States English.
5. The TopCategoriesDisplay page appears (Figure 1).
6. Click ADVANCED SEARCH in the top right of the header.
7. The AdvancedSearchView page appears (Figure 2). In the remaining part of the part of this tutorial, you will modify this view to fit a smaller display resolution.
8. Enter search criteria of "chair" in the "Search for" text box and click the SEARCH button. This takes you to the CatalogSearchResultView (Figure 3). In the remaining part of the part of the tutorial, you will modify this view to fit this mobile device screen.

Figure 1 shows the TopCategoriesDisplay for ConsumerDirect in a standard browser, which will be modified throughout this tutorial to display on a mobile device.

Figure 2 shows the AdvancedSearchView for ConsumerDirect in a standard browser, which will be modified throughout this tutorial to display on a mobile device.

Figure 3 shows the CatalogSearchResultView for ConsumerDirect in a standard browser, which will be modified throughout this tutorial to display on a mobile device.

Back to top

View the existing ConsumerDirect search in a mobile device simulator

Now that you have seen the out-of-the-box (OOB) search view and search results view in a standard browser, you will view these same views in a mobile device simulator:

1. Ensure the WebSphere Commerce Test Server within IBM WebSphere Commerce Developer is started.
2. Open the mobile device simulator you have decided to use in your browser.
3. In the simulator, enter the following URL in the Address field:

   http://localhost/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp

   
   
4. The ConsumerDirect language selection page appears. Click United States English.
5. The Top Categories page appears (Figure 4).
6. Click in the store window, hold and scroll to the right. Click ADVANCED SEARCH in the top header.
7. The AdvancedSearchView page appears (Figure 5). In the remaining part of the part of the tutorial, you will modify this view to fit on a smaller display that would be on a mobile device.
8. Enter a search criteria of "chair" in the "Search for" text box and click the SEARCH button. This takes you to the CatalogSearchResultView (Figure 6). In the remaining part of the part of the tutorial, you will modify this view to fit on a smaller display on a mobile device.

Figure 4 shows the TopCategoriesDisplay for ConsumerDirect without modification on a mobile device simulator in Safari.

Figure 5 shows the AdvancedSearchView for ConsumerDirect without modification on a mobile device simulator in Safari.

Figure 6 shows the CatalogSearchResultView for ConsumerDirect without modification on a mobile device simulator in Safari.

Back to top

	Page 2 of 11