※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
今回は B2C Commerce の Business Manager のカスタマイズする方法を紹介します。詳細はヘルプをご覧ください。
Business Manager のカスタマイズできること
カスタマイズできる項目は下記の内容です。
- 既存機能のカスタマイズ
- 機能の追加
- メニューアイテムの追加
- メニューアクションの追加
- ダイアログアクションの追加
- フォーム項目の追加
Business Manager をカスタマイズするにはカートリッジパスを設定しますが、通常のストアフロントのカートリッジと違って下記の設定画面から設定します。
Administration > Sites > Manage Sites > Business Manager - Settings
既存機能のカスタマイズ
app_business_manager というカートリッジに入っている特定のテンプレートを上書きすることで機能の追加やレイアウトの変更を行うことが可能です。上書きできるテンプレートの一覧はヘルプをご覧ください。どのように上書くかは Adyen のカートリッジを見ると参考になりそうでした。
例えば、 /cartridge/templates/default/order/printorderinvoice.isml を上書くと注文の [Print Invoice] を押した際の出力が変わります。
デフォルトだとこのような表示なのですが、
下記のような HTML で上書くと
<iscontent type="text/html" charset="UTF-8" compact="true">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Invoice</title>
</head>
<body>
<div>テスト</div>
</body>
</html>
下画像のような表示に変わります。
機能の拡張
機能の拡張はカートリッジ内の cartridge/bm_extensions.xml に記載していきます。bm_extensions.xml 内に設定できる項目は「Business Manager Extension Points」を参照してください。今回は下記のようなサンプルを利用してみます。
<?xml version="1.0" encoding="ISO-8859-1"?>
<extensions xmlns="http://www.demandware.com/xml/bmmodules/2007-12-11"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.demandware.com/xml/bmmodules/2007-12-11 bmext.xsd">
<menuitem id="bm-test_admin-menu" position="99999" site="false">
<name xml:lang="x-default">BM Test Menu Item</name>
<icon>icons/icons.png</icon>
</menuitem>
<menuaction id="bm-test_admin-menu_testaction" menupath="bm-test_admin-menu" position="102"
site="false">
<name xml:lang="x-default">BM Test Menu Action</name>
<exec pipeline="BMTest" node="Show" />
<sub-pipelines>
<pipeline name="BMTest-Show" />
</sub-pipelines>
<icon>icons/icons.png</icon>
</menuaction>
<dialogaction id="bm-test_dialogaction" xp_ref="xp_orders_payment" position="100"
extern="true">
<name xml:lang="x-default">BM Test Dialog Action</name>
<exec pipeline="BMTest" node="Show" />
<menuactions>
<menuaction-ref action-id="orders_manage" />
</menuactions>
</dialogaction>
<formextension id="order-search">
<valueinput type="string" name="BMTestValue">
<label xml:lang="x-default">BM Test Form Extention</label>
</valueinput>
</formextension>
</extensions>
"use strict";
exports.Show = function () {
var ISML = require("dw/template/ISML");
ISML.renderTemplate("test/test", {});
};
exports.Show.public = true;
<div>テスト</div>
メニューアイテム・メニューアクションの追加
ここでは「BM Test Menu Item」というメニューアイテム内に「BM Test Menu Action」というメニューアクションを設定しています。今回は [BM Test Menu Action] をクリックすると BMTest-Show というコントローラーを呼び出して「テスト」とのみ表示されたページに遷移します。
ダイアログアクションの追加
注文詳細画面の 「Payment」タブにアクションを追加できます。ダイアログアクションはこのページのみで xp_ref と action-id の値も xp_orders_payment と orders_manage のみのようです。
フォーム項目の追加
フォームの拡張は注文と顧客の検索画面の「Advanced」タブにカスタム属性の検索を追加することができます。今回は「BMTestValue」という Order オブジェクトのカスタム属性を検索できるようにしています。フォームの拡張は注文と顧客の検索画面のみなので <formextension> タグの id は order-search と customer-search のみになります。
