IBM WebSphere Commerce Version 7 Feature Pack 2

IBM WebSphere Commerce Version 7
Feature Pack 2
Coshopping
2011 IBM Corporation
This presentation covers the coshopping feature that is included in the IBM WebSphere
Commerce Version 7 Feature Pack 2.
Coshopping_IEA.ppt Page 1 of 33
Agenda
What is coshopping?
Overview of features of coshopping
Troubleshooting
2 Coshopping 2011 IBM Corporation
The presentation will cover an overview of what is coshopping and then go into more
details of the features within coshopping.
Section
What is coshopping?
The next few slides will cover what coshopping is, what the high level features are of
coshopping and how you install and configure coshopping.
What is coshopping?
Coshopping enables two shoppers within their own browser to shop together
explore a store
take control of a session
highlight web page elements
view products
chat about products
Coshopping provides real-time synchronization of the web browsers of two users to create a
single collaborative shopping session controlled by a single user
Individual privacy and security preferences
Links that reveal customer sensitive information are blocked during coshopping
Highlight of the personalized content in coshopping is disabled
The purpose of the coshopping feature is to enhance your experience by providing the
ability to browse and shop together with a friend online. In coshopping, both shoppers
operate separate browsing sessions with individual privacy and security preferences.
Access to the personalized content of the shopping partner in coshopping is disabled.
The chat and highlight features are provided to facilitate collaboration. Only two shoppers
are allowed in a collaboration session.
Coshopping example
Two people chatting using instant messaging, User A and User B, both browsing the same furniture store
website
Both looking at couches
User A clicks coshopping option in the website
Coshop widget provides a URL to User A which she instant messages to User B
User B enters the URL into his web browser
Collaboration dialog window opens for User Bs own browser
User A selects the particular couch she wants to look at. She is the leader so User Bs browser page
follows User A. User B is viewing the same page as User A now
User A points out the cost of the couch by highlighting the cost in the page, User Bs page is highlighted
then too
Both users A and B agree that the couch is what they need
Coshopping can be a valuable tool added to a website and can be used to allow two
parties to view a web page together.
An example of when this can be applied, is when two people are chatting using instant
messaging while they are both browsing the same furniture store website.
They are both looking at couches on the website deciding which one to buy. User A clicks
on the coshopping option in the web page. The coshop widget generates a URL to pass to
user B in the coshop session to kick off the collaboration dialog window. User A then
passes the generated URL to user B by way of an instant message. User B enters the
provided URL into his web browser address input field, and the two users are connected in
a coshopping session using the collaboration dialog window. User A navigates the session
to show user B a particular couch. When they are both looking at the couch on their own
browser session, user A highlights the price in the page and User Bs page will then
indicate where User A highlighted. Both users agree that this is the couch they want to
get.
Coshopping based on Feature Pack for CEA
Coshopping builds on the Cobrowse widget that is packaged with the IBM WebSphere Application Server
V7 Feature Pack for Communication Enabled Application (CEA)
Coshopping uses Representational State Transfer (REST) services to synchronize each browser to the
web page of the initializing shopper
Coshopping reuses Java-based skills by hiding communications complexity through REST interfaces
(widgets)
Coshopping is based on the IBM WebSphere Application Server V7 Feature Pack for
Communication Enabled Application (CEA). The CEA RESTful services are used for
communication between two shoppers. These services synchronize each browser to the
web page of the shopper who initiated the coshopping session. Coshopping reuses Java-
based skills by hiding communications complexity through REST interfaces (widgets). The
coshop widget builds upon existing store assets and the co-browse widget that is
packaged with the Feature Pack for CEA.
Getting coshopping working within the Madisons store
1. Install Feature Pack 2 and Fix Pack 2

2. Enable Feature Pack 2 starter store enhancements
3. Install WebSphere Application Server Communications Enabled Applications
Use Installation Manager to install the Feature Pack for CEA V1.0.0.7
Apply iFixes (currently PM13321 is needed)
Augment your existing profile
Configure the WebSphere Commerce Server (enable CEA)
Integrate the CEA Dojo library with the WebSphere Commerce EAR file
4. Publish the Madisons FEP starter store
5. Publish the MadisonsEnhancements.sar file
6. Select coshopping store function feature
*Note these instructions are for a non-cluster environment
This slide outlines the steps needed to get coshopping working within the Madisons store
on a non-cluster environment. The steps here are in more detail in the WebSphere
Commerce Information Center. The high level steps include installing both the Feature
Pack 2 and Fix Pack 2 for WebSphere Commerce. You then need to enable the starter
store enhancements. Since coshopping relies on the Feature Pack for CEA, you need to
use the Installation Manager to install the Feature Pack for CEA and apply the iFixes. After
installation of the feature pack, you will need to augment your existing profile and enable
CEA within the WebSphere Commerce Server (you can use the WebSphere Application
Server administration console to do this). Since coshopping relies on Dojo, you need to
integrate the CEA dojo library with the WebSphere Commerce EAR file. To apply
coshopping for the Madisons store be sure you publish both the Madisons FEP starter
store and Madisons enhancements store archive. Finally, you need to select the
coshopping store function feature for the Madisons store in the Commerce Management
Center.
Extra installation steps needed for Madisons mobile store
Publish the MadisonsMobile.sar

Publish the MadisonsMobileEnhancements.sar
Copy files from sample folder:
<WCDE_installdir>\components\store-enhancements\samples\MobileCoshop
<WC_installdir>\components\store-enhancements\samples\MobileCoshop
3 folders
css contains css needed for mobile coshop
images contains images needed for mobile coshop
wc contains mobile coshop widgets
Copy all files inside the css and images folders to the css and images folders here:
<WCDE_installdir>\workspace\Stores\WebContent\Madisons\mobile\
<WAS_installdir>\profiles\demo\installedApps\WC_demo_cell\WC_demo.ear\Stores.war\
Madisons\mobile\Stores.war\WebContent\Madisons\mobile\
Copy all files inside the wc folder to
<WCDE_installdir>\workspace\Stores\WebContent\dojo131\wc
<WAS_installdir>\profiles\demo\installedApps\WC_demo_cell\WC_demo.ear\Stores.war\
dojo131\wc
After you have setup coshopping in the Madisons web store, you can enable coshopping
in the Madisons mobile store. You will need to publish the Madisons Mobile starter store
by publishing MadisonsMobile.sar and the MadisonsMobileEnhancements.sar. Then copy
the css, images, and wc files into the Madisons Mobile Store as described above. There is
more detail information on this in the WebSphere Commerce Information Center.
Coshop widget
The coshop widget is the entry point to creating a new collaboration session
The widget generates the collaboration URL which must be sent to another user to start
the collaboration session
The coshop widget is instantiated by way of HTML markup
Coshopping does not require any additional software installation or access to telephony
widgets and communication networks
The coshop widget generates the collaboration URL which must be sent to a friend to start
the collaboration session. The coshopping feature is based on the co-browse widget that
is packaged with the WebSphere Application Server Feature Pack for CEA. The CEA dojo
widgets are extended to provide functionality that is tailored towards WebSphere
Commerce. Coshopping does not require any additional software installation or access to
telephony widgets and communication networks.
Embedding the coshop widget
Add the JavaScript code to import the Dojo Toolkit that is included with the Feature Pack for
CEA
<script type="text/javascript" src="<c:out
value="${staticAssetContextRoot}"/>/ceadojo/dojo/dojo.js"></script>
Add these two style sheet declarations

@import url("Coshop.css");
@import url("CollaborationDialog.css");
The coshop widget is instantiated by way of HTML markup
var url =collaboration.widget.CoshopUtilities.processURL(window.location.href);
this.coshop = new collaboration.widget.Coshop({
joinCollaborationURI: url,
defaultCollaborationUri: url,
hideSendPageButton: collaboration.widget.CoshopUtilities.hideSendPageButton,
hideURLField: collaboration.widget.CoshopUtilities.hideURLField,
startInFollowMeMode: collaboration.widget.CoshopUtilities.startInFollowMeMode
});
To embed this coshop widget into a web page, there are three steps involved. First, you
import the CEA Dojo toolkit into the page using the script declaration. Secondly, you add
the style sheet declarations for the coshop widget. Finally, add the coshop widget to the
page.
Something to note when adding the JavaScript code to import the Dojo Toolkit: if the page
is already using a version of Dojo, see the reference information for multiple versions of
Dojo on a page in the Feature pack for CEA information center documentation to be sure
to add the correct script.
Also, when adding the style sheet declarations, there are two stylesheet declarations you
will need to add. You can override the widget CSS if necessary to match the look of the
page.
Finally, when adding the coshop widget, first note that the widget is instantiated by way of
HTML markup. The processURL basically strips out all the unnecessary parameters from
the current URL. The dojoType is collaboration.widget.Coshop. The coshop template gives
you control of the placements of the action buttons and the invitation link location. It
provides an easy way to customize the look of the page. The template is located in the
coshopping folder inside the WebSphere Commerce dojo folder.
Parameters
hideSendPageButton
Set this to true to hide the send page button
True by default
hideURLField
Set this to true to hide the URL field
True by default
joinCollaborationURI
Generates the invitation link that can be sent to the peer
Needs to be a link to a page that contains the widget and can accept an additional
request parameter
Commonly this is a link to the current page you are adding the widget to
defaultCollaborationUri
Specifies what page to load first when the widget is started
The coshop widget includes parameters to customize your widget. You set the
hideSendPageButton to true if you want to hide the send page button. This parameter is
true by default, therefore, the send page button is not displayed. You set the hideURLField
to true if you want to hide the URL field. This parameter is true by default, therefore, the
URL field is not displayed. The joinCollaborationURI generates the invitation link that can
be sent to the peer. This needs to be a link to a page that contains the coshop widget and
can accept an additional request parameter. This URI is commonly a link to the current
page you are adding the widget to. To configure the default page shown when the
Collaboration Dialog is launched, update the defaultCollaborationUri attribute. The
defaultCollaborationUri can be the current store page the user is browsing.
Parameters continued
startInFollowMeMode
Set this to true to start in follow me mode immediate after the collaboration dialog is
opened
True by default
isClickableCallback
Name of the callback function to execute to determine if the current element is clickable
This is useful to block certain actions from being executed when follow me mode is
enabled
isHighlightableCallback
Name of the callback function to execute to determine if the current element is
highlightable
This slide continues with the parameters you can use with the coshop widget. You set the
startInFollowMeMode to true to start in follow me mode immediately after the collaboration
dialog is opened. This parameter is true by default, meaning the follow me mode is
enabled when the coshopping session starts. If you test out the Madisons store with
coshopping configured, the follow me mode is started and the initiator of the coshopping is
the leader. For coshopping you can customize what elements are clickable or
highlightable. The isClickableCallback is the name of the callback function to execute to
determine if the current element is clickable. This is useful to block certain actions from
being executed when follow me mode is enabled. The isHighlightableCallback is the name
of the callback function to execute to determine if the current element is highlightable.
Section
Overview of features of coshopping
The next few slides will go over features of the coshopping feature.
Starting coshopping
User A clicks on the Coshopping link

from the header in Madisons
A dialog is shown and it asks the User A

to enter the his/her name
A collaboration URL is generated and

displayed within the dialog
In order to start coshopping you click the coshoppng link from the header in Madisons
store. A dialog is shown and it asks you to enter your name. The name is used by that
chat function. The user enters their name and clicks get collaboration link" A
collaboration URL is generated and displayed within the dialog. You should save this URL
so it can be sent to your friend to start the collaboration URL in the future.
Coshopping mode
Once the second shopper receives the coshopping link from the first shopper, he uses it to
launch the store. This creates a coshopping session between the two shoppers. They can
take turns controlling the navigation through the store and can use the built in tools to
highlight portions of the page or start a chat session.
Note that the initiator shopper on the top panel is leading and the second shopper on the
bottom is following, this is indicated at the bottom of each users window.
Options
Back, forward and refresh
Help button
This slide displays the visual toolbar that displays for both the initiator of the coshopping
and the friend of the coshopper. When in coshopping mode you should not use the
browsers back, forward, or refresh buttons, but rather the back, forward and refresh
buttons within the coshopping toolbar. There are icons to initiate following your friend, and
stop following your friend, but still stay in the coshopping session. There is then icons to
initiate a chat, highlight products, get help, and exit the coshopping session.
Mobile coshopping
Same capabilities as web coshopping

New mobile coshopping widgets for Mobile Madisons store
Support iOS 3 and 4.0, and Android 2.1
Reminders
A friend's view is controlled by the initiator regardless of
the friends device being used
If the initiator uses mobile Madisons store their
friend sees the mobile store too
If the initiator is uses web Madisons store their
friend sees the web store too
Coshopping will also work within a mobile store and have the same capabilities as web
coshopping. You can look at the mobile Madisons store to view what coshopping looks like
within a mobile environment. Mobile coshopping is supported on iOS 3 and 4.0, and
Android 2.1. A friend's view is controlled by the initiator of the coshopping session
regardless of the friends device being used. For instance, if the initiator is using mobile
Madisons store for coshopping, the friend will see mobile Madisons store. If the initiator is
using web Madisons store, the friend will see the web Madisons store.
Allowable links/buttons
The list of clickable links during coshopping is defined as an array in

collaboration.widget.CoshopUtilities.js
This array contains IDs of the clickable elements
Regular express can be used for wild card matches
collaboration.widget.CoshopUtilities.clickableLinks = [
".?clickable.?", //any link containing the string clickable
"^WC_BreadCrumbTrailDisplay_link(_[1-9])+", //breadcrumb links
"^WC_CategoriesSidebarDisplayf_links(_[1-9])+",//links left nav
"^WC_CachedHeaderDisplay_links(_[1-9])+", //top categories
".?Add2Compare.?", // add to compare link
"addToCompareLink", // add to compare link in quick info
"WC_SiteMap_link.?", //site map links
You can allow only certain WebSphere Commerce actions to be followed during
coshopping so that the shoppers see the same store content while they coshop. The list of
clickable links during coshopping is defined as an array in
collaboration.widget.CoshopUtilities.js. This array contains IDs of the clickable elements.
Regular expressions can be used for wild card matches. An example array is shown
above, stating that any link containing the string clickable, breadcrumb links, links on the
left navigation of the page, top categories, add to compare link and quick info, and site
map links are all allowed to be clicked during coshopping.
Allow only certain actions to be followed during coshopping
Process to look up if node is clickable

_addOnclickHandlerToIFrame is called after the page is loaded
This function connects all onclick events to the customized click action by executing:
dojo.connect(dojo.doc, "onclick", parent, 'click');
Whenever a user clicks, the widget will call the click function which looks at
collaboration.widget.CoshopUtilities.isLinkClickable() to determine if the node is clickable
If its clickable, the node ID is sent to the peer
There is an exception to this

The store top categories links and top categories headings are not built with <a> tags,
they are dojo widgets
These links cannot be blocked during coshopping
The process to look up if a node is clickable is to call the _addOnclickHandlerToIFrame

after the page is loaded. This function connects all onclick events to the customized click
action. Whenever a user clicks, the widget will call the click function which looks at
collaboration.widget.CoshopUtilities.isLinkClickable() function. This function then looks at
the clickableLinks array, on the pervious slide to determine if the node is clickable. If its
clickable, the node ID is sent to the peer.
There is an exception to this with the store top categories and top category headings.
These links are not built with <a> tags, but are in fact dojo widgets. The drop down menu
itself is a dijit.MenuItems. When each menu item in the top category is clicked, its calling
StoreCommonUtilities.loadLink() function to load the top category link in the browser. For
this reason, the commerce customized click handler in the coshop widget cannot intercept
the click event. Instead, when the top categories links are clicked, an URL event is sent
to the peer.
<DO NOT READ>
{"collaborationData":{"url":"http://hzshen/webapp/wcs/stores/servlet/Category4_10101_101
01_10132_-1_10129_10129_image_0"}} <END DO NOT READ>
With this approach, these links cannot be blocked during coshopping. Similarly, the top
category headings are also dojo widgets. When the headings are clicked,
WCDropDownButtons. _onDropDownClick is invoked. This function is edited to send a
URL event when clicked, therefore, the commerce customized click handler in the coshop
widget cannot intercept the click event making these links non-blockable during
coshopping.
Allow only certain actions to be highlighted during coshopping
The list of highlightable elements are defined in the highlightables array in
collaboration.widget.CoshopUtilities.js
collaboration.widget.CoshopUtilities.highlightables = [
"onlinestore_inventory_status_.?", //product discounts
"Description", //product description tab
"catalog_link", //catalog link
"maHeader", //merchandising association header
"maPrice", //merchandising association price
"price", //price in the product detail page
"listPrice", //list price in the product detail page
"offePrice", //offer price in the product detail page
"WC_CompareProductsDisplay_td_5.?", //price in the compare page
"WC_CompareProductsDisplay_td_7.?", //price in the compare page
"WC_CompareProductsDisplay_td_9.?", //brand in the compare page
];
When an element is clicked to be highlighted, a call is made to CoshopUtilities.isHighlightable()

In the mobile store every node can be highlighted except eSpots
You can allow only certain actions to be highlighted during coshopping. The list of
highlightable elements (the ids of the elements that can be highlighted) are defined in the
highlightables array in collaboration.widget.CoshopUtilities.js. When an element is clicked
to be highlighted, a call is made to CoshopUtilities.isHighlightable() function. This function
then looks at the highlightables array to determine if an element can be highlighted. An
example of the default highlightables array is shown above. This array includes allowing a
user to highlight product discounts, product description tab, catalog links, merchandising
association header and association price, price in the product detail page, list price, and
offer price, and prices and brand in the compare page.
Since the mobile store has a very simple HTML DOM structure and most nodes do not
have IDs, every node can be highlighted in the mobile store except EmarketingSpots.
Section
Troubleshooting
The next few slides will go over in the troubleshooting the coshopping feature.
Things to consider if the coshopping does not work (1 of 2)
Did enableFeature.bat -DfeatureName=store-enhancements run successfully?

Did you installed IBM WebSphere Application Server V7 Feature Pack for CEA 1.0.0.7 and
iFixes?
Did you augment your WebSphere Commerce server profile?
Did you configure the WebSphere Commerce Server?
Be sure you select Enable communications service
Check that the correct SIP_DEFAULTHOST is set for the Virtual host
You can check what the ports are for the SIP_DEFAULTHOST by selecting Servers
> Server Type > WebSphere Application Server > server_name > Ports
If coshopping does not work, here are some steps that you want to be sure were
completed successfully. First did the store-enhancements feature script run successfully?
Did you install the correct level of the Feature Pack for CEA and any needed iFixes? You
can check your Feature Pack for CEA level by doing a versionInfo.bat in the bin directory
of your WebSphere Commerce Server. Did you augment your profile? You can check this
with the ProfileManagement tool for your WebSphere Commerce Server. Did you
configure the WebSphere Commerce Server correctly? Be sure to go into the
administration console and check your settings.
Things to consider if the coshopping does not work (2 of 2)
For runtime did you configure the web server correctly and restart the web server?
You can view the plugin-cfg.xml in Internet Explorer to view the XML file and be sure
there are no errors
Did you integrate the CEA dojo library with the WebSphere Commerce EAR file?
For toolkit did setupCoshopping.bat run successfully?
For runtime did the Coshopping.xml script run successfully?
Did you install Madisons starter store and Madisons starter store enhancements?
Did you select the Coshopping store function in the Management Center Store
Management Tool?
This slide continues with things to consider looking at when coshopping does not work.
For runtime did you configure the web server correctly and restart the web server? Be
sure to be looking at the WebSphere Commerce information center directions on this and
looking over your plugin-cfg.xml file. Did the scripts to integrate the CEA dojo library run
successfully? Did you install both the Madisons FEP starter store and then starter store
enhancements sar? Did you select the coshopping store function in the Management
Center Store Management Tool?
Widget traces
Traces and things to gather

Gather com.ibm.ws.commsvc.*=all: com.ibm.ws.cti.*=all trace on the server
Gather Firebug logs or widget traces
Using Firebug:
Get Firebug here: http://getfirebug.com
If using Firefox install the Firebug plug-in, start Firebug from the Tools menu, re
create the problem, and save the Firebug output
For Internet Explorer edit the code in question and turn on trace
In the HTML or JSP file change the 'false' to true
<script type="text/javascript" src="<c:out
value="${staticAssetContextRoot}"/>/ceadojo/dojo/dojo.js"
djconfig ="parseOnLoad: true, isDebug: false"/></script>
Recreate the problem and save the debug output
If the coshopping seems to be having issues, you can gather traces and information in
Firebug for coshopping. For the WebSphere Commerce Server gather the trace results
when turning on com.ibm.ws.commsvc.*=all: com.ibm.ws.cti.*=all. Install Firebug and
gather the logs and traces when running coshopping. Finally, if you are in Internet Explorer
you can set isDebug to true as shown here within the script code to gather trace output.
Firebug displays ceadojo is missing
In firebug, if you see "ceadojo is missing", that means the ceadojo JavaScript folder is
missing
This means that either the script to integrate the CEA dojo library with the WebSphere
Commerce EAR file failed or
The Feature Pack for CEA installed failed
If you are running firebug and see a ceadojo is missing error, there are 2 things to check.
One be sure that the script to integrate the CEA dojo library with the WebSphere
Commerce EAR file did not fail. Secondly, be sure that the Feature Pack for CEA is
installed and configured correctly.
Create collaboration link does not produce a link
If the create collaboration link does not produce a link and firebug shows this:
Runtime
Check <Uri AffinityCookie="JSESSIONID" AffinityURLIdentifier="jsessionid"
Name="/commsvc.rest/*"/> is in plugin-cfg.xml
Be sure WebSphere Commerce Server is using the right host VH_DEMO

Be sure the SIP_DEFAULTHOST port is added to Environment > Virtual hosts > VH_demo > Host
Alias
Developer
Be sure WebSphere Commerce Server is using the right host WC_default_host
Be sure the SIP_DEFAULTHOST port is added to Environment > Virtual hosts > WC_default_host >
Host Alias
You can check what the ports are for the SIP_DEFAULTHOST by selecting Servers > Server Types >
WebSphere Application Server > server_name > Ports
If while running coshopping the create collaboration link does not produce a link to send to
your friend, be sure to run Firebug. If Firebug shows the error in the capture here, there
are a few things to check. For runtime check that you have edited the plugin-cfg.xml
correctly, you can view this in internet explorer to be sure there are no errors. Be sure that
the WebSphere Commerce Server is using VH_DEMO as the host and be sure that the
SIP_DEFAULTHOST port is added to the Virtual host list. For developer be sure that the
host is set to WC_default_host and that the SIP_DEFAULTHOST ports is added to the
virtual host list. You can check what the ports are for the SIP_DEFAULTHOST by
selecting Servers > Server Type > WebSphere Application Server > server_name > Ports.
Profile unaugmentation
Unaugmented profiles might not function as expected

When uninstalling the feature pack, all CEA profiles are unaugmented during
uninstallation
Profiles are no longer considered valid after unaugmentation and are not supported
It is a good practice to back up their your configuration before installing the product and
augmenting profiles
Logs to gather:
<WAS_HOME>/logs/manageprofiles/*
<WAS_HOME>/logs/install/*
<WAS_HOME>/logs/uninstall/*
<WAS_HOME>/profiles/<profile_name>/logs/*
If you install the Feature Pack for CEA and then go and uninstall the Feature Pack for
CEA, for any reason coshopping will not work and your profile is unaugmented during
uninstallation. Profiles are not valid after unaugmentation and are not supported. It is a
good practice to back up your profile configuration before installing the product and
augmenting profiles. If you are having issues with the state of your profile, some logs to
look at are listed above.
Troubleshooting : Unable to save CEA communications service
settings
Problem
The CEA communications service settings will not save changes when configuring the
WebSphere Application Server
The context root is blank
Solution
When installing CEA, if the user/group used was not the same that was used when
installing the WebSphere Application Server, this issue will occur
Check the WAS_installdir and ensure all folders and files belong to same user: wasuser
and group: wasgrp
If you have the issue that the CEA communications service settings will not save when
editing the CEA panel in WebSphere Application Server, and the context root is blank,
then you need to check the user/group. When installing CEA if the user/group used is not
the same that was used when installing the WebSphere Application Server, you will see
this issue. To correct this, check the WAS_installdir and ensure all folders and files belong
to same user: wasuser and group wasgrp. If the user and group are not the same, make
the appropriate changes and return to configuring the WebSphere Application Server for
CEA communications service.
Troubleshooting: Scrolling in coshopping chat
Problem
The coshopping chat messages that display do not scroll effectively when a shopper
clicks and drags the scrollbar
Solution
Known dojo error
To scroll the chat content click the scroll up and scroll down icons on the scrollbar
When shoppers open the chat feature during a coshopping session, the chat messages
that display do not scroll effectively when a shopper clicks and drags the scrollbar. This
problem occurs because the coshopping chat feature is created using a dojo.dnd.Movable
tag. When creating a dojo.dnd.Movable on a div tag with a fixed height and overflow set to
scroll, clicking and dragging the scrollbar moves the entire div. Clicking and dragging the
scrollbar will not scroll the chat content in a readable manner. To scroll the chat content
click the scroll up and scroll down icons on the scrollbar. There is a Dojo ticket for this
issue.
Troubleshooting: Coshopping dialog displays warning that browsers
are on different pages
Problem
The warning message friend is on a different page displays in the coshopping dialog
when the peer shopper successfully joins a coshopping session
Solution
The warning message displays when the network is slow, you can ignore the message
and wait for the browsers to load the page successfully
When shoppers successfully join a coshopping session, the defaultCollaborationUri is

loaded in the collaboration dialogs of both shoppers. Depending on the network speed, the
page defined in defaultCollaborationUri might finish loading on the browser for one peer
before the other. The widgets constantly polls to check if the browsers are on different
pages. When the browsers are on different pages, the warning message friend is on a
different page displays. For this issue, you can ignore the message and wait for the
browsers to load the page successfully.
Summary
Coshopping enables two shoppers in their own browser to shop together

Coshopping provides real-time synchronization of the web browsers of two users to create a
single collaborative shopping session controlled by a single user
Users can follow each other in a session, highlight elements on a page, and initiate a chat
The coshopping feature included in IBM WebSphere Commerce V7 Feature Pack 2

enables two shoppers in their own browser to shop together. Users can follow each other,
highlight elements on a page, and initiate a chat. The coshopping feature also works with
mobile stores.
References
IBM WebSphere Application Server Feature Pack for Communication Enabled Applications
(CEA):
http://publib.boulder.ibm.com/infocenter/wasinfo/fep/index.jsp?topic=/com.ibm.websphere.ceafep.multiplatform.doc/info/ae/ae/welc_newinreleaseceafp.html
Coshopping in Information Center:

http://publib.boulder.ibm.com/infocenter/wchelp/v7r0m0/index.jsp?topic=/com.ibm.commerce.coshopping.doc/concepts/csmcoshopping.htm
http://publib.boulder.ibm.com/infocenter/wchelp/v7r0m0/index.jsp?topic=/com.ibm.commerce.coshopping.doc/refs/rsmcoshopsiteflow.htm
Installing and implementing coshopping

http://publib.boulder.ibm.com/infocenter/wchelp/v7r0m0/index.jsp?topic=/com.ibm.commerce.coshopping.doc/tasks/tsm_coshop_roadmap.htm
Setting up coshopping for mobile store

http://publib.boulder.ibm.com/infocenter/wchelp/v7r0m0/index.jsp?topic=/com.ibm.commerce.coshopping.doc/tasks/tsminstallcoshopmobile.htm
This page displays a list of coshopping references.
Feedback
Your feedback is valuable

You can help improve the quality of IBM Education Assistant content to better meet your
needs by providing feedback.
Did you find this module useful?
Did it help you solve a problem or answer a question?
Do you have suggestions for improvements?
Click to send email feedback:

mailto:iea@us.ibm.com?subject=Feedback_about_Coshopping.ppt
This module is also available in PDF format at: ../Coshopping.pdf
You can help improve the quality of IBM Education Assistant content by providing
feedback.
Trademarks, disclaimer, and copyright information
IBM, the IBM logo, ibm.com, and WebSphere are trademarks or registered trademarks of International Business Machines Corp., registered in many
jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of other IBM trademarks is
available on the web at "Copyright and trademark information" at http://www.ibm.com/legal/copytrade.shtml
JavaScript, JSP, and all Java-based trademarks and logos are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
THE INFORMATION CONTAINED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE
MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION CONTAINED IN THIS PRESENTATION, IT IS PROVIDED
"AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED. IN ADDITION, THIS INFORMATION IS BASED ON IBMS CURRENT
PRODUCT PLANS AND STRATEGY, WHICH ARE SUBJECT TO CHANGE BY IBM WITHOUT NOTICE. IBM SHALL NOT BE RESPONSIBLE FOR
ANY DAMAGES ARISING OUT OF THE USE OF, OR OTHERWISE RELATED TO, THIS PRESENTATION OR ANY OTHER DOCUMENTATION.
NOTHING CONTAINED IN THIS PRESENTATION IS INTENDED TO, NOR SHALL HAVE THE EFFECT OF, CREATING ANY WARRANTIES OR
REPRESENTATIONS FROM IBM (OR ITS SUPPLIERS OR LICENSORS), OR ALTERING THE TERMS AND CONDITIONS OF ANY AGREEMENT
OR LICENSE GOVERNING THE USE OF IBM PRODUCTS OR SOFTWARE.
Copyright International Business Machines Corporation 2011. All rights reserved.
34 2011 IBM Corporation

IBM WebSphere Commerce Version 7 Feature Pack 2

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

IBM WebSphere Commerce Version 7 Feature Pack 2

Загружено:

Авторское право:

Доступные форматы

IBM WebSphere Commerce Version 7

2011 IBM Corporation

2 Coshopping 2011 IBM Corporation

3 Coshopping 2011 IBM Corporation

4 Coshopping 2011 IBM Corporation

5 Coshopping 2011 IBM Corporation

6 Coshopping 2011 IBM Corporation

1. Install Feature Pack 2 and Fix Pack 2

*Note these instructions are for a non-cluster environment

7 Coshopping 2011 IBM Corporation

Publish the MadisonsMobile.sar

8 Coshopping 2011 IBM Corporation

9 Coshopping 2011 IBM Corporation

<script type="text/javascript" src="<c:out

Add these two style sheet declarations

The coshop widget is instantiated by way of HTML markup

var url =collaboration.widget.CoshopUtilities.processURL(window.location.href);

this.coshop = new collaboration.widget.Coshop({

10 Coshopping 2011 IBM Corporation

11 Coshopping 2011 IBM Corporation

12 Coshopping 2011 IBM Corporation

Overview of features of coshopping

13 Coshopping 2011 IBM Corporation

User A clicks on the Coshopping link

A dialog is shown and it asks the User A

A collaboration URL is generated and

14 Coshopping 2011 IBM Corporation

15 Coshopping 2011 IBM Corporation

Back, forward and refresh

16 Coshopping 2011 IBM Corporation

Same capabilities as web coshopping

17 Coshopping 2011 IBM Corporation

The list of clickable links during coshopping is defined as an array in

".?clickable.?", //any link containing the string clickable

"^WC_BreadCrumbTrailDisplay_link(_[1-9])+", //breadcrumb links

"^WC_CategoriesSidebarDisplayf_links(_[1-9])+",//links left nav

"^WC_CachedHeaderDisplay_links(_[1-9])+", //top categories

".?Add2Compare.?", // add to compare link

"addToCompareLink", // add to compare link in quick info

"WC_SiteMap_link.?", //site map links

18 Coshopping 2011 IBM Corporation

Process to look up if node is clickable

There is an exception to this

19 Coshopping 2011 IBM Corporation

The process to look up if a node is clickable is to call the _addOnclickHandlerToIFrame

The list of highlightable elements are defined in the highlightables array in

"onlinestore_inventory_status_.?", //product discounts

"Description", //product description tab

"catalog_link", //catalog link

"maHeader", //merchandising association header

"maPrice", //merchandising association price

"price", //price in the product detail page

"listPrice", //list price in the product detail page

"offePrice", //offer price in the product detail page

"WC_CompareProductsDisplay_td_5.?", //price in the compare page

"WC_CompareProductsDisplay_td_7.?", //price in the compare page

"WC_CompareProductsDisplay_td_9.?", //brand in the compare page

When an element is clicked to be highlighted, a call is made to CoshopUtilities.isHighlightable()

20 Coshopping 2011 IBM Corporation

21 Coshopping 2011 IBM Corporation

Things to consider if the coshopping does not work (1 of 2)

Did enableFeature.bat -DfeatureName=store-enhancements run successfully?

22 Coshopping 2011 IBM Corporation

23 Coshopping 2011 IBM Corporation