フィードバックを送信
Search Pages and Widgets
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

検索ウィジェットテンプレートの使用

デフォルトの検索ウィジェットのビューは便利ですが、サイトのウィジェットには特定のデザインが必要になる可能性があります。 利用可能なウィジェット テンプレートのいずれかを選択するか、新しいテンプレートを作成することができます。 ウィジェットの表示用テンプレートの作成に関する一般的な情報については、 ウィジェット テンプレートを使用したウィジェットのスタイル設定 を参照してください。

各ウィジェットの 構成から、表示テンプレート フィールドからテンプレートを選択します。 使用可能なテンプレートは、構成しているウィジェット専用に作成されており、グローバル サイトまたは現在のサイトの サイト メニュー (Site Menu) → デザイン → テンプレート → ウィジェット テンプレートで表示できます。

インスタンス設定 からウィジェットのデフォルトのテンプレートを変更できます。 ウィジェットをページに追加すると、構成されたテンプレートがデフォルトになります。 これを行うには、テンプレート エディターからウィジェット テンプレートのキーを取得する必要があります。

インスタンス スコープでデフォルトのウィジェット テンプレートを設定し、ウィジェット スコープでそれをオーバーライドできます。

すぐに使用できるテンプレートがいくつか用意されています。

すぐに使えるテンプレートの使用

すぐに使用できるウィジェット テンプレートをそのまま使用することも、 独自のウィジェット テンプレートを作成するためのインスピレーションとして使用することもできます。 以下にプレビューを示しますので、どれが自分に最適か確認してください。

カスタムフィルター

デフォルトのテンプレート:

デフォルトのカスタム フィルター レイアウト。

コンパクト レイアウト テンプレート:

コンパクトなカスタム フィルター レイアウト。

デフォルトのテンプレート:

デフォルトの検索バーのレイアウト。

左揃えアイコンレイアウトテンプレート:

左揃えの検索バーのレイアウト。

注

左揃えアイコンレイアウト テンプレートは、 検索バーの候補をサポートしていません。

検索ファセット

すべての検索ファセット ウィジェットには、デフォルトのテンプレートが用意されています。

デフォルトの検索ファセット レイアウト。

コンパクト レイアウト テンプレートは、変更されたファセット ウィジェットを除くすべてのウィジェットで使用できます。

コンパクトな検索ファセット レイアウト。

ラベル レイアウト テンプレートは、変更されたファセット ウィジェットを除くすべてのウィジェットで使用できます。

ラベル検索ファセット レイアウト テンプレート。

クラウド レイアウト テンプレートは、タグ ファセット ウィジェットとカテゴリ ファセット ウィジェットで使用できます。

クラウド検索ファセット レイアウト。

語彙レイアウトテンプレートは、 カテゴリファセットウィジェットで使用できます。

語彙レイアウトは、カテゴリ ファセット ウィジェットで使用できます。

ラジオ レイアウト テンプレートは、ユーザーの選択を 1 つに制限し、カスタム ファセットと変更されたファセットで使用できます。

ラジオ レイアウトは、カスタム ファセット ウィジェットと変更されたファセット ウィジェットで使用できます。

チェックボックス レイアウトは、カスタム ファセットで使用できます。 その主な目的は、デフォルトのテンプレートのテンプレートベースの実装を提供することです。 これを独自の カスタムテンプレートの開始点として使用できます。

チェックボックス レイアウトは、カスタム ファセットで使用できます。

コマース検索結果

リスト レイアウト テンプレートがデフォルトです。

デフォルトの検索結果レイアウト。

カードのレイアウトです。

カード検索結果のレイアウト。

コンパクトなレイアウト:

コンパクトな検索結果レイアウト。

類似結果

コンパクト レイアウト テンプレートがデフォルトです。

コンパクトな類似結果レイアウト。

リスト レイアウト テンプレート:

類似結果リストのレイアウト。

カードレイアウトテンプレート:

カードは同様の結果レイアウトになります。

検索ウィジェットテンプレートの作成

  1. テンプレートを使用するサイトに移動します。

    注

    すぐに使用できるウィジェット テンプレートがグローバル サイトに表示されます。 あなたも同じことをしたり、特定のサイトに自分のものを追加したりすることができます。

  2. サイト → デザイン → テンプレートを開きます。

  3. ウィジェット テンプレート タブをクリックします。

  4. 新規 → その他をクリックします。

  5. ウィジェットのリストから、テンプレートのターゲットとするウィジェットを選択します。

    注

    検索結果テンプレートの最初のリストは検索結果ウィジェットを対象としており、同じ名前の 2 番目のリストはコマース検索結果ウィジェットを対象としています。

  6. エディターの定義済み変数を使用して、FreeMarker を使用してテンプレートを作成します。

  7. 完了したら [保存] をクリックするか、 [保存して続行] をクリックして進捗状況を保存し、作業を続行します。

保存したら、ウィジェット設定からテンプレートを選択できます。

既存のテンプレートをコピーし、必要に応じて変更することで、テンプレートの開発を加速できます。

  1. グローバルサイトへアクセスしてください。 サイトの選択 (Go to Site) → マイサイト → グローバルをクリックします。

  2. サイト → デザイン → テンプレートを開きます。

  3. ウィジェット テンプレート タブをクリックします。

  4. コピーするテンプレートのタイトルを検索します。 たとえば、コンパクト レイアウト テンプレートから開始するには、 compact を検索します。

  5. 必要なウィジェットのエントリを見つけて、 アクション (Actions) → コピーを作成をクリックします。

    既存のテンプレートをコピーできます。

  6. エディターの定義済み変数と独自の FreeMarker を使用して、テンプレートを作成します。

    エディターを使用してテンプレートを作成します。

  7. 完了したら [保存] をクリックするか、 [保存して続行] をクリックして進捗状況を保存し、作業を続行します。

保存したら、ウィジェット設定からテンプレートを選択できます。

例: 検索結果ウィジェットのコンパクトレイアウトテンプレートの拡張

この例では、コンパクト レイアウト テンプレートを拡張して、結果の最終更新日を含めます。

  1. グローバル サイトのメニューで、 サイト → デザイン → テンプレート を開き、 ウィジェット テンプレート タブをクリックします。

  2. コンパクトを検索し、検索結果テンプレートの アクション (Actions) → コピーを作成 をクリックします。

  3. 名前を Compact with Detailsにします。

  4. 自分のコピーが他のコピーとともにリストに表示されるので、 「詳細付きでコンパクト」 をクリックして編集を開始します。

  5. テンプレートのリスト項目ブロック ( <li> から </li>までのコード) を次のコードに置き換えます。

    <li class="c-mb-3 c-mt-3">
   <a class="link-primary single-link" href="${entry.getViewURL()}">
      ${entry.getHighlightedTitle()}
   </a>
   <details class="text-2">
      <summary>Details...</summary>
      <p class ="c-mb-0 c-mt-0">
         Last modified:<em>${entry.getModifiedDateString()?keep_before(",")}</em>
      </p>
      <#if entry.getModifiedByUserName()?has_content>
         <p class ="c-mb-0 c-mt-0">
            Edited by: <em>${entry.getModifiedByUserName()}</em>
         </p>
      </#if>
   </details>
</li>

  6. [保存]をクリックします。

既存のテンプレートのコピーから始めると便利です。

Search Results Widget Template Reference