WebSphere Commerce Portal V5.4 Solutions

Chapter 7. Create a commerce enabled portal store 291

7.3 Customizing the ITSO B2B CEP store

This section outlines the steps to enable existing JSPs for commerce enabled

portlets in the ITSO B2B CEP store.

Constraints

The JSPs of a commerce enabled portal must be modified to work properly with

the WebSphere Portal. There are several restrictions and constraints you have to

address within the JSPs:

򐂰 JavaScript naming convention

򐂰 Form naming conventions

򐂰 Stripping HTML tags

򐂰 Enable Portal URI

򐂰 Developing commerce enabled portlets

7.3.1 JavaScript naming convention

There is a one-to-many relationship between the WebSphere Commerce Portal

portlets JSPs and the commerce enabled portlets. For example, several Product

Display portlets can be aggregated, each accessing the ProductDisplay.jsp.

Within the JSP, a set of JavaScript elements can be defined. This leads to the

circumstance that the JavaScript code is included multiple times within the

generated HTML output of the portal page, which can create problems for a Web

browser client.

If you are using JavaScript elements in the JSP, ensure that during the

generation process the elements are uniquely defined. This can be solved as

follows:

򐂰 Timestamp approach

Concatenate the JavaScript with a timestamp object to uniquely identify the

JavaScript for the generated portlet.

򐂰 Additional key/value pairs

Pass additional key/value pairs to the JSP (for example, portlet ID).

Concatenate the JavaScript name with the value of the key object to uniquely

identify the JavaScript for the generated portlet.

Note: You can call the Now method from the

com.ibm.commerce.utils.TimestampHelper class to retrieve a timestamp

value.

292 WebSphere Commerce Portal V5.4 Solutions

Timestamp approach

The modifications to enable JavaScript elements across commerce enabled

portlets are done as follows:

1. Open the portal_jsp/include/GetResource.jsp file in a text editor.

2. Add the following statement:

int lTimeStamp = com.ibm.commerce.utils.TimestampHelper.now().getNanos();

3. Save the file.

4. For each JSP, do the following:

a. Open your JSP that contains the JavaScript function.

b. Rename each JavaScript function as seen in Example 7-3.

Example 7-3 Modified submitSearch JavaScript function

function submitSearch<%=lTimeStamp%>(form)

{

<% /* Show products & items if a SKU number is entered.

* (A SKU number is unique in a store)

* Only list items on the result page if 'manufacturer name' or

* 'manufacturer part number' fields are input.

*/ %>

if (form.sku.value !="")

{

form.resultType.value = "3"

}

else if (form.manufacturer.value != "" ||

form.manufacturerPartNum.value != "")

{

form.resultType.value = "1"

}

form.submit()

}

c. Save the JavaServer Page.

7.3.2 Form naming conventions

There is a one-to-many relationship between the WebSphere Commerce Portal

portlet JSPs and commerce enabled portlets. For example, several Search

portlets can be aggregated, each accessing the AdvancedSearch.jsp. Within the

JSP a set of form elements can be defined. This leads to the circumstance that

Note: In order to use the lTimeStamp variable, each portal JSP must

include the include/GetResource.jsp file.

Chapter 7. Create a commerce enabled portal store 293

the generated code includes multiple forms of the same name within the

generated HTML output of the portal page, which can create problems for a Web

browser client.

If you are using form elements in the JSP, make sure that during the generation

process the form elements are uniquely defined. This can be solved as follows:

򐂰 Timestamp approach

Concatenate the form name with a timestamp object to uniquely identify the

JavaScript for the generated portlet.

򐂰 Additional key/value pairs

Pass additional key/value pairs to the JSP (for example, portlet ID).

Concatenate the form name with the value of the key object to uniquely

identify the JavaScript for the generated portlet.

Timestamp approach

The modifications to enable HTML FORM tags across commerce enabled

portlets are done as follows:

1. Open the portal_jsp/include/GetResource.jsp file in a text editor.

2. Add the following statement:

int lTimeStamp = com.ibm.commerce.utils.TimestampHelper.now().getNanos();

3. Save the file.

4. For each JavaServer Page, do the following:

a. Open your JavaServer Page that contains the JavaScript function.

b. Rename each form as follows:

Example 7-4 Modified AdvancedSearchForm HTML <form> tag

<form method="post" action="<%=sPortalURI%>"

name="AdvancedSearchForm<%=lTimeStamp%>">

c. Save the JavaServer Page.

Note: You can call the Now method from the

com.ibm.commerce.utils.TimestampHelper class to retrieve a timestamp

value.

Note: In order to use the lTimeStamp variable each portal JavaServer Page

must include the include/GetResource.jsp file.