店舗セレクターモジュール

[アーティクル]
08/01/2024

この記事では、店舗セレクターモジュールと、Microsoft Dynamics 365 Commerce のサイトページにそれを追加する方法について説明します。

顧客は、店舗セレクターモジュールを使用して、オンライン購入後に選択した店舗の製品を集荷できます。 Commerce バージョン 10.0.13 では、店舗セレクターモジュールにも、近くにある店舗を表示する 店舗の検索 ページを紹介する機能が追加されています。

店舗セレクターモジュールを使用すると、場所 (市町村、都道府県、住所など) を入力して検索半径内の店舗を検索できます。モジュールが最初に開かれたとき、顧客のブラウザーの場所を使用して、店舗が検索されます (同意を得ている場合)。

店舗セレクターモジュールの使用

製品の詳細ページ (PDP) では、店舗セレクターモジュールを使用して受け取りのための店舗を選択できます。
買い物カゴページでは、店舗セレクターモジュールを使用して受け取りのための店舗を選択できます。
店舗セレクターモジュールは、使用可能なすべての店舗を表示するスタンドアロンページで使用できます。

Commerce 本社でのフルフィルメントグループの設定

店舗セレクターで利用可能な店舗を表示するには、Commerce 本社でフルフィルメントグループを設定する必要があります。詳細については、フルフィルメントグループの設定を参照してください。

さらに、フルフィルメントグループ内の各店舗に関しては、店舗の場所の緯度と経度を本社に定義する必要があります。

Commerce 本社の店舗の場所の経度と緯度値を入力するには次の手順に従います。

在庫管理 > 設定 > 在庫詳細の順に移動します。
左ウィンドウで、倉庫の場所を選択します。
住所クイックタブで、詳細を選択します。
アクションウィンドウで、編集を選択します。
一般クイックタブで、緯度および軽度の値を入力します。
アクションウィンドウで、保存を選択します。

店舗のセレクターモジュールから店舗を非表示にする

フルフィルメントグループ内の一部の店舗は、集荷場所ではない場合があります。有効な集荷場所のみを店舗のセレクターモジュールのオプションとして表示するには、Commerce headquarters で次の手順に従います。

小売とコマース > Commerce 設定 > フルフィルメントグループ > すべての店舗 の順に移動します。
アクションウィンドウで、編集を選択します。
設定で、すべての店舗が有効な集荷場所ではない場合は、集荷場所である のチェックを外します。
アクションウィンドウで、保存を選択します。
1070 チャネル構成 配布スケジュールジョブを実行します。

Bing Maps の統合

Bing の Geocoding および Autosuggest 機能を使用するために、ストア選択モジュールは Bing Maps REST アプリケーションプログラミングインターフェイス (API) と統合されています。 Bing Maps API キーは必須で、Commerce 本社の共有パラメータページに追加する必要があります。 Geocoding API は、場所を緯度と経度の値に変換するために使用されます。 Autosuggest API との統合は、ユーザーが検索フィールドに場所を入力したときに検索候補を表示するために使用されます。

Autosuggest REST API の場合は、サイトのコンテンツセキュリティポリシー (CSP) に対して、次の URL が許可されていることを確認する必要があります。この設定は、Commerce サイトビルダーで、サイトのさまざまな CSP ディレクティブ (img-src など) に許可された URL を追加することによって実行されます。詳細については、コンテンツセキュリティポリシーを参照してください。

connect-src ディレクティブに *.bing.com を追加します。
img-src ディレクティブに *.virtualearth.net を追加します。
script-src ディレクティブに *.bing.com、*.virtualearth.net を追加します。
script style-src ディレクティブに、*.bing.com を追加します。

店舗で受け取りモード

店舗セレクターモジュールでは、製品を受け取ることができる店舗の一覧を表示する 店舗で受け取り モードをサポートしています。また、この一覧には店舗の営業時間と店舗ごとの製品在庫も表示されます。店舗セレクターモジュールでは、製品の利用可能性を表示するためと、選択した店舗で製品の配送モードが 受け取り に設定されている場合はユーザーが製品を買い物カゴに追加できるように、製品のコンテキストが必要です。詳細については、在庫設定を参照してください。

店舗セレクターモジュールは、PDP の購入ボックスモジュールに追加して、製品を受け取ることができる店舗を表示できます。また、カートモジュールに追加することもできます。この場合、店舗セレクターモジュールは、買い物カゴ内の各品目に対する受け取りオプションを表示します。店舗セレクターモジュールは、拡張機能とカスタマイズによって、他のページまたはモジュールに追加することもできます。

このシナリオが機能するためには、受け取り 配送モードが使用されるように製品をコンフィギュレーションする必要があります。それ以外の場合、このモジュールは製品ページでは表示されません。配送モードをコンフィギュレーションする方法の詳細については、荷渡方法の設定を参照してください。

次の図は、PDP で使用される店舗セレクターモジュールの例を示しています。

PDP で使用される店舗セレクターモジュールの例です。

メモ

バージョン 10.0.16 では、新しい機能を有効にして、組織が顧客に対して複数のピッキングモードを定義できるようにすることができます。この機能が有効になっている場合、電子商取引の店舗セレクターとその他のモジュールが強化され、複数の集荷配送オプション (コンフィギュレーションされている場合) の中から買い物客が選択できるようになります。この機能の詳細については、このドキュメントを参照してください。

店舗検索モード

また、店舗セレクターモジュールは、検索店舗モードもサポートしています。このモードを使用すると、使用可能な店舗とその情報を表示する店舗の場所ページを作成できます。このモードでは、店舗セレクターモジュールは製品コンテキストなしで動作し、任意のサイトページでスタンドアロンモジュールとして使用できます。さらに、モジュールに関連する設定が有効になっている場合、ユーザーは、その店舗を優先ストアとして選択できます。店舗がユーザーの優先ストアとして選択されている場合、その店舗 ID はブラウザーの Cookie に保持されます。したがって、ユーザーは Cookie の同意メッセージに同意する必要があります。

次の図は、店舗の場所ページのマップモジュールと共に使用される店舗セレクターモジュールの例を示しています。

店舗の場所ページの店舗セレクターモジュールとマップモジュールの例です。

マップのレンダリング

マップモジュールを使用して、マップ上で店舗の場所を示すことができます。マップモジュールの詳細については、マップモジュールを参照してください。

店舗セレクターモジュールのプロパティ

プロパティ名	先頭値	説明
ヘッダー	テキスト	モジュールのヘッダー。
モード	店舗を検索または店舗でピッキング	店舗を検索、使用可能な店舗を表示します。店舗で集荷、ユーザーは選択のために店舗を購入できます。
スタイル	ダイアログまたは行	このモジュールは、インラインまたはダイアログボックスのいずれかでレンダリングできます。
優先店舗に設定する	true またはFalse	このプロパティが True に設定されている場合、ユーザーは優先ストアを設定できます。この機能を使用するには、ユーザーが Cookie の同意メッセージを受け入れる必要があります。
全店舗を表示する	true またはFalse	このプロパティが True に設定されている場合、ユーザーは、検索半径プロパティを省略して、すべての店舗を表示することができます。
Autosuggest オプション: 最大結果	番号	このプロパティは、Bing Autosuggest API を介して表示できる Autosuggest 結果の最大数を定義します。
検索半径	番号	このプロパティは、店舗の検索半径をマイル単位で定義します。値が指定されていない場合は、既定の検索半径 (50マイル) が使用されます。
サービス条件	URL	このプロパティは、Bing Maps サービスを使用するために必要なサービス URL の条件を指定します。