bea.com | products | dev2dev | support | askBEA

Download Docs | Site Map | Glossary
Search

Commerce and Campaign Features Tour

Example of Customizing the Templates

In previous sections of the tour, when you clicked the Add to Cart link in the commerce templates, WebLogic Portal displayed shoppingcart.jsp to prompt you to check out. However, your business model may want to encourage customers to continue shopping by returning them to the product catalog after they click Add to Cart.

You can change the behavior of the Add to Cart link by modifying the Webflow associated with the wlcs Web application. Before you modify the Webflow, however, you need some background information. This section of the tour takes you along the following path:

- Step 1: Understand the Add to Cart Link

- Step 2: Modify Add to Cart

- Step 3: Verify the Modification

Step 1: Understand the Add to Cart Link

Instead of specifying a static filename as a URL, link anchors in WebLogic Portal invoke the Webflow mechanism to determine the destination resource. The link anchor for the Add to Cart link (illustrated in Listing 6-1) is in the include file <BEA_HOME>/weblogic700/samples/portal/wlcsDomain/beaApps/wlcsApps/wlcs/commerce/catalog/includes/itemdetails.jsp.

Listing 6-1 Add to Cart Anchor

>     <%-- Add the 'Put in Cart' link --%>

>     <%

>     allParams = HttpRequestConstants.CATALOG_ITEM_SKU + "=" + productItem.getKey().getIdentifier();

>     %>

>     <td align="right" valign="top" width="5%"><a href="<webflow:createWebflowURL event="link.add" namespace="sampleapp_order" extraParams="<%= allParams %>" />">

>       <img src="<webflow:createResourceURL resource="/commerce/images/btn_addcart.gif" />" border="0" alt="Add to Shopping Cart"></a>

>     </td>

This step of the tour describes the following actions:

- How the Link Anchor Invokes Webflow

- How Webflow Resolves the Link

How the Link Anchor Invokes Webflow

The anchor uses the <webflow:createWebflowURL> JSP tag to pass data to Webflow.

Note the following three data items that the <webflow:createWebflowURL> JSP tag passes to Webflow:

- The event type and name. For the Add to Cart link, the event type is link and the name is add.

- The namespace name in which the file that contains the link source resides. For the Add to Cart link, the namespace name is sampleapp_order.

- Any extra parameters that should be included.

After sending this data through one or more Pipelines, Webflow returns a URL that resolves the link.

How Webflow Resolves the Link

When the <webflow:createWebflowURL> JSP tag sends data to Webflow, Webflow searches the sampleapp_order.wf for the link.add event in the event list of the wild card presentation node, as shown in Listing 6-3.

Listing 6-2 The Add to Cart Link in sampleapp_order.wf

>     <wildcard-presentation-origin node-type="jsp">
>        <event-list>

>           ...

>           <event event-name="link.add">
>              <destination namespace="sampleapp_order"
>               node-name="addProductItemToShoppingCartIP" node-type="inputprocessor"/>
>           </event>

>           ...

>         </event-list>
>     </wildcard-presentation-origin>

The destination shown for the link.add event for this case is to invoke the addProductItemToShoppingCartIP Input Processor, which is in sampleapp_order. Therefore, Webflow locates the addProductItemToShoppingCartIP Input Processor in the list of processor node origins, as shown in Listing 6-3.

Listing 6-3 The addProductItemToShoppingCartIP Input Processor in sampleapp_order.wf

>     <processor-origin node-name="addProductItemToShoppingCartIP"
>      node-type="inputprocessor">

>        <node-processor-info
>         class-name="examples.wlcs.sampleapp.catalog.webflow.GetProductItemIP"/>

>        <event-list>
>           <event event-name="success">
>              <destination namespace="sampleapp_order"
>               node-name="addProductItemToShoppingCart" node-type="pipeline"/>
>           </event>
>        </event-list>

>        ...

>     </processor-origin>

If the addProductItemToShoppingCartIP Input Processor executes successfully, the Webflow invokes the addProductItemToShoppingCart Pipeline. Webflow searches sampleapp_order and locates the addProductItemToShoppingCart Pipeline, as shown in Listing 6-4.

Listing 6-4 The addProductItemToShoppingCart Pipeline in sampleapp_order.wf

>     <processor-origin node-name="addProductItemToShoppingCart" node-type="pipeline">
>        		<node-processor-info pipeline-name="addProductItemToShoppingCart"/>
>        		<event-list>
>           			<event event-name="success">
>              				<destination namespace="sampleapp_order"
>               node-name="addProductItemToShoppingCartTracker" node-type="pipeline"/>
>           			</event>
>        		</event-list>

>        ...

>     </processor-origin>

Similarly, if the addProductItemToShoppingCart Pipeline executes successfully, it sends data to another Pipeline named addProductItemToShoppingCartTracker. If the addProductItemToShoppingCartTracker Pipeline is successful, then Webflow invokes the refreshSavedList Pipeline. When the refreshSavedList Pipeline executes successfully, it reloads the shoppingcart.jsp.

Step 2: Modify Add to Cart

After understanding how the Webflow determines the user-visible behavior of the Add to Cart link, you can modify it to direct customers to the top level of the catalog.

Recall from New User Buys a Product, that the top level of the product catalog is displayed in main.jsp. However, changing the refreshSavedList Pipeline's success event to load main.jsp as a destination (rather than shoppingcart.jsp) would not produce desirable results. This is because main.jsp does not contain the standard HTML tags that Web browsers can render. Instead, the file contains JSP tags. If you were to change the output of the refreshSavedList Pipeline's success event to display main.jsp directly, the Web browser would display an empty page.

Instead, you must invoke an Input Processor named getTopCategoriesIP, which resides in the sampleapp_main namespace. This Input Processor gathers data about categories in the product catalog and displays it in main.jsp.

Directing the Output of the getTopCategoriesIP Input Processor

You can direct output from the refreshSavedList Pipeline to the getTopCategoriesIP Input Processor using the Webflow and Pipeline Editors.

Open the sampleapp_order.wf file using the Editor, then move the destination of the refreshSavedList Pipeline Node's success event by dragging the end connector from the shoppingcart.jsp Presentation Node to the sampleapp_main_getTopCategoriesIP Proxy Node. This will point the event destination to the correct namespace.

Step 3: Verify the Modification

After you save your modifications to sampleapp_order.wf, you must synchronize the modifications to the WebLogic Portal server using the E-Business Control Center by choosing Tools —> Synchronize in the menu.

After you have synchronized, you can see the results by clicking the Add to Cart link from details.jsp (see Figure 6-1). You do not need to restart the WebLogic Portal server.

Figure 6-1 Click Add to Cart in details.jsp

When you click Add to Cart, WebLogic Portal displays the top level of the product catalog in main.jsp.

However, to verify that WebLogic Portal added your item to the shopping cart, do the following from main.jsp:

1. Click View Cart in the header.

2. If WebLogic Portal prompts you to log in, enter the username and password you set up in the previous sections of the tour.

When you click View Cart, WebLogic Portal displays shoppingcart.jsp, which contains the item you added to the cart.

What's Next?

To continue the tour and learn about the campaign features that are used in the JSP templates, and how they were defined in the E-Business Control Center, see A Sample Campaign.