Customers’ expectations of service, products, price, and delivery are soaring, in part because they are empowered by technology & have almost unlimited access to information. They expect to engage when & how they want -- through physical, digital, and mobile means. A customer experience is not a discrete event or limited to a single channel. They are molded by the total shopping experience with all retailers across all channels. They expect a consistent experience between all the channels they use.
And in order to have such consistent experience in the Commerce Solution, one of approaches would be to embrace Responsive Web design (RWD). RWD enables a shopper to start their shop on the move from a mobile, continue on a PC at work and complete it on a tablet at home without losing any information, having to sign in multiple times or conducting new searches as information is shared across the board.
Web Responsive Design ensures that the same design is used across every platform so users experience a consistent journey. It works by adapting the size of the website to the size of the device, while ensuring all key messages and marketing materials are still prominent and browsing is as easy as ever. Through using one host that’s responsive to how the customer interacts with their business, companies are able to show they care about the user experience thus increasing their conversions.
Responsive web design also solves a number of issues. Designing responsively eliminates the need to create a separate mobile site, saving time and money. It provides users a seamless experience, allowing them to easily access the same information over virtually any device.
Exceptional Digital Shopping Experience (xDSx)
IBM provides many products, tools, and strategies to help organizations to create exceptional digital experiences. IBM WebSphere Portal provides a series of features fundamental to Omni-channel strategy. This article brings special attention to the Integration of WebSphere Commerce with WebSphere Portal using IBM Web Experience Factory and the multi-channel Feature Pack for Web Experience Factory (WEF) 8.0.
WebSphere Commerce REST API
WebSphere Commerce has out of box support for REST services integrating storefronts data and updates. With flexible foundation support, portal applications can include storefronts or extended sites that provide WebSphere Commerce functionality through REST services. Such integrated solution ensures Exceptional Digital Shopping Experience (xDSx) by bridging Portal exceptional digital experiences on to WebSphere Commerce services.
REST services fit in the overall WebSphere Commerce architecture. REST services act as a controller layer between RESTful client applications, such as the sample Android application, and the WebSphere Commerce business logic layer.
WebSphere Commerce REST services are JAX-RS REST services that are built on top of Apache Wink. The implementation classes contain JAX-RS annotations such as @Path, @Produces, @Consumes, @QueryParam, and @PathParam. WebSphere Commerce provide comprehensive REST services for most of its front store operation as below
REST services provide an alternate way of implementing a client-server communication model than SOAP-based web services. This lighter weight, simpler services can be easily adopted by a wide variety of clients. Some examples are discussed later in this presentation. Rather than defining an action verb within the service request as SOAP services do, REST services make use of the existing GET, POST, PUT and DELETE verbs supported by HTTP. The response format back to the client can be any internet media type. Common response types include JSON, XML and HTML.
IBM Web Experience Factory (WEF)
WEF provides Rapid Application Development toolset for building portlets. It empowers web designers & developers with coding generating builders to add both Ajax- and Dojo-based features to the models. These builders provide support for rich user interface elements such as dragging and dropping objects within or across portlets, inline editing of portlet page views, and overlay or popup windows that display additional data as the mouse hovers over a specified region of the page. WEF tooling leverages the IBM WebSphere Portal software capabilities like HTML5, CSS3, Responsive Web Design themes and skins.
For grabbing data and accessing back ends, WEF provides out of the box Data builder including standards-based data sources—such as structured query language (SQL), representational state transfer (REST) application programming interfaces (APIs) and web services—or proprietary back ends—such as SAP® and IBM Domino® software.
Illustration with Store Catalogue Category
In this section, we are going to take one of the REST Service ie Store Catalogue Category as an example to illustrate the integration for xDSe.
REST API : GET /wcs/resources/store/storeid/categoryview/@top HTTP/1.1
This REST services provides all the top level categories and its Meta data which is defined in the WebSphere Commerce Marketing Centre.
Registering Rest API in WEF
We incorporate REST Service Call builder to invoke REST style services and display the results.
Once it is registered, we can run active model in the WEF to test the connectivity and Rest service output
We can use the Service Definition builder to enable the Add Testing Support input in the Testing Support section as follows.
Having the backend data layer established successfully, we can now focus on the UI layer.
Multi-channel Feature Pack for WEF
The multi-channel Feature Pack for IBM Web Experience Factory 8.0 has exciting capabilities which will further shorten the development time of multi-channel applications using WEF. This Feature Pack provides Multi-channel and Responsive UI Support for building omni-channel portlets with a user interface that works well with the WebSphere Portal responsive web design theme which we can leverage on.
These new layouts are designed to work with the new responsive theme for portal and the new Web Experience Factory theme defined in this feature pack. These layouts improve performance, improve ease of use and are easier to customize than the existing data layouts that we provide.
Here is the list of Multi-channel and Responsive UI Support builders along with REST builder for xDSe
We can now, publish the project. WEF allows Publish directly to the development server to test a project or Export as war to move an application to a production environment.
The WCS portlet is designed to be placed anywhere in the portal page for users to view the storefront in the Portal. We recommend placing these on the landing pages.
Here are sample UI of WCS Front Store on WebSphere Portal with Responsive Web Design
Tablet View with overlay style
Tablet View – 2 Columns Listing
Smart Phone Devices - Single Column Listing
A responsive web design is the best method to ensure that your website is useable on nearly every device. This is especially important for ecommerce portal, because you never know how and when your customer will try and make a purchase. From fashion to food to educational resources, a responsive web design is a great way for any online retailer to reach customers anywhere, anytime.
This leads to Exceptional Digital Shopping Experience enabling customers to shop however, whenever, and wherever they want; Match inventory & brand experience.
About the author
Joseph George works with ICS, IBM Software division as Client Solution Professional. He has worked for various web experience based solutions including J2EE/JEE framework, Portal/UI Framework, CMS, Cloud Computing, Social CRM, Business Community Platform, Mobile Web, Banking, Origination - Loans & Credit Cards for the Corporate and Retail industry sector. You can reach Joseph at firstname.lastname@example.org