In this step of the tutorial you will convert a WebSphere Commerce JSP file to work with Commerce Enabled Portal. (The JSP file you will convert is part of the sample code provided in Commerce Enabled Portal tutorials sample code).
In order to convert a WebSphere Commerce file to work with Commerce Enabled Portal, you must add special Commerce Enabled Portal tags to the file, as discussed in Understanding the tags used in Commerce Enabled Portal JSP files.
The JSP file you will convert contains the code to create an e-Marketing Spot. When you have finished all the steps in this tutorial, the e-Marketing Spot will display on the Women's Fashion portlet in the Winston's Commerce Enabled Portal.
To convert the sample JSP file, do the following:
- Ensure you have downloaded the sample code package from Commerce Enabled Portal tutorials sample code.
- After downloading the sample code package, locate the following file: EMarketing.jsp.
- Save the sample EMarketing.jsp to the following location on your WebSphere Commerce development environment machine:
- WCDE_installdir\workspace\Stores\Web Content\Winstons\portal_jsp\ShoppingArea\CatalogSection\CategorySubsection
- If the Commerce Enabled Portal development environment is not already open then open it.
Note: If the Commerce Enabled Portal development environment is already open, you will need to refresh the workspace before you will see the new file.- From the Start menu, select Programs > IBM WebSphere Commerce Developer Enterprise > WebSphere Commerce development environment.
- Start the WebSphere Commerce Test Server.
- At the bottom of the window, click Servers
- Select the WebSphere Commerce Test Server. Right click. From the menu, select Start.
- After the server starts, do the following:
- From the Window menu, select Open Perspective > Web.
- Open the sample EMarketing.jsp file.
- In the Project Navigator, expand Stores > Web Content > Winstons > portal_jsp > ShoppingArea > CatalogSection > CategorySubsection. Open Emarketing.jsp. Emarketing.jsp opens in the main pane.
- Since we want to convert the Emarketing.jsp file for use with the Winstons Commerce Enabled Portal starter store, you must add the following tag near the top of the page. <%@ taglib uri="WCEP.tld" prefix="wcep" %> <wcep:cpinit /> This tag initializes the Commerce Enabled Portal tag library.
- Search the Emarketing.jsp file for any URLs. To search for URLs, check the file for any instances of HREF. (Note: The file should contain one URL).
- When you find the HREF, add the following tag: <wcep:linkencoder> to the start and end of the URL. For example:
<A HREF="<wcep:linkencoder>/webapp/wcs/stores/servlet/ClickInfo?evtype=CpgnClick&mpe_id= <%=eMarketingSpot.getId()%>&intv_id=<%=eMarketingSpot.getCatalogEntries()[i].getInitiativeId()%>&URL= /webapp/wcs/stores/servlet/ProductDisplay&<%=com.ibm.commerce.server.ECConstants.EC_STORE_ID%>= <%=emsCommandContext.getStoreId().toString()%>&<%=com.ibm.commerce.server.ECConstants.EC_PRODUCT_ID%> =<%=eMarketingSpot.getCatalogEntries()[i].getCatalogEntryID()%>& <%=com.ibm.commerce.server.ECConstants.EC_LANGUAGE_ID%>=<%=emsCommandContext.getLanguageId().toString()%> </wcep:linkencoder>">
- Search the file for any images. To search for images, search on IMG. (Note: The file should contain one image).
- When you find the image, add the following tag <wcep:imglink> to the start and end of the image link. For example:
<IMG SRC="<wcep:imglink><%=collateralPath + catalogEntryThumbNail%></wcep:imglink>" - Search the file for any instances of forms. To search for forms, search on Form. (Note: The file should not contain any forms).
- Save your changes. The file is now ready to be used with Commerce Enabled Portal. However, you must complete the rest of the steps in the tutorial before the e-Marketing Spot will display in the Winstons Commerce Enabled Portal starter store.
- Continue the tutorial by completing the steps in Editing the SubCategoryDisplay.jsp file.