SXA 検索コンポーネントの使用

概要

検索ボックス、検索結果、結果をさらに表示、結果バリアント セレクターなどの検索コンポーネントの詳細について説明します。

SXA は、定義済みの検索コンポーネントを付属しています。ページに検索コンポーネントを追加すると、これらは自動的に相互に作用します。同じページで複数の検索を行う場合は、コンポーネントのシグネチャ プロパティを変更する必要があります。

注記

検索コンポーネントの検索要求の結果を表示するには、プレビュー モードに切り替える必要があります。

訪問者がサイトを検索できるように、ページに検索ボックスを追加できます。

検索ボックス コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスから、ページに検索ボックス コンポーネントをドラッグします。

  2. [関連付けられたコンテンツを選択してください。] ダイアログ ボックスの検索ボックスで、既定のアイテムを選択します。

  3. ページ上の検索ボックスのテキストを変更するには、検索ボックス ツールバーで [コンポーネント設定アイテムを編集します] をクリックし、[編集] をクリックして検索ボックスのフィールドを表示します。ダイアログ ボックスで、次のフィールドを編集できます。

    フィールド

    説明

    検索ボタンのテキスト

    ボタンのテキストを入力します。このフィールドを空のままにすると、ボタンはページに表示されません。

    テキストボックスのプレースホルダー テキスト

    期待される値を説明するヒントとして機能するテキストを検索ボックスに入力します。

    検索テキストボックスのラベル

    検索レンダリングのタイトルを入力します。

  4. 検索ボックス レンダリングのプロパティを変更するには、[検索ボックス] ツールバーで [その他] をクリックして [コンポーネント プロパティを編集します] をクリックします。

    フィールド

    説明

    検索結果シグネチャ

    特定の検索結果レンダリングの一意のシグネチャを入力して検索結果を制限します。これは、ページに複数の検索結果レンダリングがある場合に便利です。

    ターゲット シグネチャ

    別々の検索結果ページを作成した場合は、ページの検索結果レンダリングのシグネチャをここに入力します。

    検索スコープ

    スコープを選択して、検索結果を制限します。

    最大予測結果数

    ドロップ ダウンに表示される予測結果の最大数を設定します。このフィールドを空のままにすると、予測は表示されません。

    検索結果ページ

    別のページに移動する場合は、特定の検索ページを選択します。

    検索テキストボックスを表示

    既定で選択されています。クリアすると、検索テキスト ボックスが削除されます。

    提案モード

    ドロップダウン ボックスからオプションを選択します。次のオプションがあります。

    • [検索結果を表示]: レンダリング バリアントによってレンダリングされた検索結果を示します。ユーザーはクリックしたアイテムにリダイレクトされます。

    • [予測を表示]: 検索エンジンが提供する検索フレーズ予測を表示します。このモードは Solr でのみサポートされています。

    • [検索結果を予測として表示する]: クリックしたテキストが検索ボックスに入力され、検索が実行されます。

注記

コンテンツは SXA 検索サービスによって生成されるため、検索ボックス コンポーネント内でプレースホルダーを表示または編集することはできません。

ユーザーが検索結果を表示するには、ページに検索結果レンダリングを追加する必要があります。シンプルな解決策として、検索結果を同じページに表示させることができます。

検索結果コンポーネントを追加するには、次の手順に従います。

  1. ページに検索結果セクションを追加するには、ツールボックスからページに [検索結果] レンダリングをドラッグします。

  2. ページ上にある検索ボックスのテキストを変更するには、[検索結果] ツールバーで [コンポーネント設定アイテムを編集します] をクリックし、検索で結果が返されなかったときに表示するテキストを入力します。[OK] をクリックします。

  3. 検索結果レンダリングのパラメーターを変更するには、[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、既定のアイテムを選択するか、新しいアイテムを作成します。

  4. [コントロール プロパティ] ダイアログ ボックスでは、次のフィールドを編集できます。

    フィールド

    説明

    検索結果シグネチャ

    検索結果を制限するために特定の検索結果レンダリングの一意のシグネチャを入力します。これは、ページ上に 1 つ以上の検索レンダリングがあり、特定の検索結果をフィルター処理する場合に便利です。このフィールドを空のままにすると、シグネチャのないすべての検索結果のレンダリングがフィルター処理されます。

    検索スコープ

    スコープを選択して、検索結果を制限します。

    ページ サイズ

    レンダリングで読み込む結果の数を入力します。

    既定の言語フィルター処理

    検索に使用する言語を選択します。

    既定の並べ替え順

    ページで結果を並べ替える方法を選択します。これは、結果の並べ替えレンダリングが使用されていない場合にのみ使用されます。

    条件が設定されていない場合、自動的に検索をやめる

    選択すると、検索はユーザーが検索条件を入力するまでトリガーされません。

結果の並べ替えコンポーネントを使用すると、検索結果を並べ替えることができます。

新しい並べ替え結果データ ソースを作成するには、次の手順に従います。

  1. コンテンツ エディターで、sitecore/content/<Tenant>/<Site>/Data にナビゲートします。

  2. [結果の並べ替え] を右クリックし、[挿入] をクリックして [グループの並べ替え] をクリックします。

  3. 名前を入力して、[OK] をクリックします。

  4. 次のフィールドを編集します。

    フィールド

    説明

    タイトル

    タイトルを入力します。例: 価格の安い順

    ファセット

    並べ替えを実行するファセットを選択します。

    方向

    並べ替え方法 (昇順、降順、ランダム化、または関連性など) を選択します。

    たとえば、次の並べ替え順序コンポーネントを使用すると、訪問者は果物をカロリー、価格、名前で並べ替えることができます。

    SXA-sort-order.png
    SXA-search-sort-order.png

[さらに読み込む] コンポーネントは、[検索結果] コンポーネントと組み合わせて使用します。訪問者は [結果をさらに表示] をクリックして、[検索結果] コンポーネントの次の範囲の結果を動的に読み込むことができます。

結果をさらに表示コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスの [検索] セクションで、[結果をさらに表示] コンポーネントを選択し、ページにドラッグします。

  2. 関連付けられたコンテンツを選択してください。] ダイアログ ボックスで既存のアイテムにリンクするには、目的のコンテンツ アイテムをクリックし、[OK] をクリックします。または、新しいリンクを作成するには、[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[作成] をクリックします。

  3. [結果をさらに表示] ツールバーで歯車をクリックし、[結果をさらに表示] ボタンのラベルを変更します (「結果をさらに表示する」など)。

    SXA-load-more-label.png
    SXA-load-more-results.png
  4. 既定でリストされる結果の数は、[検索結果] コンポーネント設定で設定します。これを変更するには、[検索結果] ツールバーで [その他] をクリックし、[コンポーネント プロパティを編集する] をクリックして、[ページ サイズ] フィールドの数値を変更し、[OK] をクリックします。

    SXA-search-results-page-size.png
  5. 検索結果シグネチャを追加するには、[詳細] をクリックして [コンポーネント プロパティを編集する] をクリックします。検索結果コンポーネントのシグネチャ (またはコンマで区切られた複数のシグネチャ) により、[結果をさらに表示] を特定の検索結果にリンクできます。これは、多くの [検索結果] コンポーネントが同じページにある場合に便利です。

検索結果コンポーネントは、特定の検索クエリの検索結果数を表示します。

検索結果数コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスの [検索] セクションで、[結果数] コンポーネントを選択し、ページにドラッグします。

  2. [結果数] ツールバーで、歯車をクリックしてテキストを変更します。結果数のテキストは、{count} を含んでいる必要があります。例、条件に一致する {count} 個のフルーツがあります

結果バリアント セレクター コンポーネントを使用すると、表示される検索結果の外観を変更できます。これは、コンポーネントのバリアントを使用して、表示される結果の外観を変更します。

結果バリアント セレクター コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスの [検索] セクションで、[結果バリアント セレクター] コンポーネントを選択し、ページにドラッグします。

  2. [その他] をクリックし、[コンポーネント プロパティを編集する] ダイアログの [SearchCriteria] セクションでは、次のフィールドを編集できます。

    • [検索結果シグネチャ] - 検索結果コンポーネントの 1 または複数のシグネチャ (コンマで区切られたもの)。

    • [利用可能なバリアント] - コンポーネントで使用されるコンポーネント バリアントのリスト。これは、コンポーネントによって表示されるアイコンの数と、サポートされる結果のさまざまなビューの数に影響します。

ページ セレクターを使用して、検索結果のページを変更できます。複数のシグネチャを使用すると、他の検索結果コンポーネントを同じページ セレクターに接続できます。

表示されるページ数は、検索結果コンポーネントで設定した既定のページ サイズによって、またはページ サイズ コンポーネントで選択したページ サイズによってそれぞれ異なります。

ページ セレクターを使用するには、次の手順に従います。

  1. ツールボックスから、[ページ セレクター] レンダリングをページにドラッグします。

  2. [ページ セレクター] ツールバーで、[コンポーネント設定 アイテムを編集します] をクリックします。

  3. ダイアログ ボックスで、ラベル テキスト フィールドに入力し、[OK] をクリックします。例を以下に示します。

    ラベル テキストのダイアログ。
  4. ページ セレクター レンダリングのプロパティを変更するには、[検索ボックス] ツールバーで [詳細] をクリックし、[コンポーネント プロパティを編集する] をクリックします。次のフィールドを編集してから、[OK] をクリックします。

    フィールド

    説明

    検索結果シグネチャ

    特定の検索結果レンダリングでフィルター処理するには、検索する検索結果レンダリングのシグネチャを (コンマで区切って) 入力します。

    折りたたみモードのしきい値

    多くのページで結果が予想される場合は、これらのページの一部をドットに置き換えることができます。

ページ サイズ コンポーネントを使用して、検索結果コンポーネントで表示される結果の数を動的に変更します。

ページ サイズ コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスから、ページにページ サイズ コンポーネントをドラッグします。

  2. [詳細] をクリックし、[コンポーネント プロパティを編集する] ダイアログの [SearchCriteria] セクションでは、次のフィールドを編集できます。

    フィールド

    説明

    検索結果シグネチャ

    特定の検索結果レンダリングでフィルター処理するには、検索する検索結果レンダリングのシグネチャを (コンマで区切って) 入力します。

    既定のページ サイズ

    既定のページ サイズ (8、16、または 32) を選択します。

    ページング スキーマ

    ページ サイズ ドロップダウンの値を入力するために使用するページング スキーマ アイテムを選択します。

Location Finder コンポーネントを使用すると、ユーザーは都市、州、または郵便番号のフォームで検索条件を入力できます。都市を選択すると、ハッシュ クエリがすぐにトリガーされ、新しい場所で更新されて、検索が実行されます。このコンポーネントをページに追加する前に、いくつかの設定を作成する必要があります。

Location Finder コンポーネントを使用するには、次の手順に従います。

  1. ツールボックスから、Location Finder レンダリングをページにドラッグします。

  2. [Location Finder] ツールバーで、歯車をクリックして、次のフィールドを編集します。

    フィールド

    説明

    ファセット

    地理空間検索結果の並べ替えに使用するファセット アイテムを選択します。たとえば、フィルターでマイル単位を使用するように指定するには、DistanceFacet アイテムを使用します。

    フィルター タイトル

    コンポーネントのタイトルを入力します。

    検索ボタンのテキスト

    検索ボタンのテキストを入力します。空のままにすると、ボタンは表示されません。

    テキストボックスのテキスト

    期待される値を説明するヒントとして機能するテキストを検索ボックスに入力します。

    検索テキストボックスのラベル

    テキスト ボックスのラベル テキストを入力します。

    現在地テキスト

    コンポーネントがユーザーの位置を検出するように設定されている場合に、テキスト ボックスに表示するテキストを入力します。

  3. [詳細] をクリックし、[コンポーネント プロパティを編集する] をクリックして、次のフィールドを編集します。

    • [モード] - コンポーネントが次の 3 つのモードのいずれかで動作するように設定します。

      • [CurrentLocation] - このモードでは、ページにコンポーネントが表示されず、ブラウザーから自動的に場所が取得されます。

      • [Mixed] - このモードでは、場所はブラウザーから自動的に取得されますが、テキスト ボックスも表示され、ユーザーは場所を変更できます。

      • [UserProvided] - このモードでは、テキスト ボックスが表示され、ユーザーは場所を入力できます。

    • [最大予測結果数] – ドロップダウンに表示される予測結果の最大数を指定します。このフィールドを空のままにすると、予測は表示されません。