Salesforce B2B/D2C Commerce の開発時の Tips

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

今回の記事では B2B/B2B2C Commerce の開発を行う際に役に立ちそうな情報を列挙していきたいと思います。

### 商品の登録

商品の登録は[管理画面のインポート](https://help.salesforce.com/s/articleView?id=release-notes.rn_comm_import_for_store.htm&type=5&release=236)からもできますが、今回は [commerce-on-lightning](https://github.com/forcedotcom/commerce-on-lightning) を利用する方法を紹介します。

下記のコマンドではローカルの `~/Desktop/Alpine-small.csv` という商品登録用 CSV を `sampleScratch` という組織の `1commerce` サイトにアップロードしています 。

```sh
sfdx commerce:products:import -n 1commerce -u sampleScratch -c ~/Desktop/Alpine-small.csv
```

商品登録用の CSV に関しては[サンプル](https://github.com/forcedotcom/commerce-on-lightning/blob/develop/examples/csv/Alpine-small.csv)や[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.comm_store_csv_format.htm&type=5)も参考にしてください。また、S3 などでホスティングせずに Salesforce の CMS を利用する場合の画像のアップロード方法は[こちらの記事](https://base.terrasky.co.jp/articles/CzEBw)が非常に参考になりました。（アップロード方法の公式ヘルプは[こちら](https://help.salesforce.com/s/articleView?id=sf.cms_import_export_overview.htm&type=5)です）

※ CMS の画像と商品を紐づける方法は調べ中ですので、わかり次第追記します。



### 検索インデックス作成

商品を登録したらフロントサイトで検索できるようにインデックスを作成する必要があります。こちらも[管理画面](https://help.salesforce.com/s/articleView?id=sf.comm_search_index_build.htm&type=5)から可能なのですが、商品登録と同様に、[commerce-on-lightning](https://github.com/forcedotcom/commerce-on-lightning) を利用する方法を紹介します。
下記コマンドでは、 `sampleScratch` という組織の `1commerce` サイトの検索インデックスを作成しています。

```sh
sfdx commerce:store:search:start -n 1commerce -u sampleScratch
```



### カスタムコンポーネント作成時の API

B2B/B2B2C コマース共に [LWC(Lightning Web Component) を利用してフロントサイトの開発](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_custom_component.htm)を行うことができますが、その際に LWC (=クライアントサイド)から API をコールする際はプリビルドされている Javascript API を利用する必要があります。その API の一覧が[こちら](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_display_lwc_apis.htm)です。

例えば、アプリケーションの[コンテキスト情報をとってくるための API](https://developer.salesforce.com/docs/atlas.en-us.240.0.chatterapi.meta/chatterapi/connect_resources_commerce_webstore_application_context.htm) があります。これを呼ぶ際は下記のように Javascript API を利用する必要があります。

```javascript
import { getAppContext } from 'commerce/contextApi';

async function foo(){
    const appContext = await getAppContext();
    const { taxType } = appContext;
}
```


LWC の開発方法に関しては以前書いた Qiita 記事内の「[VS Codeでの開発方法](https://qiita.com/syunyama/items/8c591c9fbe89731204a0#vs-code%E3%81%A7%E3%81%AE%E9%96%8B%E7%99%BA%E6%96%B9%E6%B3%95)」などを参考にしてくだい。


### Apex/フローでのカスタム

チェックアウトの中で送料や税金の計算などに独自のロジックを入れたり、外部サービスを呼びたい場合があると思います。そういった場合、B2B/B2B2C Commerce ではApex を利用してカスタマイズすることができます。それぞれのインテグレーションアーキテクチャについては[ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_integration_architecture.htm)を参照してください。
チェックアウトやカートの中で下記のポイントでカスタマイズを入れることが可能です。

##### 配送
* 配送料の計算して配送グループに書き込みます
* [ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_ship_reference_package.htm)/[サンプルコード](https://github.com/forcedotcom/commerce-on-lightning/blob/develop/examples/b2b/checkout/integrations/classes/B2BDeliverySample.cls)

##### 税金
* 税金を計算してカートアイテムに書き込みます
* [ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_tax_reference_package.htm)/[サンプルコード](https://github.com/forcedotcom/commerce-on-lightning/blob/develop/examples/b2b/checkout/integrations/classes/B2BTaxSample.cls)

##### 支払い
* [支払いゲートウェイ](https://help.salesforce.com/s/articleView?id=sf.blng_payment_gateways_intro.htm&type=5)を利用して外部のサービスを利用することができます
* [ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_payment_integration_container.htm)/[サンプルコード](https://github.com/forcedotcom/commerce-on-lightning/tree/main/examples/b2c/checkout/payment-gateway-integration)




B2B においては上記に加えて下記のポイントがあり、さらに、[チェックアウトフロー](https://developer.salesforce.com/docs/atlas.en-us.b2b_b2c_comm_dev.meta/b2b_b2c_comm_dev/b2b_b2c_comm_setup_checkout_flow.htm)は[フロー](https://www.salesforce.com/jp/products/platform/solutions/automate-business-processes/)で作成されているため、より柔軟な開発が可能になっています。

##### 在庫
* カート内のアイテムの在庫を確認します
* [サンプルコード](https://github.com/forcedotcom/commerce-on-lightning/blob/main/examples/b2b/checkout/integrations/classes/B2BCheckInventorySample.cls)

##### 価格
* カート内の価格を計算してカートアイテムに書き込みます
* [サンプルコード](https://github.com/forcedotcom/commerce-on-lightning/blob/main/examples/b2b/checkout/integrations/classes/B2BPricingSample.cls)




### フロントサイト利用時の Apex ログ

フロントサイトからのアクセス時の Apex のデバックをしたい時があるかと思います。その際の手順を紹介します。


1. **設定 > デバッグログ** に遷移し、新しくユーザ追跡フラグを作成します。その際にフロントサイトを利用しているユーザを選択するようにします。

    ![スクリーンショット 2022-12-28 18.01.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/c548074c-b72f-2ddb-c9ee-1a174fc12d57.png)




1. 追加が完了すると、開発コンソールの **Debug > Change Open Log Levels** から追加したユーザを確認することができます。

    ![スクリーンショット 2022-12-28 17.57.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/892369f3-d997-016c-e6ef-6b81bd115402.png)



1. その状態で、**Debug > Show My Current Logs Only** のチェックボックスを外すと Logs タブからログを確認すすことができます。

    ![スクリーンショット 2022-12-28 17.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fc4013e2-164a-fdc7-2e5b-da4668f19281.png)