Monday, July 13, 2009

Handling personalized actions in a cobrowsing session

Another scenario to consider with commerce applications is personalized actions for example "Add to Cart", "Add to wishlist" and "Checkout" buttons. In a cobrowsing session it may make sense to block a user from sharing those actions when "Follow-Me' mode is enabled. This way one user adding an item to their shopping cart will not cause the peer to also add the item. This can be accomplished by writing a callback function and then specifying the function name for the isClickableCallback attribute of the CEA widgets:
<div ceadojoType="cea.widget.Cobrowse" joinCollaborationURI="PlantsByWebSphereAjax/cobrowse.html" defaultCollaborationUri="PlantsByWebSphereAjax/index.html" isClickableCallback="cobrowseClickable"></div>
This callback function will be called each time the passive user receives a "Follow me" event from the peer. If the function returns true the information is processed and the click is performed. If the function returns false a warning message is displayed informing the user that the peer's action can not be followed.

The callback function is passed the HTML element that will be clicked and must return a boolean, the application developer can use a number of approaches to determine if the element is clickable . For example in the sample code below we want to disallow the user from clicking the "Add to cart" button:
function cobrowseClickable(node) {
// Summary: Callback function to allow the application to
// determine if a specific node click should be sent to the peer
if (node.innerHTML == "Add to cart" || node.alt == "Add to Cart"){
return false;
return true;
In this example the code checks if either the button text or alt text matches "Add to cart" and if so returns false to denote that this element can not be clicked. For all other elements it returns true.


Post a Comment