注
Dynamics 365 Commerce のリテール・インタレスト・グループは、Yammer から Viva Engage に移転しました。 新しい Viva Engage コミュニティにアクセスできない場合は、このフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力して追加し、最新のディスカッションに参加してください。
この記事では、アクティブなイメージ モジュールと、それらを Microsoft Dynamics 365 Commerce のサイト ページに追加する方法について説明します。
アクティブなイメージ モジュールを使用して、画像に製品タグを埋め込みます。 その後、 eコマース サイトのユーザーは、タグの上にマウス ポインターを移動して、画像に表示されている製品をプレビューできます。 プレビューがポップアップ ウィンドウに表示されます。 ユーザーがプレビュー ポップアップ ウィンドウを選択すると、対応する製品の製品詳細ページ (PDP) に直接移動できます。
画像の X 座標と Y 座標を使用してタグを定義します。 タグがイメージ内で表す製品の製品 ID を使用して、タグ付けされた各ポイントを構成します。
次の図は、Adventure Works のホーム ページ上のプレビュー ポップアップ ウィンドウの例を示しています。
重要
- アクティブなイメージ モジュールは、Dynamics 365 Commerce バージョン 10.0.20 リリース以降で使用できます。
- アクティブなイメージ モジュールは、Adventure Works テーマで紹介されています。
有効な画像モジュール プロパティ
| プロパティ名 | 値 | 内容 |
|---|---|---|
| Image | イメージ ファイル | 画像を使用して 1 つ以上の製品を紹介できます。 画像は Commerce サイト ビルダーのメディア ライブラリーにアップロードするか、既存の画像を使用できます。 |
| Width | ピクセル数 | このプロパティは、画像の幅を定義します。 有効な座標は、画像の幅に基づいて計算されます。 |
| 有効な座標 | X 座標と Y 座標、および製品 ID 番号 | 有効な各画像配列は、X 座標と Y 座標、および製品 ID 番号で構成されます。 |
| ヘッダー | ヘッダー テキストとヘッダー タグ (H1、H2、H3、H4、H5、または H6) | 既定では、H2 ヘッダー タグがヘッダーに使用されますが、アクセシビリティ要件を満たすようにヘッダー タグを変更できます。 |
| 段落 | 段落のテキスト | モジュールは、リッチ テキスト形式の段落テキストをサポートします。 ハイパーリンク、太字、下線付き、および斜体など、基本的なリッチ テキスト機能がいくつかサポートされます。 これらの機能の一部は、モジュールに適用されるページ テーマによって上書きされる場合があります。 |
| リンク | リンク テキスト、リンク URL、アクセス可能リッチ インターネット アプリケーション (ARIA) ラベル、および 新しいタブでリンクを開くセレクター | モジュールは、1 つ以上の "アクションの呼び出し" リンクをサポートします。 リンクを追加すると、リンク テキスト、URL、および ARIA ラベルが必要になります。 ARIA ラベルは、アクセシビリティ要件を満たしていることを説明する必要があります。 リンクは、新しいタブで開くように構成できます。 |
| サブ テキスト | ヘッダー、テキスト、およびリンク | 画像に対する追加のコンテキストでは、作成者またはデザイナー名、個人用ブログへのリンクなどを追加できます。 |
| テキストのテーマ | 明るいまたは暗い | このプロパティを使用すると、ユーザーは背景画像に基づいてテキストを明暗に設定できます。 Adventure Works テーマのテーマ拡張として使用できます。 |
有効な画像モジュールを新しいページに追加する
アクティブなイメージ モジュールを新しいページに追加し、必要なプロパティを設定するには、次の手順に従います。
- テンプレートに移動し、サイトのホーム ページのマーケティング テンプレートを開きます (または、新しいマーケティング テンプレートを作成します)。
- 既定のページの メイン スロットで、省略記号 (...) を選択し、モジュールの追加 を選択します。
- モジュールの選択 ダイアログ ボックスで、有効な画像 モジュールを選択して、OK を選択します。
- 保存 を選択し、 編集の完了 を選択してテンプレートをチェックインし、発行 を選択して公開します。
- ページに移動し、サイトのホーム ページを開きます (または、マーケティング テンプレートを使用して新しいホーム ページを作成します)。
- 既定のページの メイン スロットで、省略記号ボタン (...) を選択してから、モジュールの追加 を選択します。
- モジュールの選択 ダイアログ ボックスで、有効な画像 モジュールを選択して、OK を選択します。
- 有効な画像モジュールのプロパティ ウィンドウで、画像を追加し、キャンバスの幅を画像のサイズに設定します。
- X 座標と Y 座標を設定し、適切な製品 ID 番号を追加します。
- 必要に応じて、有効な画像モジュールを追加および構成します。
- 保存 を選択し、 続いてプレビュー を選択してページをプレビューします。
- 編集の完了 を選択してテンプレートをチェックインし、 発行 を選択して公開します。