ヘッダーモジュール

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

この記事では、ヘッダーモジュールおよび Microsoft Dynamics 365 Commerce でのページヘッダーの作成方法について説明します。

Dynamics 365 Commerce では、ページのヘッダーは、ヘッダー、プロモーションバナー、cookie 同意モジュールを含むページフラグメントとして構成されます。

ヘッダーモジュールには、サイトのロゴ、ナビゲーション階層へのリンク、サイト上の他のページへのリンク、カートアイコンのモジュール、ウィッシュリスト記号、サインインオプション、検索バーが含まれています。ヘッダーモジュールは、サイトが表示されているデバイス (デスクトップデバイスまたはモバイルデバイス) に対して自動的に最適化されます。たとえば、モバイルデバイスでは、ナビゲーションバーをメニュー ボタンで折りたたむことができます (このボタンは、ハンバーガーメニューと呼ばれることもあります)。

以下の図は、ホームページにおけるヘッダーモジュールの例を示しています。

ヘッダーモジュールの例。

ヘッダーモジュールのプロパティ

ヘッダーモジュールは、ロゴの画像、ロゴのリンク、および個人用アカウントリンクのプロパティをサポートします。

ロゴのイメージとロゴのリンクのプロパティは、ページでロゴを定義するために使用されます。詳細については、タブの追加を参照してください。

個人用アカウントリンクプロパティを使用すると、サイト所有者がヘッダーでのクイックリンクを表示するためのアカウントページを定義できます。

ヘッダーモジュールで使用可能なモジュール

ヘッダーモジュールで使用できるモジュールは次の通りです。

ナビゲーションメニュー – ナビゲーションメニューは、チャネルナビゲーション階層やその他の静的ナビゲーションリンクを表します。詳細については、ナビゲーションメニューモジュールを参照してください。
検索 – 検索モジュールを使用すると、ユーザーは検索用語を入力して製品を検索できます。既定の検索ページの URL および検索クエリパラメーターは、サイトの設定 > 拡張子で指定する必要があります。検索モジュールには、検索ボタンまたはラベルを必要に応じて非表示にできるプロパティがあります。また、検索モジュールは、製品、キーワード、カテゴリ検索の結果など、自動提案オプションもサポートしています。
買い物カゴアイコン - 買い物カゴアイコンモジュールは、買い物カゴ内の品目数を随時示す買い物カゴアイコンを表します。詳細については、買い物カゴアイコンモジュールを参照してください。
サイトセレクター - サイト選択モジュールを使用すると、市場、地域、およびロケールに基づいて、さまざまな定義済みサイト間での閲覧が可能になります。詳細については、サイトセレクターモジュールを参照してください。
店舗セレクター - ヘッダーモジュールの店舗セレクタースロットに、ストア選択モジュールを含めることができます。この機能を使用すると、ユーザーは近くの店舗を参照および検索できます。ユーザーは、優先店舗を指定することもできます。優先店舗はヘッダーに表示されます。店舗選択モジュールがヘッダーモジュールに含まれている場合、モード プロパティを 店舗検索に設定する必要があります。詳細については、店舗セレクターモジュールを参照してください。

メモ

ヘッダーモジュールでの買い物カゴアイコンモジュールのサポートは、Dynamics 365 Commerce 10.0.11 リリース時点で使用できます。
ヘッダーモジュールでのサイトセレクターモジュールのサポートは、Dynamics 365 Commerce 10.0.14 リリース時点で使用できます。
ヘッダーモジュールでの店舗セレクターモジュールのサポートは、Dynamics 365 Commerce 10.0.15 リリース時点で使用できます。

Adventure Works テーマのヘッダーモジュール

Adventure Works テーマでは、ヘッダーモジュールはモバイルロゴ プロパティをサポートします。このプロパティを使用すると、モバイルビューポートにロゴを指定できます。 モバイルロゴ プロパティは、モジュール定義拡張機能として使用できます。

重要

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

ページで使用するヘッダーフラグメントの作成

ヘッダーフラグメントを作成するには、次の手順に従います。

フラグメント に移動し、続いて新規を選択して新規フラグメントを作成します。
フラグメントの選択 ダイアログボックスで、コンテナー モジュールを選択し、フラグメントの名前を入力して、OK を選択します。
既定の 既定のコンテナースロットを選択し、右側のプロパティウィンドウで幅プロパティを全画面表示に設定します。
既定のコンテナー スロットの省略ボタン (...) を選択し、モジュールの追加 を選択します。
モジュールの選択 ダイアログボックスで、クッキーの同意、ヘッダー、プロモーションバナー モジュールを選択し、続いて OK を選択します。
プロモーションバナー モジュールのプロパティペインで、メッセージの追加 を選択し、メッセージを選択します。
メッセージ ダイアログボックスで、テキストとプロモーションコンテンツのリンクを追加し、続いて OK を選択します。
Cookie の同意 モジュールのプロパティペインで、テキストとサイトのプライバシーページへのリンクを追加して構成します。
ヘッダーモジュールの ナビゲーションメニュー スロットにて、省略記号 (...) を選択し、モジュールの追加 を選択します。
モジュールの選択 ダイアログボックスで、ナビゲーションメニュー モジュールを選択し、続いて OK を選択します。
ナビゲーションメニューモジュールのプロパティペインで、ナビゲーションメニューのソース 配下の 小売りサーバー を選択します。
ナビゲーションメニューモジュールのプロパティペインで、静的メニュー項目 配下の メニュー項目の追加 を選択し、メニュー項目を選択します。
メニュー項目 ダイアログボックスで、メニュー項目テキスト の下に「連絡先」と入力します。
メニュー項目 ダイアログボックスの メニュー項目リンクターゲット 配下の、リンクの追加を選択します。
リンクの追加ダイアログボックスで、サイトの「コンタクト」ページに利用する URL を選択し、続いて、OKを選択します。
メニュー項目のダイアログボックスで、OK を選択します。
ヘッダーモジュールの検索スロットで、省略記号 (...) を選択し、モジュールの追加 を選択します。
モジュールの選択 ダイアログボックスで検索モジュールを選択して、OK を選択します。
検索モジュールのプロパティウィンドウで、必要に応じてプロパティを構成します。
ヘッダーモジュールの 買い物カゴアイコン スロットで、省略記号 (...) を選択し、モジュールの追加 を選択します。
モジュールの選択 ダイアログボックスで 買い物かごアイコン モジュールを選択して、OK を選択します。
買い物カゴモジュールのプロパティウィンドウで、必要に応じてプロパティを構成します。ユーザーがマウスオーバーした際に買い物カゴの概要 (ミニカートとも呼ばれます) を表示する場合は、ミニカートを表示するを選択します。
保存を選択し、 編集の完了 を選択してフラグメントにチェックインし、発行を選択して公開します。