In a recent IBM Exceptional Digital Experience broadcast Sirius Computer Solutions was showcased for architecting the Performance Bike Learning Center. Here is a quick overview of the two main ways in which IBM WebSphere Commerce and IBM WebSphere Portal with Web Content Manager (WCM) were combined for PerformanceBike.com.

The first is the visual integration. The solution keeps Commerce and WCM separate from a middleware perspective: They both sit on their own WebSphere Application Server instance and they are not clustered. So to achieve an integration that didn’t require the IT team to update two designs, we started by removing most of the theme artifacts from Portal. On the Commerce side, we created struts views for the header (logo, promotional elements and the site’s navigation) and footer. We also created a struts view for the design artifacts like CSS and JavaScript files.

Then in the Portal theme, we imported those struts views. Now there is only one set of design artifacts (CSS, JS, image files) to maintain and the look and feel of both sites is consistent. The main navigation is also consistent, so if the Commerce navigation changes, it is automatically updated on the Portal side.

The shopping cart integration is also worth highlighting. The decision to keep both systems separate meant the Learning Center needed its own sub domain. This caveat limited the ability to make AJAX calls between the Learning Center and the main Commerce site. To solve this issue, we used the native AJAX proxy in Portal. The AJAX proxy allowed for sharing of cookies and making AJAX calls between the environments even though they are on different domains.

To request the MiniShopCartDisplay.jsp you need four parameters:

  1. Store ID
  2. Language ID
  3. Catalog ID
  4. Transaction ID

The first three are rather straight forward, but the transaction ID is located in a Commerce cookie: WC_USERACTIVITY_xxxxxxxxxx, where “xxxxx” is the transaction ID. By parsing the transaction ID from this cookie, a request can be made for the cart JSP that retrieves the correct inventory.

Here is some sample JavaScript for parsing the cookie:

function getCookie(c_name, x) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name);
if (c_start != -1) {
c_start = c_start + c_name.length + x;
c_end = document.cookie.indexOf("=", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function cartCookie(){
var c_name = 'WC_USERACTIVITY_';
var x = 11;
var mycookie = getCookie(c_name, x);
var tid = mycookie.substring(",", 10);
var rootURL = location.host;
var cartUrl = "http://my.portal.com/wps/proxy/http/my.commercesite.com/MiniShopCartView?langId=-1&storeId=10052&catalogId=10551&forUserId="; //AJAX Proxy URL to minishopcartview
var cartUrl = cartUrl + tid;
if (tid > 0) {
$.get(cartUrl, function(data) {
$('#cartDiv').replaceWith(data); //ID of the div tag containing the cart
});
}
}

In retrospect, the solution was fairly straight forward to implement, it just took time to figure out what exactly was needed. Knowing about the AJAX Proxy and the Transaction ID cookie can save you time.

Paul Bucalo is a Solutions Specialist with Sirius Computer Solutions.