Extending Sitecore SXA Search Results

While SXA search will often meet the client's search requirements, there are some limitations with out-of-the-box implementation.

Sitecore SXA search features are really flexible and everything is content manageable. While SXA search will often meet the client search requirements, there are some limitations with the out-of-the-box implementation, i.e. the rendering template is hard-coded in the JavaScript, which can present some challenges when the front-end developers want to work with the templates.

Therefore, we want to extend the search results rendering to provide front-end flexibility, allow for mark-up changes, and also make sure the results mark-up is scalable and re-usable.

How does the SXA search result rendering work?

The search results rendering is one of the SXA search components. It utilises the global scope for sharing the settings between each of the search components i.e. search box, search filter, load more button etc. After the initial load of a page, the search results rendering will make an AJAX call to the search service API by passing the search scope and query. Once it gets the results from the server, it will then render them on the page with the pre-defined template. This is how the out-of-the-box search results rendering work. The approach is good, as it modularizes the component into small individual components i.e. pagination, search box, filter etc., which has great maintainability and re-usability.

Custom Search Results Rendering

The custom search results rendering described below is built on top of the out-of-the-box search results rendering, but adds some enhancements.

What we're going to be doing is :

  • Move the template into cshtml view (New)
  • Allow random ordering (New)
  • Return results on the server side (New)
  • Enable experience editor for the result items (New)
  • Use variants for search results
  • Make use of the global scope

Let's dive into the steps for extending Sitecore SXA search results below.

Steps for Extending Sitecore SXA Search Results

  1. Create SXA Rendering Controller

    As when creating other custom SXA controllers, you will need to create a custom search results controller.

  2. Create Custom Search Results Repository

    In order to use the variant for rendering the search results, the custom repository needs to inherit from VariantsRepository, which is the Sitecore.XA.Foundation.RenderingVariants.Repositorie namespace.

    Also, we will need to inject IScopeService for utilizing the global scope in the custom repository constructor as shown below.

    Next we need to create a custom method for retrieving the results.

  3. Create a Custom Search Results View

This is how it looks in the Sitecore Experience Editor, the content editor can see the search results.
And all the settings are Sitecore CMS-configurable.

We hope you enjoyed our post about extending Sitecore SXA search results.

— Zhen Yuan

Want more?

View the Blog

Switch have been awarded a Sitecore Experience Award for Best in Connecting the Experience.
Read more
Sitecore Experience Award Winner 2022

Switch acknowledges the Traditional Custodians of the lands where we live, learn, and work and we pay our respects to their Elders past and present.

Level 4
109 Pitt Street
Sydney NSW 2000
Phone +61 02 8188 5959
Level 22
120 Spencer St
Melbourne VIC 3000
Phone +61 03 8566 8819
New Zealand
11-19 Customs Street West
Auckland 1010

Phone +64 9 887 0338
8 Cross Street
Singapore, 048424

Phone +65 3106 4217
ABN 15 120 572 750   ·   © 2023 Switch

Subscribe Now

Sign up to our newsletter to gain access to this page.

No thanks