WebSphere Commerce Version 8.0.1.0 or later

Aurora pages modified for CSR Order Comments

Mod Pack 1 (8.0.1.0) introduced the CSR Order Comments feature, which allows a customer service representative (CSR) to add internal comments to a customer's order. If you published either the Aurora B2C or the Aurora B2B stores after you installed Mod Pack 1, the CSR Order Comments feature is enabled by default. Storefront customization is required to implement this feature if your store is based on a store archive that is lower than Mod Pack 1.

For more information about the CSR Order Comments solution, see Add or view order comments.

The following details outline the page modifications that were introduced to enable the CSR Order Comments solution. After you install Mod Pack 1, you can use this information as a reference to help implement the solution on your custom store.

On the storefront, this feature consists of one new page and one new widget (which supports two widget types):
  • CSR Order Summary page
  • OrderComments widget / orderCommentsSlider widget

CSR Order Summary page

The CSR Order Summary page displays order details and comments.
  • Store_archivedir\AuroraStorefrontAssetStore\CustomerService\CSROrderSummaryPage.jsp
The page is accessed by a CSR after they search a customer order from the Customer Service page. Order comments are added or viewed by using the OrderComments widget.

OrderComments widget

Order comments are displayed and updated through the Store_archivedir\Widgets_701\com.ibm.commerce.store.widgets.csr.OrderComments widget. It uses the Dojo InlineEditBox widget, allowing a CSR can add new comments to the order.

The following screen capture illustrates the expanded OrderComments widget:
Order Comment Slider widget

orderCommentsSlider widget

The OrderComment widget supports the input parameter widgetType. If this parameter is left empty, the widget is displayed on the page as a fixed comment. If the widgetType is set to orderCommentsSlider, an Order Comments button appears on the left border of the page. When this button is clicked, the widget slides open, where order comments can be viewed or added.

The following screen capture illustrates the expanded orderCommentsSlider widget:
Order Comment Slider widget

By default, the slider widget is present throughout the entire checkout flow. This solution provides customer service representatives with the ability to capture or review customer comments to improve the customer service experience.

The following checkout pages, in order, are configured to use the slider widget:
  • OrderItemDisplay.jsp - Shopping Cart page
  • OrderShippingBillingDetails.jsp - Shipping and Billing page
  • OrderShippingBillingConfirmationPage.jsp - Order Confirmation page
  • MultipleShipmentSummary.jsp - Multiple shipment order summary page
  • SingleShipmentSummary.jsp - Single shipment order summary page
Note: The slider widget is also present in theOrderDetailDisplay.jsp page. This page is accessed by the CSR when they access a customers account, click Order History, and then click the order number.
All of the widget actions are defined in the following file:
  • Store_archivedir\Widgets_701\com.ibm.commerce.store.widgets.csr.OrderComments\javascript\OrderComments.js
This JavaScript file must be included in all of the JSP pages where either the OrderComments widget or the orderCommentsSlider widget is used.

Widget behavior

By default, both widget types (OrderComments and orderCommentsSlider) share the following storefront behavior:
  • Once an order comment is saved, it cannot be deleted.
  • All order comments display time stamps, in addition to the name of the CSR who logged the comment
  • Each comment has a 3000 character limit.
  • A scroll bar appears if the number of comments increase beyond the page size.
  • The 15 most recent comments are displayed in order.
    You can update this limit by editing the orderCommentsListSize variable, which is defined in the Store_archivedir\Widget_701\Common\EnvironmentSetup.jspf file. Look for the following line of code: 
    • <c:set var="orderCommentsListSize" value="15" scope="request"/>
      Update the value to the number of comments you want to display within the widgets.
      Note: If you modify this setting, the change is applied to all OrderComment and orderCommentsSlider widgets on your storefront.