カスタム商品コンテンツレンダラーの実装
このチュートリアルでは、 CPContentRenderer インターフェイスを実装して、カスタム商品コンテンツレンダラーを追加する方法を示します。
商品コンテンツレンダラーは、商品を表示できるさまざまなウィジェットで、特定の商品タイプの商品詳細を表示するスタイルを提供します。 Liferay Commerceは、シンプル商品用の SimpleCPContentRenderer など、すぐに使用できる商品タイプごとに商品コンテンツレンダラーを提供しています。
概要
サンプルをデプロイする
このセクションでは、商品コンテンツレンダラーをLiferay Commerceのインスタンスで実行する例を示します。 新しいLiferay インスタンスを起動し、以下を実行します。
http://localhost:8080でLiferayへのサインインします。 メールアドレス test@liferay.com とパスワード test を使用してください。 プロンプトが表示されたら、パスワードを learn に変更します。
次に、以下の手順に従います。
-
Acme Commerce Product Content Renderer をダウンロードし、解凍してください。
-
サンプルをビルドしてデプロイします。
noteこのコマンドは、デプロイされたjarをDockerコンテナの
/opt/liferay/osgi/modules
にコピーするのと同じです。 -
Dockerコンテナコンソールでデプロイを確認します。
-
サンプルの商品コンテンツレンダラーが追加されたことを確認します。 ブラウザで
https://localhost:8080
を開き、Liferay Commerceで商品を含む任意のカタログに移動します。 商品をクリックして[商品の詳細]ウィジェットを表示し、ウィジェットの [Configuration] をクリックします。
[Custom Renderer] セクションで、 [Simple] を選択します。 [Simple Commerce Product Type Renderer Key] ドロップダウンで、新しいレンダラー(「Q4F7 Commerce Product Content Renderer」)を選択します。
-
商品を選択すると、新しいレンダラーでは、商品のSKU、価格、在庫状況、在庫数のみが表示されます。
これで、CPContentRenderer
を実装する新しいカスタム商品コンテンツレンダラーを正常に構築およびデプロイできました。
次に、詳細をさらに詳しく見ていきましょう。
サンプルの説明
このセクションでは、デプロイしたサンプルについて確認します。 最初に、OSGi登録用のクラスに注釈を付けます。 次に、 CPContentRenderer
インターフェイスを確認します。 最後に、CPContentRenderer
の実装を完了します。
OSGi登録用のクラスに注釈を付ける
Liferay Commerceが 商品コンテンツレンダラーレジストリ で新しいレンダラーを他のレンダラーと区別できるように、商品コンテンツレンダラーに個別のキーを提供することが重要です。 すでに使用されているキーを再利用すると、既存の関連付けられているレンダラーが上書きされます。
commerce.product.content.renderer.order
プロパティは、CommerceがUIにレンダラをリストアップするために使用する整数値です。 レンダラーは昇順で表示されます。 例えば、 SimpleCPContentRenderer では、このプロパティが最小整数値に設定されているため、シンプルタイプの商品の他のレンダラーはリスト内でこの後に表示されます。
commerce.product.content.renderer.type
プロパティは、このレンダラーがどの商品のタイプに使用できるかを決定します。 この例では、シンプルタイプを使用しているため、レンダラーはUIの[シンプル]カテゴリの下に表示されます。
CPContentRenderer
インターフェイスを確認する
次のメソッドを実装します。
このメソッドは、商品コンテンツレンダラーレジストリ内の商品コンテンツレンダラーに一意な識別情報を提供します。 このキーを使用して、レジストリからレンダラーを取得できます。 すでに使用されているキーを再利用すると、既存の関連付けられているレンダラーが上書きされます。
これは、商品コンテンツレンダラーを説明するテキストラベルを返します。 言語キーでラベルを取得する際のリファレンスについては、 Q4F7CPContentRenderer.java の実装を参照してください。
ここで、商品コンテンツレンダラーのカスタマイズされたビューをレンダリングするコードを追加します。
ビューを定義するには、JSP、Freemarkerテンプレート、Soyテンプレートなど、いくつかの方法があります。 この例では、JSPを使用します。
商品コンテンツレンダラーを完成させる
商品コンテンツレンダラーは、定義およびレンダリングするカスタムビューで構成されます。 以下を行います。
モジュールにServletContext
を構成する
バンドルのシンボル名を使用してServletContext
を定義し、モジュールでJSPを見つけられるようにします。
osgi.web.symbolicname
に設定した値は、 bnd.bndファイル のBundle-SymbolicName
の値と一致します。 これらの値は、JSPを見つけるためにServletContext
と一致する必要があります。また、
ServletContext
が正しく生成されるように、bnd.bndファイルでWeb-ContextPath
一意の値を宣言する必要があります。 この例では、Web-ContextPath
を/q4f7-web
に設定しています。 これらの値のリファレンスについては、 bnd.bnd を参照してください。
render
メソッドを実装する
JSPRenderer
を使用して、商品コンテンツレンダラーのJSPをレンダリングします(この場合は、 view.jsp )。 作成したJSPを見つけるためのパラメーターとしてServletContext
を提供します。
カスタムビューのJSPを追加する
CPContentHelper は、特定の商品に関する情報を取得するクラスです。
CPCatalogEntry は、表示された商品自体を表します。 CPSku オブジェクトに含まれるデフォルトのSKUを持つ商品に関する詳細情報を取得します。
Liferay Commerceの [add_to_cart_button.jsp](https://github.com/liferay/liferay-portal/blob/7.4.3.120-ga120/modules/apps/commerce/commerce-cart-content-web/src/main/resources/META-INF/resources/dynamic include/add to cart button.jsp) を使用して、「カートへ追加」機能をビューに挿入します。
言語キーをLanguage.properties
に追加する
モジュール内の Language.properties ファイルに言語キーとその値を追加します。
詳細は、 アプリケーションのローカライズ を参照してください。
まとめ
CPContentRenderer
インターフェイスを実装するための基本を理解し、Liferay Commerceに新しい商品コンテンツレンダラーを追加しました。