カスタムチェックアウトステップの実装
このチュートリアルでは、 CommerceCheckoutStep インターフェイスを実装してカスタム チェックアウト ステップを追加する方法を説明します。
チェックアウトステップは、お客様のチェックアウトプロセスを1つの画面で示します。 Liferay Commerce には、 支払い方法ステップ や 注文確認ステップなどの重要なステップを含む、すぐに使用できるチェックアウトステップがいくつか用意されています。

概要
サンプルをデプロイする
このセクションでは、Liferay Commerce のインスタンスでチェックアウト手順の例を実行してみます。
新しいLiferay インスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/portal:7.4.3.132-ga132
http://localhost:8080でLiferayにサインインします。 メールアドレス test@liferay.com とパスワード testを使用してください。 プロンプトが表示されたら、パスワードを learnに変更します。
次に、以下の手順に従います。
-
Acme Commerce Checkout Stepをダウンロードして解凍します。
curl https://resources.learn.liferay.com/commerce/latest/en/developer-guide/sales/liferay-n8n6.zip -Ounzip liferay-n8n6.zip -
サンプルをビルドしてデプロイします。
./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)注このコマンドは、デプロイされたjarをDockerコンテナ上の
/opt/liferay/osgi/modulesにコピーするのと同じです。 -
Dockerコンテナコンソールでデプロイを確認します。
STARTED com.acme.n8n6.web_1.0.0 -
サンプルのチェックアウトステップが追加されたことを確認します。 ブラウザーで
https://localhost:8080を開き、Liferay Commerceサイトのカタログに移動します。 カートにアイテムを追加し、カートを表示して、[チェックアウト]をクリックします。 新しい「N8N6 コマース チェックアウト ステップ」がチェックアウト ステップのリストに表示されます。

これで、CommerceCheckoutStepを実装する新しいチェックアウトステップのビルドとデプロイが完了しました。
次に、詳細をさらに詳しく見ていきましょう。
サンプルの説明
このセクションでは、デプロイした例を確認します。 まず、OSGi 登録用のクラスにアノテーションを付けます。 次に、 CommerceCheckoutStep インターフェースを確認します。 3 番目に、 CommerceCheckoutStepの実装を完了します。
CommerceCheckoutStepの実装を簡素化するために、基本機能として BaseCommerceCheckoutStep を拡張します。
OSGi登録用のクラスに注釈を付ける
@Component(
property = {
"commerce.checkout.step.name=n8n6",
"commerce.checkout.step.order:Integer=21"
},
service = CommerceCheckoutStep.class
)
public class N8N6CommerceCheckoutStep extends BaseCommerceCheckoutStep {
Liferay Commerceがこのチェックアウトステップを既存のチェックアウトステップと区別できるように、チェックアウトステップ名は一意の値である必要があります。
commerce.checkout.step.order 値は、チェックアウト プロセスのどの段階でチェックアウト ステップが表示されるかを示します。 たとえば、 配送方法のチェックアウトステップ の値は20です。 チェックアウト ステップに 21 の値を指定すると、配送方法のステップの直後に表示されるようになります。
CommerceCheckoutStep インターフェイスを確認する
基本クラスを拡張することに加えて、次のメソッドを実装します。
public String getName();
このメソッドは、チェックアウトステップの名前を返します。 この名前は、UI に表示される名前に対応する 言語キー になります。
public void processAction(
ActionRequest actionRequest, ActionResponse actionResponse)
throws Exception;
バックエンド処理が必要な場合は、processActionメソッドを使用して、ActionRequestを介して渡された情報でビジネスロジックを実装できます。
public void render(
HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse)
throws Exception;
ここで、チェックアウト手順用のカスタマイズされた画面をレンダリングするためのコードを追加します。
チェックアウトステップを完了する
チェックアウトステップは、カスタム画面と入力を処理するバックエンドロジックで構成されます。 以下を行います。
- モジュールに
ServletContextを構成する。 renderメソッドを実装します。- ビジネスロジックを
processActionに追加する 。 - JSPを追加して、カスタム画面をレンダリングする。
- 言語キーを
Language.propertiesに追加する。
モジュールにServletContextを構成する
バンドルのシンボル名を使用してServletContextを定義し、モジュールでJSPを見つけられるようにします。
@Reference(target = "(osgi.web.symbolicname=com.acme.n8n6.web)")
private ServletContext _servletContext;
osgi.web.symbolicname に設定した値は、 liferay-n8n6.zip/n8n6-webの bnd.bnd の Bundle-SymbolicName の値と一致します。 これらの値は、JSPを見つけるためにServletContextと一致する必要があります。
また、 ServletContext が正しく生成されるように、bnd.bnd ファイル内の Web-ContextPath に一意の値を宣言する必要があります。 この例では、Web-ContextPathは/ n8n6-webに設定されています。 これらの値のリファレンスについては、 bnd.bnd ファイルを参照してください。
renderメソッドを実装する
@Override
public void render(
HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse)
throws Exception {
_jspRenderer.renderJSP(
_servletContext, httpServletRequest, httpServletResponse,
"/terms_and_conditions.jsp");
}
@Reference
private JSPRenderer _jspRenderer;
@Reference(target = "(osgi.web.symbolicname=com.acme.n8n6.web)")
private ServletContext _servletContext;
JSPRenderer を使用して、チェックアウト手順の JSP をレンダリングします (この場合、 liferay-n8n6.zip/n8n6-web/src/main/resources/META-INF/resources内の terms_and_conditions.jsp )。 作成した JSP を見つけるために、 ServletContext をパラメーターとして指定します。
ビジネスロジックをprocessActionに追加する
この例では、カスタム画面にテキストが表示され、 processAction 実装でのバックエンド処理は必要ありません。
JSPを追加して、カスタム画面をレンダリングする
この例では、プレースホルダーテキストを追加しています。 実装は、 terms_and_conditions.jsp の liferay-n8n6.zip/n8n6-web/src/main/resources/META-INF/resourcesで確認できます。
言語キーをLanguage.propertiesに追加する
モジュール内の liferay-n8n6.zip/n8n6-web/src/main/resources/content にある Language.properties ファイルに言語キーとその値を追加します。
n8n6-commerce-checkout-step=N8N6 Commerce Checkout Step
詳細については、「 アプリケーションのローカライズ 」を参照してください。
さいごに
これで、CommerceCheckoutStepインターフェイスを実装するための基本を理解し、Liferay Commerceに新しいチェックアウトステップを追加しました。