カスタム商品コンテンツレンダラーの実装

このチュートリアルでは、 CPContentRenderer インターフェイスを実装して、カスタム製品コンテンツ レンダラーを追加する方法を説明します。

商品コンテンツレンダラーは、商品を表示できるさまざまなウィジェットで、特定の商品タイプの商品詳細を表示するスタイルを提供します。 Liferay Commerceは、Simple製品用の SimpleCPContentRenderer など、すぐに使用できる製品タイプごとに製品コンテンツレンダラーを提供します。

概要

1. サンプルをデプロイする
2. サンプルの説明

サンプルをデプロイする

このセクションでは、Liferay Commerce のインスタンスでサンプルの製品コンテンツ レンダラーを起動して実行します。

新しいLiferay インスタンスを起動し、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132

http://localhost:8080でLiferayにサインインします。 メールアドレス [e-mail] とパスワード testを使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。

次に、以下の手順に従います。

1. Acme Commerce Product Content Rendererをダウンロードして解凍します。

   curl https://resources.learn.liferay.com/commerce/latest/en/developer-guide/content/liferay-q4f7.zip -O
   

   unzip liferay-q4f7.zip
   

2. サンプルをビルドしてデプロイします。

   ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
   

   注

   このコマンドは、デプロイされたjarをDockerコンテナ上の /opt/liferay/osgi/modules にコピーするのと同じです。

3. Dockerコンテナコンソールでデプロイを確認します。

   STARTED com.acme.q4f7.web_1.0.0
   

4. サンプルの商品コンテンツレンダラーが追加されたことを確認します。 ブラウザでhttps://localhost:8080を開き、Liferay Commerceで商品を含む任意のカタログに移動します。 商品をクリックして［商品の詳細］ウィジェットを表示し、ウィジェットの ［Configuration］をクリックします。

   カスタム レンダラー セクションで、 シンプルを選択します。 Simple Commerce 製品タイプ レンダラー キー ドロップダウンの下で、新しいレンダラー (「Q4F7 Commerce 製品コンテンツ レンダラー」) を選択します。

   

5. 商品を選択すると、新しいレンダラーでは、商品のSKU、価格、在庫状況、在庫数のみが表示されます。

   

これで、CPContentRendererを実装する新しいカスタム商品コンテンツレンダラーを正常に構築およびデプロイできました。

次に、詳細をさらに詳しく見ていきましょう。

サンプルの説明

このセクションでは、デプロイした例を確認します。 まず、OSGi 登録用のクラスにアノテーションを付けます。 次に、 CPContentRenderer インターフェースを確認します。 3 番目に、 CPContentRendererの実装を完了します。

OSGi登録用のクラスに注釈を付ける

@Component(
   property = {
      "commerce.product.content.renderer.key=q4f7",
      "commerce.product.content.renderer.order=1",
      "commerce.product.content.renderer.type=" + SimpleCPTypeConstants.NAME
   },
   service = CPContentRenderer.class
)
public class Q4F7CPContentRenderer implements CPContentRenderer {

Liferay Commerceが新しいレンダラーを 製品コンテンツレンダラーレジストリ内の他のレンダラーと区別できるように、製品コンテンツレンダラーに固有のキーを提供することが重要です。 すでに使用されているキーを再利用すると、既存の関連付けられているレンダラーが上書きされます。

commerce.product.content.renderer.orderプロパティは、CommerceがUIにレンダラをリストアップするために使用する整数値です。 レンダラーは昇順で表示されます。 たとえば、 SimpleCPContentRenderer ではこのプロパティが最小の整数値に設定されているため、Simple タイプの製品の他のレンダラーがリスト内でその後に表示されます。

commerce.product.content.renderer.typeプロパティは、このレンダラーがどの商品のタイプに使用できるかを決定します。 この例では、シンプル タイプを使用しているため、レンダラーは UI のシンプル カテゴリの下に表示されます。

CPContentRendererインターフェイスを確認する

次のメソッドを実装します。

public String getKey();

このメソッドは、商品コンテンツレンダラーレジストリ内の商品コンテンツレンダラーに一意な識別情報を提供します。 このキーを使用して、レジストリからレンダラーを取得できます。 すでに使用されているキーを再利用すると、既存の関連付けられているレンダラーが上書きされます。

public String getLabel(Locale locale);

これは、商品コンテンツレンダラーを説明するテキストラベルを返します。 言語キーを使用してラベルを取得する際の参考として、 liferay-q4f7.zip/q4f7-web/src/main/java/com/acme/q4f7/web/internal/commerce/product/content/renderer の Q4F7CPContentRenderer.java クラスの実装を参照してください。

public void render(
      CPCatalogEntry cpCatalogEntry,
      HttpServletRequest httpServletRequest,
      HttpServletResponse httpServletResponse)
   throws Exception;

ここで、商品コンテンツレンダラーのカスタマイズされたビューをレンダリングするコードを追加します。

ビューを定義するには、JSP、Freemarkerテンプレート、Soyテンプレートなど、いくつかの方法があります。 この例では、JSP を使用します。

商品コンテンツレンダラーを完成させる

商品コンテンツレンダラーは、定義およびレンダリングするカスタムビューで構成されます。 以下を行います。

• モジュールにServletContextを構成する。
• renderメソッドを実装します。
• カスタムビューのJSPを追加する。
• 言語キーをLanguage.propertiesに追加する。

モジュールにServletContextを構成する

バンドルのシンボル名を使用してServletContextを定義し、モジュールでJSPを見つけられるようにします。

@Reference(target = "(osgi.web.symbolicname=com.acme.q4f7.web)")
private ServletContext _servletContext;

osgi.web.symbolicname に設定した値は、 liferay-q4f7.zip/q4f7-web内の bnd.bnd ファイル内の Bundle-SymbolicName の値と一致します。 これらの値は、JSPを見つけるためにServletContextと一致する必要があります。

また、 ServletContext が正しく生成されるように、bnd.bnd ファイル内の Web-ContextPath に一意の値を宣言する必要があります。 この例では、Web-ContextPathを/q4f7-webに設定しています。 これらの値のリファレンスについては、 bnd.bnd ファイルを参照してください。

renderメソッドを実装する

@Override
public void render(
      CPCatalogEntry cpCatalogEntry,
      HttpServletRequest httpServletRequest,
      HttpServletResponse httpServletResponse)
   throws Exception {

   _jspRenderer.renderJSP(
      _servletContext, httpServletRequest, httpServletResponse,
      "/view.jsp");
}

JSPRenderer を使用して、製品コンテンツ レンダラーの JSP をレンダリングします (この場合、 liferay-q4f7.zip/q4f7-web/src/main/resources/META-INF/resources内の view.jsp )。 作成したJSPを見つけるためのパラメーターとしてServletContextを提供します。

カスタムビューのJSPを追加する

<%
CPContentHelper cpContentHelper = (CPContentHelper)request.getAttribute(CPContentWebKeys.CP_CONTENT_HELPER);

CPSku cpSku = cpContentHelper.getDefaultCPSku(cpContentHelper.getCPCatalogEntry(request));
%>

CPContentHelper は、特定の製品に関する情報を取得するクラスです。

CPCatalogEntry は、表示される製品自体を表します。 CPSku オブジェクトに含まれるデフォルトの SKU を使用して、製品に関する詳細情報を取得します。

<c:if test="<%= cpSku != null %>">
    SKU: <%= cpSku.getSku() %><br />
    Price: <%= cpSku.getPrice() %><br />
    Availability: <%= cpContentHelper.getAvailabilityLabel(request) %><br />
    Stock Quantity: <%= cpContentHelper.getStockQuantityLabel(request) %>
</c:if>

<liferay-util:dynamic-include key="com.liferay.commerce.product.content.web#/add_to_cart#" />

Liferay Commerce の add_to_cart_button.jsp を使用して、ビューに「カートに追加」機能を挿入します。

言語キーをLanguage.propertiesに追加する

モジュール内の liferay-q4f7.zip/q4f7-web/src/main/resources/content にある Language.properties ファイルに言語キーとその値を追加します。

q4f7-commerce-product-content-renderer=Q4F7 Commerce Product Content Renderer

詳細については、「 アプリケーションのローカライズ 」を参照してください。

さいごに

これで、 CPContentRendererインターフェイスを実装するための基本を理解し、Liferay Commerceに新しい商品コンテンツレンダラーを追加しました。

関連トピック

• Localizing Your Application