Use the SXA search components
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.
You must switch to Preview mode to view the search request results of your search components.
Use the Search Box component
To enable your visitors to search your site, you can add a search box to your pages.
To use the Search Box component:
-
From the Toolbox, drag the Search Box component to the page.
-
In the Select the Associated Content dialog box, for the search box, click the Default item.
-
To change the text of the search box on the page, on 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 that functions as a hint to describe the expected value in the search box.
Search textbox label
Enter a title for the search rendering.
-
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 the Search Results rendering on 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. If 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.
NoteThe Search results page is a separate page on your website that has the Search Results component. This page acts as a landing page that shows search results when users perform a search from anywhere on your site. Typically, this page also contains other relevant search components, for example, Search Box, Page Selector, Sort Results, and some filters. If a Search Box component has the Search results page parameter configured, it redirects to this search results landing 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. When the visitor clicks a search suggestion, the search is executed. This mode is supported for Solr only.
-
Show search results as predictions: clicked text is put in the search box and a search is performed.
-
You cannot render or edit placeholders within the Search Box component because its content is generated by the SXA search service.
Add the Search Results component
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:
-
From the Toolbox, drag the Search Results rendering to the page.
-
To change the text of the search box on the page, on 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.
-
To change the Search Results rendering parameters, in the Select the Associated Content dialog box, select the Default item or create a new item.
-
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 filters 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.
Use the Sort Results component
The Sort Results component lets you sort search results.
To create a new sort results data source:
-
In the Content Editor, navigate to sitecore/content/<Tenant>/<Site>/Data.
-
Right-click Sort Results, click Insert, and click Sorting Groups.
-
Enter a name and click OK.
-
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.
Use the Load More component
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:
-
From the toolbox, from the Search section, click the Load More component and drag it to the page.
-
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.
-
In the Load More toolbar, click the cogwheel to change the label on the Load More button, for example, to Load more results.
-
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.
-
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.
Use the Results Count component
The Result Count component displays the number of search results of a specific search query.
To use the Result Count component:
-
From the toolbox, from the Search section, click the Result Count component and drag it to the page.
-
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.
Use the Results Variant Selector component
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:
-
From the toolbox, from the Search section, click the Results Variant Selector component and drag it to the page.
-
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.
-
Use the Page Selector component
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:
-
From the Toolbox, drag the Page Selector rendering to the page.
-
In the Page Selector toolbar, click Edit component configuration item.
-
In the dialog box, fill in the label text fields and click OK. For example:
-
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.
Use the Page Size component
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:
-
From the Toolbox, drag the Page Size component to the page.
-
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.
Use the Location Finder component
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.
The Location Finder component uses the Google Autocomplete feature to display predictive results from Google. In order for this to work, you must use the Google Maps API.
To use the Location Finder component:
-
From the Toolbox, drag the Location Finder rendering to the page.
-
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 does 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.
-
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.
-