Optimizing your WebSphere Commerce online store for Apple iPhone browser clients

This article describes how to use WebSphere® Commerce to provide a targeted storefront for clients using a pervasive device, such as the Apple® iPhone™.

Share:

Ross McKegney, Software Architect, IBM

Ross McKegneyRoss McKegney is a Software Architect with the WebSphere Commerce development organization at the IBM Toronto Lab. He is currently responsible for the architecture of the next generation Web 2.0 based product management line of business tooling. Previously, he was responsible for the WebSphere Commerce SOA components runtime and programming model. In a previous career, he was part of a software development team that developed an application server for mobile applications, and understands first hand the complexities of designing Web applications.



Marco Deluca (madeluca@ca.ibm.com), Solution Architect, IBM

Photo: Marco DelucaMarco Deluca is a Business Solution Architect with the WebSphere Commerce Solution Enablement team at the IBM Toronto Lab, Canada. He brings over ten years of progressive experience to the enterprise software domain. Currently, Marco is responsible for designing and developing solutions for WebSphere Commerce. Additionally, he has over a decade of experience developing and designing rich media applications using leading edge technologies.



19 September 2007

Also available in Russian

Introduction

This article describes a high-level overview of how to leverage your existing investment in WebSphere Commerce to provide a targeted storefront to clients accessing your site from a pervasive device. We use the Apple iPhone released in July 2007 for two reasons:

  • The user interaction innovations centered around the touch-sensitive screen allow for effective Web browsing experience despite the small form factor.
  • The iPhone has a full-featured Web browser, and is designed with an always-on Internet connection in mind, working with hosted Web applications only and not supporting onboard third party applications.

Devices like the iPhone provide an opportunity for retailers to offer relevant targeted information to their customers, and we use a simple example to illustrate this opportunity.

Opportunity

The innovations in the iPhone illustrate broader trends that IBM® has recognized. What is significant about the iPhone is not necessarily the phone itself, but rather the implications to the way we do business now that mobile phones with robust browsers have arrived on the scene. The iPhone is the best example of this, though there are others such as HTC's Wizard (marketed as T-Mobile® Wing, Cingular® 8125, and so on.)

For customers who have participated in briefings with IBM, you may recognize "Information exposes all" as one of the five key technology trends that influence retail in the coming years. This trend states that customers have an increasing demand for information about all aspects of your business, accessible from wherever they are. For retailers, there are opportunities and threats from always-on mobile devices like the iPhone. There are opportunities to provide more and better information to their customers about the product assortment that is available, and targeted promotions. Customers can look for reviews and supplementary information online, as they are browsing the items in your bricks and mortar store. The downside is that customers can browse your store products, and at the same time using their always-on device to compare your prices and assortment with what is offered from your competitors.

With fewer than one million iPhones sold to date, targeting the U.S. market alone, it is difficult to justify an investment in a mobile storefront for this device alone. We see this as indicative of a broader trend, and with 3G and EVDO networks surfacing in the U.S. and abroad, and new smart phones coming to market, there is clearly an increasing demand for content on this form factor. You can imagine a multitude of scenarios where retailers offer targeted experiences to their customers over pervasive devices. Consider extending access to gift registries as an example: friends and family can search the baby registry for the expectant parents, as they are shopping in your bricks and mortar store; the expectant mother and father can make changes to their registry in real-time, as they realize other things they will need.

As a second example, consider a search by SKU product lookup page that lets the user retrieve detailed product specifications, product peer recommendations, and additional rich content, such as videos demonstrating usage. This provides the ability to learn more about the product, without asking a sales clerk for help. It also provides the merchant the opportunity to provide targeted cross-sell and up-sell recommendations. The opportunities are limitless, and are achieved with a minimal investment over and above your existing WebSphere Commerce solution.


Sample storefront

This article provides an example illustrating a WebSphere Commerce storefront presentation targeted to the iPhone Safari browser. The technical details will follow in the subsequent sections. The key point is that this device has a full-featured Web browser, meaning that there are few technical hurdles to overcome for this presentation. It is mainly a user interface design challenge.

For the purpose of this example, we start with the ConsumerDirect sample store from WebSphere Commerce v6.0, with the Gift Center installed. Figure 1 shows the Gift Center shopping flow.

Figure 1. Gift Center shopping flow
Figure 1. Gift Center shopping flow

Scenario overview

The user starts from an iPhone-tailored launch page, clicks the link to take them to the Gift Registry section, and then searches for a friend's gift registry. Once the registry is located, they browse a list of requested items, and optionally browse the product details for each item. This demonstration illustrates a customer browsing a gift registry while being physically present in a store. This exercise focused on illustrating what is possible, with a small amount of effort. This presentation was quickly developed for illustrative purposes.

Sample code for this example is described in Sample code for Gift Registry. This demonstration illustrates the business value of creating a pervasive interface for a gift registry, and shows that the effort is mainly at the user interface layer - leveraging the existing infrastructure assets. We did not have to write any WebSphere Commerce command code to make this scenario work. We simply created alternate JSPs for each of the pages that we wanted to render on the iPhone, and registered them in the WebSphere Commerce Struts configuration. The screenshots used in the illustration below came from an iPhone emulator. Note that these screenshots have been elongated to show the full length of the page. When displayed on the iPhone, these long pages are scrollable.

ConsumerDirect home page

The launch page allows the guest user to easily browse the assortment in the catalog. Large text links help the user to easily navigate to individual products and categories.

Figure 2. ConsumerDirect home page
Figure 2. ConsumerDirect home page

Gift Registry section

The customer can easily navigate to the Gift Registry area, and search for their friend's gift registry.

Figure 3. Search for Registry
Figure 3. Search for Registry

View Registry list

After typing in a search criteria and clicking the search button, the user is provided with a list of matching registries.

Figure 4. View Registry list
Figure 4. View Registry list

View Registry details

When a registry is selected, the user can now scroll through all the requested items. Keep in mind that they are browsing the list of items as they are in the bricks and mortar store.

Figure 5. View Registry details
Figure 5. View Registry details

The emulator shows this as an elongated screenshot, but the customer sees a scrollable list.

View Product details

The customer can optionally choose to expand any of the items in the list to see additional product details.

Figure 6. View Product details
Figure 6. View Product details

Benefits

The key message from this exercise is that an iPhone presence is created at a relatively low cost, as an extension to your existing WebSphere Commerce store. The limiting factor is conceiving the right features to enable the user experience. The ability to browse a gift registry on your phone, while being physically in the store, is a compelling scenario.


Implementing the WebSphere Commerce storefront for the iPhone

With this business scenario in mind, let's explore alternative approaches to implement a secondary user interface for the WebSphere Commerce server for iPhone clients.

Option 1. Struts-based storefront

Produce iPhone ready presentation from your existing store via Struts and JSPs: Given that the iPhone's Safari browser supports cookies and SSL, it is possible for your iPhone customers to browse your current Struts-based Web site without making architectural changes. Customers may have difficulty with the font sizes on your pages (although the iPhone is surprisingly effective at letting you zoom in and out to get site details), and would not see any content that is presented through Flash or other browser plugins. With this in mind, perhaps the simplest way to offer your customers an iPhone storefront is to deploy additional views to your existing store, targeted to the iPhone form factor. You can leverage the same code assets that you use on your existing storefront, and design basic flows through the site that leverage images for navigation (easier to click) instead of text links. Your mobile clients are likely not expecting to get access to everything that your browser clients would see. With some investment, you can provide for them a targeted site offering easy access to information they expect to find from their mobile device. We selected this implementation for the sample above.

Option 2. Mobile gateways such as WebSphere Everyplace Mobile Portal

Front-end your store with mobile gateway to generate device-specific presentation: Mobile gateways enable WebSphere Commerce by presenting themselves to WebSphere Commerce as a browser user, then performing real-time transformations in the gateway into the mobile's required presentation. This is done using a database of hundreds of device profiles, each containing details such as display, input, and other aspects of the device. Examples of mobile gateway providers that already work with WebSphere Commerce are OpenStream and MShift. These gateways are available as a service or as software product. These gateways allow client interactions via:

  • Mobile browser
  • SMS and MMS messaging
  • "Click-to-speak" voice recognition (OpenStream)

You can also use the SMS and MMS "push" methods for marketing campaigns, ship notifications, and other common messages.

Note: If iPhone is enabled via Option 1, then that presentation is used by these gateways as a "generalized mobile UI", which they will then transform to support hundreds of other phone platforms, including iMode®, Symbian®, Blackberry®, and Windows® Mobile 5.


Sample code for Gift Registry

Our considerations in designing the alternate page views for mobile devices like the iPhone ensure that the pages were as streamlined as possible, and that the user experience is effective on the smaller screen. With these considerations in mind, notice that the sample JSPs have the following features:

  • Minimal HTML markup and increased use of style sheets (since HTML needs to be downloaded on every request).
  • Decreased rendered white space in HTML.
  • Less images for design content and smaller images for products.

Additionally, most elements are annotated with ID tags or class names to allow for easy manipulation by third party mobile gateways. As discussed earlier, these pages work on the iPhone's full-featured Safari browser, but may not work on other devices. Once these mobile pages have been created, they are passed through a mobile gateway to allow for pushing the content to other kinds of mobile devices.

The files provided in the sample code are shown in Figure 7.

Figure 7. Code assets for this sample
Figure 7. Code assets for this sample

These include modified Java Server Pages (JSP) files, stylesheet, Struts configuration, and access control policies. All modifications to JSPs that you have on your instance have been documented with these tags:

<%-- Begin:  Modified code for article --%>// code changes ...
<%-- End:  Modified code for article --%>

Javascript methods are injected into key JSP pages to detect when the client is an iPhone. A meta refresh then redirects the page to the new mobile device page. This is suitable for a sample. However, for clients who decide to design their site for mobile support, we recommend adding this logic as a device adapter such that the redirect would occur, regardless of the entry point to the site.

Code prerequisites

You need the following:

  • You have WebSphere Commerce 6.x installed.
  • You have published the ConsumerDirect store model.
  • You have the WebSphere Commerce Gift Center component enabled.

Code setup

  1. Copy all JSPs over to your ConsumerDirect store directory. The directory in the development environment looks like:
    <wc_install_dir>\workspace\Stores\WebContent\ConsumerDirect\
  2. Copy the Struts file, struts-config-ext-pda.xml, to the stores WEB-INF directory. For example:
    <wc_install_dir>\workspace\Stores\WebContent\WEB-INF\ struts-config-ext-pda.xml
  3. Edit the web.xml file to include struts-config-ext-pda.xml. You can find web.xml in:
    <wc_install_dir>\workspace\Stores\WebContent\WEB-INF\web.xml

    .
  4. Copy the access control file, PDAAccessControlPolicy.xml, to the xml\policies\xml directory. For example:
    <wc_install_dir>\xml\policies\xml\PDAAccessControlPolicy.xml
  5. Open a DOS prompt and navigate to this directory: <wc_install_dir>\bin.
  6. Execute the command, acpload.bat, to load the new policy.
  7. Now that you have installed the sample code, restart the server, and browse to the storefront from your iPhone using this URL:
    http://<your_host_name>/webapp/wcs/stores/servlet/ConsumerDirect/index.jsp

Conclusion

This article provided the starting point to deploy an Apple iPhone-enabled storefront for a Web presence. The trend for customers to demand more and better access to product information over their mobile devices is strong and growing. There are innumerable opportunities for innovation in this space, and we look forward to working with our clients to develop these solutions.

Acknowledgements

The authors would like to thank Joe Speed from the WebSphere Commerce technical sales team for reviewing an early draft, and providing valuable additional insights on the use of third party mobile gateways.


Download

DescriptionNameSize
Code sample for for this tutorialiPhoneSampleCode.zip47KB

Resources

Learn

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=256192
ArticleTitle=Optimizing your WebSphere Commerce online store for Apple iPhone browser clients
publish-date=09192007