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.
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.
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
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.
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
The customer can easily navigate to the Gift Registry area, and search for their friend's gift registry.
Figure 3. Search for Registry
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
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
The emulator shows this as an elongated screenshot, but the customer sees a scrollable list.
The customer can optionally choose to expand any of the items in the list to see additional product details.
Figure 6. View Product details
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.
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
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.
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.
- Copy all JSPs over to your ConsumerDirect store directory. The directory in the development environment looks like:
<wc_install_dir>\workspace\Stores\WebContent\ConsumerDirect\
- 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
- 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
. - Copy the access control file, PDAAccessControlPolicy.xml, to the xml\policies\xml directory. For example:
<wc_install_dir>\xml\policies\xml\PDAAccessControlPolicy.xml
- Open a DOS prompt and navigate to this directory:
<wc_install_dir>\bin. - Execute the command,
acpload.bat, to load the new policy. - 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
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.
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.
| Description | Name | Size | Download method |
|---|---|---|---|
| Code sample for for this tutorial | iPhoneSampleCode.zip | 47KB | HTTP |
Information about download methods
Learn
-
WebSphere Commerce Information Center V6: Use the Information Center to find comprehensive product documentation.
-
Apple iPhone Causing Upheaval in Cellular Industry: Read this initial press release on the Apple iPhone.
-
Web Development for iPhone: Learn more Web development from the Apple Developer Connection.
-
Optimizing Web Applications and Content for iPhone: Learn more about Web applications from the Apple Developer Connection.
-
Web Page Development: Best Practices: Learn more about best practices from the Apple Developer Connection.
-
iPhone Tester (emulator): See how your existing WebSphere Commerce site looks from the iPhone, using this free emulator.
-
Content adaptation: Learn more about content adaptation for different device formats.
Discuss
- Participate in the WebSphere Commerce discussion forum.
Ross 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 is a Business Solution Architect with the WebSphere Commerce Solution Enablement team at the IBM Toronto Lab, Canada. He has numerous years of experience developing and creating solutions for WebSphere Commerce. He has over a decade of experience developing and designing rich media applications using leading edge technologies.
Comments (Undergoing maintenance)
Table of contents
Local resources
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
