Use the SXA search components

Abstract

Learn more about search components such as Search box, Search Results, Load More, and Results Variant Selector.

SXA comes with a large number of predefined search components. When you add search components to the page, they automatically interact with one another. If you want to have multiple searches on the same page, you must change the signature property on the components.

Note

You must switch to Preview mode to view the search request results of your search components.

To enable your visitors to search your site, you can add a search box to your pages.

To use the Search Box component:

  1. From the Toolbox, drag the Search Box component to the page.

  2. In the Select the Associated Content dialog box, for the search box, click the Default item.

  3. To change the text of the search box on the page, in the Search Box toolbar, click Edit component configuration item. Click Edit to display the search box fields. In the dialog box, you can edit the following fields:

    Field

    Description

    Search button text

    Enter the button text. If you leave this field empty, the button does not appear on the page.

    Textbox placeholder text

    Enter the text in the search box that functions as a hint to describe the expected value.

    Search textbox label

    Enter a title for the search rendering.

  4. To change the Search Box rendering properties, in the Search Box toolbar, click More, and click Edit component properties:

    Field

    Description

    Search results signature

    Enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page.

    Target signature

    If you created a separate search results page, enter the signature of that page here.

    Search scope

    Select a scope to limit the search results.

    Max predictive results count

    Sets the maximum number of predictive results shown in the drop down. When you leave this field empty, no predictions are shown.

    Search results page

    Select the specific search page, if you want to direct to a separate page.

    Show search textbox

    Selected by default. Clear to remove the search text box.

    Suggestions mode

    Select an option from the drop-down box. The options are:

    • Show search results: shows the search results, rendered by rendering variants. The user is redirected to the clicked item.

    • Show predictions: shows search phrase predictions provided by the search engine. This mode is supported for Solr only.

    • Show search results as predictions: clicked text will be put in the search box and a search is performed.

Note

You cannot render or edit placeholders within the Search Box component because its content is generated by the SXA search service.

For users to view the results of their search, you must add the Search Results rendering on the page. For simple solutions, you can have the search results appear on the same page.

To add the Search Results component:

  1. To add a search results section to your page, from the Toolbox, drag the Search Results rendering to the page.

  2. To change the text of the search box on the page, in the Search Results toolbar, click Edit component configuration item and enter the text that you want to appear when the search returns no results. Click OK.

  3. To change the Search Results rendering parameters, in the Select the Associated Content dialog box, select the Default item or create a new item.

  4. In the Control Properties dialog box, you can edit the following fields:

    Field

    Description

    Search results signature

    Enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page and you only want to filter on specific search results. When you leave this field empty, it will filter all Search Results renderings with no signature.

    Search scope

    Select a scope to limit the search results.

    Page size

    Enter the number of results you want to be loaded by the rendering.

    Default language filtering

    Select the language you want to use for the search.

    Default sort order

    Select the way the results are sorted on the page. This is only used when the Sort Results rendering is not used.

    Automatically fire search when no criteria set

    When selected the search is not triggered until the user provides search criteria.

The Sort Results component lets you sort search results.

To create a new sort results data source:

  1. In the Content Editor, navigate to sitecore/content/<Tenant>/<Site>/Data.

  2. Right-click Sort Results, click Insert, and click Sorting Groups.

  3. Enter a name and click OK.

  4. Edit the following fields:

    Field

    Description

    Title

    Enter a title. For example: Price Low to High.

    Facet

    Select the facet by which the sorting is performed.

    Direction

    Select how to sort: Ascending, Descending, Randomize, or Relevance.

    For example, the following Sort Order component enables visitors to sort fruits by calories, prices, and name.

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

You use the Load More component in combination with the Search Results component. Visitors can click Load More to dynamically load the next range of results of the Search Results component.

To use the Load More component:

  1. From the toolbox, from the Search section, click the Load More component and drag it to the page.

  2. In the Select the Associated Content dialog box, to link to an existing item, click the content item that you want and click OK. Alternatively, to create a new link, in the Select the Associated Content dialog box, click Create.

  3. In the Load More toolbar, click the cogwheel to change the label on the Load More button, for example, to Load more results.

    SXA-load-more-label.png
    SXA-load-more-results.png
  4. The number of results that are listed by default are set in the Search Results component configuration. To change this, on the Search results toolbar, click More, click Edit component properties, and in the Page Size field change the number and click OK.

    SXA-search-results-page-size.png
  5. To add a Search Results signature, click More, and click Edit component properties. The signature (or multiple signatures separated by a comma) of the Search Results component can link the Load More with certain search results. This can be convenient when you have more Search Results components on the same page.

The Result Count component displays the number of search results of a specific search query.

To use the Result Count component:

  1. From the toolbox, from the Search section, click the Result Count component and drag it to the page.

  2. On the Results Count toolbar, click the cogwheel to change the text. The Results Count text must include {count} . For example: We have {count} fruits meeting your criteria.

The Results Variant Selector component lets you change the look and feel of displayed search results. It uses component variants to change the look of displayed results.

To use the Results Variant Selector component:

  1. From the toolbox, from the Search section, click the Results Variant Selector component and drag it to the page.

  2. Click More, and click Edit component properties. In the dialog, in the SearchCriteria section, you can edit the following fields:

    • Search results signature - one or multiple signatures (separated by comma) of the Search Results component.

    • Available variants - list of component variants that will be used by the component. This influences how many icons are displayed by the component and how many different views of the results are supported.

You can use the Page Selector to change the page of the search results. If you use multiple signatures, you can connect other search results components to the same Page Selector.

The number of pages displayed depends on the default page size you configure in the Search Results component or on the page size you select in the Page Size component.

To use the Page Selector:

  1. From the Toolbox, drag the Page Selector rendering to the page.

  2. In the Page Selector toolbar, click Edit component configuration item.

  3. In the dialog box, fill in the label text fields and click OK. For example:

    Dialog for label texts.
  4. To change the properties of the Page Selector rendering, in the Search Box toolbar, click More, and click Edit component properties. Edit the following fields and then click OK:

    Field

    Description

    Search results signature

    To filter on specific Search Results renderings, enter the signature(s) (separated by a comma) of the Search Results rendering(s) that you want to search on.

    Collapsed mode threshold

    If you expect results on many pages, you can replace some of these pages by dots.

You use the Page Size component to dynamically change the number of results displayed by the Search Results component.

To use the Page Size component:

  1. From the Toolbox, drag the Page Size component to the page.

  2. Click More, and click Edit component properties. In the dialog box, in the SearchCriteria section, you can edit the following fields:

    Field

    Description

    Search results signature

    To filter on specific Search Results renderings, enter the signature(s) (separated by a comma) of the Search Results rendering(s) that you want to search on.

    Default page size

    Select a default page size: 8, 16, or 32.

    Paging schema

    Select the paging schema item that will be used to populate page size drop-down values.

The Location Finder component lets users enter search criteria in the form of a city, state, or zip code. Selecting the city immediately triggers the hash query to update with the new location, which in turn runs a search. Before adding this component to the page, you must create a few settings.

To use the Location Finder component:

  1. From the Toolbox, drag the Location Finder rendering to the page.

  2. On the Location Finder toolbar, click the cogwheel and edit the following fields:

    Field

    Description

    Facet

    Select the facet item that will be used to sort geospatial search results. For example, use the DistanceFacet item to specify that the filter will use the unit of miles.

    Filter title

    Enter the title of the component.

    Search button text

    Enter the text for the search button. If left empty, the button will not display.

    Textbox text

    Enter the text in the search box that functions as a hint to describe the expected value.

    Search textbox label

    Enter the text box label text.

    My location text

    Enter the text to display in the text box when the component is configured to detect user location.

  3. Click More, and click Edit component properties to edit the following fields:

    • Mode - configure the component to work in one of three modes:

      • CurrentLocation - this mode does not display any components on the page and automatically takes location form the browser.

      • Mixed - in this mode, the location is automatically taken from the browser but the text box is also displayed and the user is able to change the location.

      • UserProvided - in this mode, a text box is displayed and the user is able to enter the location.

    • Max predictive results count - specifies the maximum number of predictive results shown in the drop down. When you leave this field empty, no predictions are shown.