Salesforce B2C Commerce の Business Manager をカスタマイズしてみる

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

今回は B2C Commerce の Business Manager のカスタマイズする方法を紹介します。詳細は[ヘルプ](https://developer.salesforce.com/docs/commerce/b2c-commerce/guide/b2c-customize-business-manager.html)をご覧ください。


## Business Manager のカスタマイズできること

カスタマイズできる項目は下記の内容です。

* 既存機能のカスタマイズ
* 機能の追加
    * メニューアイテムの追加
    * メニューアクションの追加
    * ダイアログアクションの追加
    * フォーム項目の追加


Business Manager をカスタマイズするにはカートリッジパスを設定しますが、通常のストアフロントのカートリッジと違って下記の設定画面から設定します。

**Administration > Sites > Manage Sites > Business Manager - Settings**



## 既存機能のカスタマイズ

`app_business_manager` というカートリッジに入っている特定のテンプレートを上書きすることで機能の追加やレイアウトの変更を行うことが可能です。上書きできるテンプレートの一覧は[ヘルプ](https://developer.salesforce.com/docs/commerce/b2c-commerce/guide/b2c-customize-business-manager.html#customize-existing-business-manager-functionality)をご覧ください。どのように上書くかは [Adyen のカートリッジ](https://github.com/Adyen/adyen-salesforce-commerce-cloud/tree/main/src/cartridges/bm_adyen/cartridge/templates/default)を見ると参考になりそうでした。

例えば、 `/cartridge/templates/default/order/printorderinvoice.isml` を上書くと注文の **[Print Invoice]** を押した際の出力が変わります。

![スクリーンショット 2024-01-31 10.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e0486396-5e53-8371-fa89-d0cf2758e029.png)


デフォルトだとこのような表示なのですが、

![スクリーンショット 2024-01-31 11.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/94b3010e-7f1c-17ea-1ac3-a7eadecd1fca.png)


下記のような HTML で上書くと
```html:cartridge/templates/default/order/printorderinvoice.isml
<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>
```

下画像のような表示に変わります。
![スクリーンショット 2024-01-31 10.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/f1d482c1-51b9-2e4b-941d-4fcf15ee0e8f.png)




## 機能の拡張


機能の拡張はカートリッジ内の `cartridge/bm_extensions.xml` に記載していきます。`bm_extensions.xml` 内に設定できる項目は「[Business Manager Extension Points](https://developer.salesforce.com/docs/commerce/b2c-commerce/guide/b2c-customize-business-manager.html#business-manager-extension-points)」を参照してください。今回は下記のようなサンプルを利用してみます。



```xml:cartridge/bm_extensions.xml
<?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>
```




```js:cartridge/controllers/BMTest.js
"use strict";

exports.Show = function () {
    var ISML = require("dw/template/ISML");
    ISML.renderTemplate("test/test", {});
};
exports.Show.public = true;
```




```html:cartridge/templates/default/test/test.isml
<div>テスト</div>
```




### メニューアイテム・メニューアクションの追加

ここでは「BM Test Menu Item」というメニューアイテム内に「BM Test Menu Action」というメニューアクションを設定しています。今回は **[BM Test Menu Action]** をクリックすると `BMTest-Show` というコントローラーを呼び出して「テスト」とのみ表示されたページに遷移します。

![スクリーンショット 2024-01-31 11.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c1f361a9-281d-c5a7-5433-d6afe4cbae8d.png)


### ダイアログアクションの追加

注文詳細画面の 「Payment」タブにアクションを追加できます。ダイアログアクションはこのページのみで `xp_ref` と `action-id` の値も `xp_orders_payment` と `orders_manage` のみのようです。

![スクリーンショット 2024-01-31 11.15.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c998355f-44ba-e7e9-eb61-ef757ece27a8.png)



### フォーム項目の追加

フォームの拡張は注文と顧客の検索画面の「Advanced」タブにカスタム属性の検索を追加することができます。今回は「BMTestValue」という Order オブジェクトのカスタム属性を検索できるようにしています。フォームの拡張は注文と顧客の検索画面のみなので `<formextension>` タグの `id` は `order-search` と `customer-search` のみになります。

![スクリーンショット 2024-01-31 11.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/6c5097ab-948e-8d12-af63-ed4174c09d00.png)