Use the Commerce Search Results rendering

Abstract

Overview of the Commerce Search Results rendering and how to configure it.

It is important to be able to search your storefront quickly and easily. To help you do this, two search renderings - the Commerce Search Results rendering and the SXA Search Results rendering - are available in the Toolbox.

The Commerce Search Results rendering is available from the Commerce Catalog section of the toolbox and is used on several pages of the SXA Storefront site template including the:

  • Commerce Catalog Category page

  • Commerce Home page

  • Commerce Product Detail page

  • Commerce Search Results page

To use the Commerce Search Results rendering, you must add the Commerce Search Results rendering to the page and then define and associate a search signature with it.

For users to view the results of their search, you must add either the SXA Search Results or the Commerce Search Results rendering to the page.

To add the Commerce Search Results rendering:

  1. Open the page that you are going to add a search rendering to in the Experience Editor.

  2. In the Toolbox, in the Commerce Catalog section, click the Commerce Search Results rendering and drag it onto the page.

  3. In the Select the Associated Content dialog box, click Default, and then click OK.

    Select Associated Content for the Commerce Search Results rendering
  4. To change the text that appears when the search returns no results, on the Commerce Search Results toolbar, click Edit component configuration itemA0173FD240754803B4109340ECAC8288.png and enter the text that you want to appear and click OK.

    The Commerce Search Results toolbar
  5. To specify how to arrange the search results, edit the following fields:

    • Search results signature – Enter a unique signature that can be used in combination with other search renderings (such as the Load More rendering). This is useful when you have more than one search rending on the page and you want to filter on specific search results.

    • Search scope – Select a search scope to limit the search results.

    • Page size – Enter the number of results you want to be loaded by the rendering initially as well as when another page is loaded or the Load More button is clicked when infinity scrolling is in use.

    • Default language filtering – Select the language you want to use for the search. Typically, this is set to Current language.

    • 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.

  6. When you have finished, click OK and, on the ribbon, click Save.

The Search results signature aggregates several facet filters so that on the live storefront the customer can filter search results based on multiple selections and the results are dynamically rendered on the page.

The Storefront site template includes a Home page with two sections that use a Commerce Search Results rendering and a Load More rendering. In each section, a unique search signature binds the renderings together. For example, the On Sale Televisions section uses the on-sale-televisions search results signature on both the Commerce Search Results rendering and the associated Load More button. The Mira Laptops section uses the mira-laptops search results signature for both renderings.

Search signatures as used on the Storefront site template Home page

To specify a search results signature:

  1. In the Toolbox, in the Search section, drag a search rendering (for example, the Load More rendering) onto a partial design.

  2. On the toolbar, click More, Edit component properties.

  3. In the Control Properties dialog box, in the Search Criteria section, define a Search results signature and click OK.