Salesforce Developer Edition で B2B Commerce を使えるようにしてみる

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

今回の記事では手っ取り早く B2B Commerce を触ってみたいという方向けに [Developer Edition](https://developer.salesforce.com/signup) を利用してサイトを手動で最短で構築する方法を紹介します。コマンドとスクラッチ環境を利用して構築する場合は「[スクラッチ組織で Salesforce D2C Commerce の環境を作成してみる](https://qiita.com/syunyama/items/602d312ef3e27de41e88)」をご覧ください。
今回目指すのは下記の３つです。
* サイトを管理できる
* サイトを公開できる
* サイトにログインし、商品を閲覧できる

:::note warn
**注意**
- 今回は Developer Edition のデフォルトの状態からの最短のサイト構築を目指しているので、一部のステップをスキップしていることはご了承ください。より詳細な設定は「[B2B Commerce Set Up Guide](https://resources.docs.salesforce.com/latest/latest/en-us/sfdc/pdf/b2b_standalone_setup.pdf)」と「[Salesforce B2B Commerce and D2C Commerce](https://help.salesforce.com/s/articleView?id=sf.comm_intro.htm&type=5)」をご覧ください。
- 今回はチェックアウトについては考慮していません。チェックアウトについては「[Salesforce B2B/D2C Commerce のチェックアウトインテグレーションを利用する](https://qiita.com/syunyama/items/52e6636eb297ad75d4af)」をご覧ください。
- [Developer Edition](https://developer.salesforce.com/signup) を作成する際の国選択（Country/Region）が「Japan」であることを仮定して作成しています
:::


### 1. デジタルエクスペリエンスの有効化

_**設定 > 機能設定 > デジタルエクスペリエンス > 設定**_ 画面で **[デジタルエクスペリエンスを有効化]** にチェックを入れ保存。



### 2. コマース機能の有効化

_**設定 > 機能設定 > コマース > 設定**_ 画面で **[コマースを有効化]** をトグルし保存。



### 3. 共有設定

**_設定 > セキュリティ > 共有設定_** 画面で **[デフォルトの外部アクセス権]** 項目を下記のように設定します。

* 注文オブジェクトを「非公開」に変更
* 商品オブジェクトを「非公開」に変更




### 4. 取引先と取引先責任者のレイアウト変更

オブジェクトマネージャーから下記のオブジェクトのページレイアウトを変更します。

* 取引先オブジェクトのページレイアウト「Account Layout」に「バイヤーとして有効化」「バイヤーとして無効化」Lightning アクションを追加
* 取引先責任者オブジェクトのページレイアウト「Contact Layout」に「カスタマーユーザを有効化」「カスタマーユーザを無効化」「カスタマーユーザを表示」「ユーザとしてエクスペリエンスにログイン」Lightning アクションを追加



### 5. 管理者の設定

**_設定 > ユーザー > ユーザー_** 画面でログインしている管理者ユーザに下記の設定を行います

* ロールを「CEO」に設定
* 権限セット「コマース管理者」を割り当てる

:::note
その他の権限セットについては[ヘルプ](https://help.salesforce.com/s/articleView?language=en_US&id=sf.comm_integrator_perms.htm&type=5)をご覧ください。
:::

### 6. 権限セットの設定

**_設定 > ユーザー > 権限セット_** 画面でサイトにログインするユーザの権限セットを作成します。

* 権限セット「Buyer」をコピーして新しい権限セット「Sample Buyer」を作成
* システム権限「取引先のアドレスを管理」を追加

:::note
実際には状況に応じて複数の権限セットを使い分けますのでご注意ください。詳細は[ヘルプ](https://help.salesforce.com/s/articleView?language=en_US&id=sf.comm_preconfigured_perm_sets.htm&type=5)をご覧ください。
:::




### 7. プロファイルの設定

**_設定 > ユーザー > プロファイル_** 画面でサイトにログインするユーザのプロファイルを作成します。

* プロファイル「Customer Community Plus User」をコピーして「Sample Customer Community Plus User」を作成

:::note
その他のライセンスについては[ヘルプ](https://help.salesforce.com/s/articleView?id=sf.comm_b2b_licenses.htm&type=5)をご覧ください。
:::




### 8. ストアの作成

アプリケーションランチャーから **[コマース]** を選択しコマースのホーム画面を開きます。さらにメニューから **[ストア]** を選択し、**[ストアを作成]** をクリックします。
![スクリーンショット 2023-10-17 11.18.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/e73ff50b-bf04-aecd-2ac3-23f515a91d6d.png)

B2B 向けのテンプレートを利用して「b2b」という名で「b2b」というサイト URL パスを持つストアを作成します。

![スクリーンショット 2023-10-17 11.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/5fbcd4fc-a7eb-f086-3707-dbb1b504a449.png)



### 9. サンプルデータの追加

ストアのホーム画面に遷移し、**[サンプルデータを追加]** ボタンをクリックします。

![スクリーンショット 2023-10-17 12.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/d383b914-6bee-6a55-a501-71bdfe910bed.png)


### 10. 検索インデックスの作成

サンプルデータ作成後、検索設定画面へリダイレクトされるので **[インデックスを再構築]** ボタンからインデックスを再構築します。リダイレクトされない場合は、ストアの管理画面から **[検索]** タイルをクリックしてください。

![スクリーンショット 2023-10-17 12.34.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/37c02f17-9bfd-e4de-5f3e-bdb9dd822171.png)



### 11. サンプルデータの商品画像 URL の CSP 設定

**_設定 > セキュリティ >信頼済み URL_** 画面から **[新規信頼済み URL]** をクリックし下記の内容で新しく作成する。


* 任意の名前で良いが **[API 参照名]** として「cna139content」と入力する
* **[URL]** に「[https://c.na139.content.force.com](https://c.na139.content.force.com/)」と入力する
* **[CSP ディレクティブ]** で「img-src」にチェックを入れる




### 12. ストアのメンバー設定

**_設定 > 機能設定 > デジタルエクスペリエンス > すべてのサイト_** 画面から作成したストアのワークスペースに遷移し、**[管理]** タイルをクリックします。**[メンバー]** タブをクリックし、**[プロファイルの選択]** 項目で先ほど作成したプロファイル「Sample Customer Community Plus User」を **[選択済みプロファイル]** に追加し、保存します。この際検索対象が「社内」になっていたら出ないので「すべて選択」に変更して検索しましょう。



### 13. 取引先と取引先責任者をバイヤー、カスタマーとして有効化

ログインさせたいユーザが所属する取引先のレコードページに行き、**[バイヤーとして有効化]** アクションボタンをクリックします
![スクリーンショット 2023-10-10 15.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/2f4b2ec1-1b31-5587-0570-b23027ec8938.png)

取引先責任者のレコードページに行き、**[カスタマーユーザを有効化]** をクリックしユーザの設定画面を開きます
![スクリーンショット 2023-10-10 15.23.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a3ed3c56-0e81-dde7-de50-893b32faedd8.png)

ユーザの設定画面では先ほど作成したプロファイル「Sample Customer Community Plus User」と権限セット「Sample Buyer」を割り当てます。
![スクリーンショット 2023-10-10 15.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/b2461304-36d2-c48c-6a45-fdca05c82e86.png)
![スクリーンショット 2023-10-10 15.23.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/81462245-a9f9-32e4-2cab-e4de758ff851.png)



### 14. バイヤーグループに取引先を割り当て

ストアの管理画面から **[お客様]** タイルをクリックし、さらに **[バイヤーグループ]** タブをクリックし「b2b バイヤーグループ」を選択します。
![スクリーンショット 2023-10-17 12.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/50ad1c44-3c1a-72f9-aac8-b3ec6f1d21c8.png)
そして **[バイヤーグループメンバー]** として取引先を割り当てます。
![スクリーンショット 2023-10-10 15.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/0bd066ca-f80a-c011-7f88-c6716e48f34f.png)


### 15. ストアの有効化

ストアの管理画面から **[管理]** タイルをクリックします。

![スクリーンショット 2023-10-17 12.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/b65f99b7-3246-b526-6b57-9d4bf8881942.png)

**[ストアを有効]** タブをクリックし **[有効化]** ボタンでストアを有効化します。 
![スクリーンショット 2023-10-10 16.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/044958a5-5f89-99d2-5af2-368cbbf5a1c5.png)



### 16. ストアの公開

ストアの管理画面から **[エクスペリエンスビルダー]** タイルをクリックします。
![スクリーンショット 2023-10-17 12.38.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a7387be3-c3ac-6f53-d9e8-947d84069760.png)

エクスペリエンスビルダーを起動させ **[公開]** ボタンをクリックします。 
![スクリーンショット 2023-10-17 12.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/3bce8910-ab3d-c6a6-cd3b-e05da7760d24.png)


### 17. 取引先責任者でログイン

カスタマーユーザとして有効化した取引先責任者のレコードページに遷移し、**[ユーザとしてエクスペリエンスにログイン]** をクリックします。
![スクリーンショット 2023-10-10 16.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/0f4bea78-6c12-abd9-a6e9-ae337fd640c9.png)

するとサイトにログインすることが可能です。
![スクリーンショット 2023-10-17 13.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/930a87ef-4934-8074-fa27-41151bfbbfe5.png)