購入ボックスのモジュール

注

Dynamics 365 Commerce の小売関連グループは、Yammer から Viva Engage に移行しました。新しいViva Engage コミュニティにアクセスできない場合は、追加するフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力し、最新のディスカッションに参加してください。

この記事では、購入ボックスモジュールについて説明し、Microsoft Dynamics 365 Commerce のサイトページに追加する方法について説明します。

通常、 購入ボックス という用語は、"フォールドの上" にある製品詳細ページ (PDP) の領域を指します。顧客が製品を購入するために必要なすべての最も重要な情報がホストされます。ページが最初に読み込まれるときに "フォールドの上" の領域が表示されるため、ユーザーは下にスクロールして表示する必要はありません。

購入ボックスモジュールは、製品の詳細ページの購入ボックス領域に表示されるすべてのモジュールをホストする特別なコンテナーです。

製品の詳細ページの URL には、製品 ID が含まれます。製品 ID は、購入ボックスモジュールをレンダリングするために必要なすべての情報を提供します。製品 ID を指定しないと、購入ボックスモジュールがページに正しくレンダリングされません。そのため、購入ボックスモジュールは、製品コンテキストを持つページでのみ使用できます。製品コンテキストがないページ (ホームページやマーケティングページなど) で使用するには、追加のカスタマイズを行う必要があります。

以下の図は、[商品の詳細] ページにある [購入ボックス] モジュールの例を示しています。

購入ボックスモジュールのスクリーンショット。

購入ボックスモジュールのプロパティおよびスロット

製品の詳細ページでは、購入ボックスは、左側のメディア領域と右側のコンテンツ領域の 2 つのリージョンに分割されます。既定では、メディア領域列の幅とコンテンツ領域列の幅の比率は 2:1 になります。モバイルデバイスでは、2 つのリージョンがスタックされ、一方のリージョンがもう一方のリージョンの下に表示されます。テーマを使用して、列の幅とスタックランクをカスタマイズできます。

購入ボックスモジュールは、製品のタイトル、説明、価格、および評価をレンダリングします。また、顧客は、サイズ、スタイル、色などの製品属性が異なる製品バリアントを選択することもできます。顧客が製品バリアントを選択すると、モジュールは購入ボックス内の他のプロパティ (製品の説明や画像など) を更新してバリアント情報を反映します。

数量セレクターは、顧客が購入する品目の数量を指定できるようにするために用意されています。サイト設定では、顧客が購入できる最大数量を定義します。

購入ボックスから、カートへの製品の追加、欲しい物リストへの製品の追加、集配場所の選択などのアクションを実行することもできます。これらのアクションは、製品または製品バリアントに対して実行できます。製品を欲しい物リストに追加するには、顧客がサインインしている必要があります。

テーマを使用して、購入ボックスの製品プロパティとアクションコントロールの順序を削除または変更できます。

モジュールプロパティ

ヘッダータグ ーこのプロパティは、製品タイトルのヘッダータグを定義します。購入ボックスがページの上部にある場合は、アクセシビリティ基準を満たすようにこのプロパティを h1 に設定します。
「類似商品レコメンデーション」を有効にする - この機能を有効にすると、バイボックスに現在表示されている商品に似た商品のリンクが表示されます。この機能は、コマースのリリース 10.0.13 およびこれ以降でのみ利用できます。

購入ボックスモジュールで使用できるモジュール

メディアギャラリー – このモジュールを使用して、製品の詳細ページで製品の画像を紹介します。このモジュールの詳細については、メディアギャラリーモジュールを参照してください。
ストアセレクター – このモジュールを使用して、商品を受け取り可能な近くの店舗の一覧を表示します。これにより、ユーザーは場所を入力して、近隣にある店舗を見つけることができます。このモジュールの詳細については、店舗セレクタモジュールを参照してください。
ソーシャル共有 - このモジュールを購入ボックスに追加して、ユーザーがソーシャルメディアで製品情報を共有できるようにします。詳細については、ソーシャルシェアモジュールを参照してください。

購入ボックスのモジュール設定

サイト設定>拡張機能で、次の購入ボックスモジュールの設定を構成できます。

カートライン数量制限 – このプロパティを使用して、カートに追加できる各項目の最大数を指定します。たとえば、小売業者が、単一のトランザクションで販売できるのは各製品 10 個のみと決定する場合があります。
在庫 - 在庫設定の適用方法については、在庫設定を適用するを参照してください。
製品をカートに追加 – 製品をカートに追加設定を適用する方法については、製品をカート設定に追加を参照してください。

Adventure Works テーマのボックスモジュール定義拡張機能を購入

Adventure Works テーマが提供する購入ボックスモジュールには、PDP 購入ボックスのアコーディオンモジュール内での製品仕様モジュールの実装をサポートするモジュール定義拡張機能があります。 PDP 購入ボックスで製品仕様属性を紹介するには、製品仕様モジュールを購入ボックススロットのアコーディオンモジュールスロットに追加します。

重要

Adventure Works テーマは、Dynamics 365 Commerce バージョン 10.0.20 リリース時点で使用できます。

Commerce Scale Unit インタラクション

購入ボックスモジュールは、Commerce Scale Unit アプリケーションプログラミングインターフェイス (API) を使用して製品情報を取得します。製品の詳細ページの製品 ID を使用して、すべての製品情報を取得します。

購入ボックスモジュールをページに追加する

新しいページに購入ボックスモジュールを追加し、必要なプロパティを設定するには、次の手順に従います。

フラグメント に移動し、続いて新規を選択して新規フラグメントを作成します。
新規フラグメント ダイアログボックスで、ボックスを購入 モジュールを選択します。
フラグメント名 で、名前に購入ボックスフラグメント と入力し、OK を選択します。
購入用ボックスモジュールを含むメディアギャラリー スロットにて、省略記号 (...) を選択し、モジュールの追加 を選択します。
モジュールの選択 ダイアログボックスで、メディアギャラリー モジュールを選択して、OK を選択します。
購入用ボックスモジュールを含む店舗セレクター スロットにて、省略記号 (...) を選択し、モジュールの追加 を選択します。
モジュールの追加 ダイアログボックスで 店舗セレクター モジュールを選択し、OK を選択します。
保存を選択し、 編集の完了 を選択してフラグメントにチェックインし、発行を選択して公開します。
テンプレート に移動し、新規を選択して新たなテンプレートを作成します。
テンプレート名 配下の 新規テンプレート ダイアログボックスに、PDP のテンプレート を入力し、OK を選択します。
本文スロットで、省略記号 (...) を選択し、モジュールの追加を選択します。
モジュールの選択ダイアログボックスで、規定のページモジュールを選択して、OK を選択します。
既定のページの メイン スロットで、省略記号ボタン (...) を選択してから、フラグメントの追加を選択します。
フラグメントの選択 ダイアログボックスで、作成した 購入ボックスフラグメント フラグメントを選択し、続いて OK を選択します。
保存を選択し、 編集の完了 を選択してテンプレートをチェックインし、発行を選択して公開します。
ページ に移動し、新規を選択して新たなページを作成します。
新規ページの作成 ダイアログボックスの ページ名 に PDF ページ と入力し、次へを選択します。
テンプレートの選択 で、作成した PDF テンプレート を選択して次へを選択します。
レイアウトの選択 でページレイアウト (例: 柔軟性の高いレイアウト) を選択し、次へを選択します。
確認して終了 でページ構成を確認します。ページ情報の編集が必要な場合は戻るを選択します。ページ情報が正しい場合は ページの作成 を選択します。
新規ページの メイン スロットで、省略記号ボタン (...) を選択してから、フラグメントの追加を選択します。
フラグメントの選択 ダイアログボックスで、作成した 購入ボックスフラグメント フラグメントを選択し、続いて OK を選択します。
ページを保存してプレビューします。 ?productid=<product id> クエリ文字列パラメーターをプレビューページの URL に追加します。このようにして、製品コンテキストを使用してプレビューページの読み込みと表示を行います。
保存を選択し、 編集の完了 を選択してページにチェックインし、発行を選択して公開します。製品の詳細ページに、購入ボックスが表示される必要があります。