BEA ホーム | 製品 | デベロッパ・センタ | support | askBEA
 ドキュメントのダウンロード   サイト マップ   用語集 
検索
e-docs > WebLogic Portal > コマースおよび
キャンペーン ツアー > テンプレートのカスタマイズ例

コマースおよび
キャンペーン ツアー

 前 次 目次 索引 PDFで表示  

テンプレートのカスタマイズ例

ツアーのこれまでのセクションでは、コマース テンプレートの [Add to cart] リンクをクリックすると、WebLogic Portal が shoppingcart.jsp を表示して、チェック アウトするようユーザに促していました。しかし、ユーザが [Add to cart] をクリックするとプロダクト カタログに戻るようにすることで、顧客にショッピングを続けるよう仕向けるビジネス モデルもあり得ます。

wlcs Web アプリケーションに関連付けられた Webflow を修正すれば、[Add to cart] リンクの動作を変更できますが、Webflow を修正する前に、いくらか背景的知識が必要です。ツアーのこのセクションでは、以下の順に話を進めていきます。

 

ステップ 1: [Add to cart] リンクを理解する

WebLogic Portal におけるリンク アンカでは、静的なファイル名を URL として指定するのではなく、Webflow メカニズムを呼び出して遷移先リソースを決定します。 [Add to cart] リンクのリンク アンカ（リスト 6-1 に示す）は、インクルード ファイル <BEA_HOME>/weblogic700/samples/portal/wlcsDomain/beaApps/wlcsApps/wlcs/commerce/catalog/includes/itemdetails.jsp に記述されています。

コード リスト 6-1 [Add to cart] アンカ

 
<%-- 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>

ツアーのこのステップでは次の動作について説明します。

リンク アンカが Webflow を呼び出す仕組み

アンカは <webflow:createWebflowURL> JSP タグを使って、データを Webflow に渡します。

<webflow:createWebflowURL> JSP タグは、以下の 3 つのデータ項目を Webflow に渡します。

こうしたデータを任意の数の Pipeline を通じて送ったあと、Webflow はリンクを解決する URL を返します。

Webflowがリンクを解決する仕組み

<webflow:createWebflowURL> JSP タグがデータを Webflow に送ると、Webflow はリスト 6-2 に示すように、ワイルドカード表示ノードのイベント リストから link.add イベントの sampleapp_order.wf を検索します。

コード リスト 6-2 sampleapp_order.wf での [Add to cart] リンクの指定

 
<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>

この場合 link.add イベントの送り先として示されているのは、sampleapp_order にある addProductItemToShoppingCartIP 入力プロセッサの呼び出しです。そのため、Webflow はリスト 6-3 に示すように、プロセッサ ノード元のリストから addProductItemToShoppingCartIP 入力プロセッサを検索します。

コード リスト 6-3 sampleapp_order.wf での addProductItemToShoppingCartIP 入力プロセッサの検索

 
<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>

addProductItemToShoppingCartIP 入力プロセッサが正常に実行されると、Webflow は addProductItemToShoppingCart Pipeline を呼び出します。Webflow はリスト 6-4 に示すように、sampleapp_order を検索して addProductItemToShoppingCart Pipeline を見つけます。

コード リスト 6-4 sampleapp_order.wf での addProductItemToShoppingCart Pipeline の呼び出し

 
<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>

同様に、addProductItemToShoppingCart Pipeline が正常に実行されると、この Pipeline はデータを addProductItemToShoppingCartTracker という名前の別の Pipeline に送ります。addProductItemToShoppingCartTracker Pipeline が正常に実行されると、次に Webflow は refreshSavedList Pipeline を呼び出します。refreshSavedList Pipeline が正常に実行されると、shoppingcart.jsp が再ロードされます。

 

ステップ 2: [Add to cart] リンクの変更

ユーザから見た [Add to cart] リンクの動作を決定する Webflow の処理を理解したら、それを変更して、顧客をカタログのトップ レベルに導くように指定することができます。

新規ユーザによる商品の購入では、プロダクト カタログのトップ レベルが main.jsp に表示されていたことを思い出してください。ただし、refreshSavedList Pipeline の success イベントを変更し送り先として (shoppingcart.jsp ではなく) main.jsp をロードしても、望みどおりの結果は得られません。これは、main.jsp が Web ブラウザに表示可能な標準 HTML タグではなく、JSP タグで記述されているからです。refreshSavedList Pipeline の success イベントの出力先を変更して直接 main.jsp を表示しようとすると、Web ブラウザには空白のページが表示されてしまいます。

そのようなやり方ではなく、getTopCategoriesIP という入力プロセッサを呼び出すのです。この入力プロセッサは sampleapp_main ネームスペースにあり、プロダクト カタログ内のカテゴリに関するデータを収集して、それを main.jsp に表示します。

getTopCategoriesIP 入力プロセッサの出力先を設定する

Webflow/Pipeline エディタを使用すれば、refreshSavedList Pipeline の出力を getTopCategoriesIP 入力プロセッサに送ることができます。

エディタを使って sampleapp_order.wf ファイルを開き、エンド コネクタを shoppingcart.jsp プレゼンテーション ノードから sampleapp_main_getTopCategoriesIP プロシキ ノードにドラッグして、refreshSavedList Pipeline ノードの success イベントの送り先を移動します。これで、イベント送り先が正しいネームスペースを指すようになります。

 

ステップ 3: 変更の検証

変更内容を sampleapp_order.wf に保存した後、[ツール｜同期] を選択し、E-Business Control Center を使って変更内容を WebLogic Portal サーバに同期させる必要があります。

同期が完了したら、details.jsp で [Add to cart] リンクをクリックして、変更結果を確かめることができます（図 6-1 を参照）。WebLogic Portal サーバを再起動する必要はありません。

図6-1 details.jsp での [Add to cart] のクリック


 

[Add to cart] をクリックすると、WebLogic Portal は、プロダクト カタログのトップ レベルを main.jsp に表示します。

ただし、WebLogic Portal が商品をショッピング カートに追加したことを検証するには、main.jsp から以下のことを実行します。

  1. ヘッダーで [カートの中を見る] をクリックします。

  2. WebLogic Portal からログインの指示があったとき、このツアーの前のいくつかの節で設定したユーザ名とパスワードを入力します。

[カートの中を見る] をクリックすると、WebLogic Portal は shoppingcart.jsp を表示します。 この中にカートに追加された商品が入っています。

ここから先の話

ツアーを続行し、JSP テンプレートで使われるキャンペーン機能とそれを E-Business Control Center で定義する方法を学習するには、サンプルのキャンペーン を参照してください。

 

ページの先頭 前 次