1. Search

チュートリアル: ページへの検索機能の追加

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

訪問者が探しているものをすばやく見つけられるように、SXAにはすぐに使える柔軟な検索機能が備わっています。ツールボックスからは、検索ボックスを追加するレンダリングや、検索結果を並べ替えたりフィルタリングしたりするレンダリングなど、さまざまな検索レンダリングを使用できます。これにより、サイトの簡単な検索ソリューションを簡単に設定できます。

たとえば、検索クエリ ボックスを含み、結果をページネーションで一覧表示する基本的な検索ソリューションをページに追加できます。

メモ

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

このチュートリアルでは、次の方法について説明します。

  • Search Boxレンダリングを追加する

  • Search Resultsレンダリングを追加する

  • Page Selectorレンダリングを追加する

Search Boxレンダリングを追加する

訪問者がサイトを検索できるようにするために、ページに検索ボックスを追加できます。デフォルトでは、Search Boxレンダリングによって検索テキストボックスがページに追加されます。検索ボックスをカスタマイズするには、アイテムを構成し、プロパティを変更します。

ページに検索ボックスを追加するには:

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

  2. Select the Associated Contentダイアログ ボックスの検索ボックスで、Default項目を選択します。

  3. ページ上の検索ボックスのテキストを変更するには、Search Boxツール バーでEdit component configuration item をクリックします。

    Click edit to display the search box fields.

  4. ダイアログボックスで、次のフィールドを編集し、「 OK」をクリックします。

    • Search button text – レンダリングのボタンのテキスト。このフィールドを空のままにすると、ボタンはページに表示されません。

    • Textbox placeholder text – 期待値を説明するヒントとして機能する検索ボックス内のテキスト。

    • Search textbox label – 検索レンダリングのタイトル。

      たとえば、次のフィールドがあるとします。

      Enter the search button text and the search box placeholder text.

      ページに次の検索ボックスを表示します。

      Search box result after setting the fields.

  5. Search Boxのレンダリング プロパティを変更するには (たとえば、検索する単語の検索範囲やヒントを追加する場合)、Search Boxツール バーでMore,をクリックし、Edit component propertiesをクリックします。

  6. Control Propertiesダイアログ ボックスでは、基本的な検索ソリューションについては、既定値のままにしておくことができます。より複雑なソリューションの場合は、次のフィールドを編集できます。

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

    • Target signature – 別の検索結果ページを作成した場合は、そのページのSearch Resultsレンダリングの署名をここに入力します。

    • Search scope – 検索結果を制限する範囲を選択します。

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

    • Search results page –別のページに誘導する場合は、特定の検索ページを選択します。

      手記

      Search results pageは、Search Resultsコンポーネントを含むWebサイト上の別のページです。このページは、ユーザーがサイトのどこからでも検索を行ったときに検索結果を表示するランディング ページとして機能します。通常、このページには、Search Box、Page Selector、Sort Results、一部のフィルターなど、他の関連する検索コンポーネントも含まれています。Search BoxコンポーネントにSearch results pageパラメータが設定されている場合、この検索結果のランディング ページにリダイレクトされます。

    • Show search textbox – デフォルトで選択されています。検索テキストボックスを削除するには、クリアします。

    • Suggestions mode – ドロップダウンボックスからオプションを選択します。

      次のオプションがあります。

      Show search results: 検索結果をレンダリング バリアントで表示します。ユーザーはクリックしたアイテムにリダイレクトされます。

      Show predictions: 検索エンジンが提供する検索フレーズの予測を表示します。訪問者が検索候補をクリックすると、検索が実行されます。このモードはSolrでのみサポートされます。

      Show search results as predictions:クリックしたテキストが検索ボックスに入れられ、検索が行われます。

      警告

      SXAはsxaSuggesterと呼ばれるサジェスタを使用します。Solrで検索候補を設定する場合は、必ずその名前を使用してください。

Search Resultsレンダリングを追加する

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

Search Resultsレンダリングを追加するには:

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

  2. ページ上の検索ボックスのテキストを変更するには、Search Resultsツール バーでEdit component configuration item をクリックし、検索結果が返されない場合に表示するテキストを入力します。「 OK」をクリックします。

  3. Search Resultsレンダリング パラメータを変更するには、たとえば、一度に読み込む結果の数や結果の並べ替え方法を決定するには、Select the Associated Contentダイアログ ボックスでDefaultアイテムを選択します。

  4. Control Propertiesダイアログボックスで、次のフィールドを編集して、検索結果の配置方法を指定します。

    • Search results signature – 特定のSearch Resultsレンダリングの一意のシグネチャを入力して、検索結果を制限します。これは、ページに複数の検索結果がレンダリングされていて、特定の検索結果のみをフィルタリングする場合に便利です。このフィールドを空のままにすると、署名のないすべてのSearch Resultsレンダリングがフィルタリングされます。

    • Search scope – 検索結果を制限する範囲を選択します。

    • Page size – レンダリングでロードする結果の数を入力します。

    • Default language filtering – 検索に使用する言語を選択します。

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

    • Automatically fire search when no criteria set - 選択すると、ユーザーが検索条件を入力するまで検索はトリガーされません。

Page Selectorレンダリングを追加する

ページセレクタレンダリングを使用すると、結果ページの表示方法を決定できます。表示されるページ数は、Search Resultsレンダリングで設定されたデフォルトのページ サイズ、またはページ サイズ レンダリングが使用されている場合は、ページ サイズ レンダリングで設定されたページ サイズによって異なります。

ページセレクターレンダリングを追加するには:

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

  2. Page Selectorツールバーで、「Edit component configuration item」をクリックします。

  3. ダイアログボックスで、フィールドに入力し、OK.

    たとえば、次のフィールドがあるとします。

    Enter the page selector fields.

    次のように表示されます。

    Page selector display after setting the fields.

  4. ページセレクタレンダリングのプロパティを変更するには、たとえば、ボタンに表示されるページ数を決定するには、Search boxで をクリックし、More,をクリックし、Edit component propertiesをクリックします。

  5. Control Propertiesダイアログボックスで、次のフィールドを編集し、「OK」をクリックします。

    • Search results signature – 特定のSearch Resultsレンダリングでフィルタリングする場合は、検索するSearch Resultsレンダリングの署名 (カンマ区切り) を入力します。

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

    たとえば、Collapsed mode thresholdフィールドに「10」と入力すると、検索結果に次のように表示されます。

    Example of using the collapsed mode threshold.
この記事を改善するための提案がある場合は、 お知らせください!