購入ボックスモジュール

[アーティクル]
03/08/2023

この記事では、購入ボックスモジュールと、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 に追加します。このようにして、製品コンテキストを使用してプレビューページの読み込みと表示を行います。
保存を選択し、 編集の完了 を選択してページにチェックインし、発行を選択して公開します。製品の詳細ページに、購入ボックスが表示される必要があります。