How to Create a SearchStax Custom Search Page

In a real-world project, customers using the SearchStax Sitecore Module to leverage all the SearchStudio capabilities will end up needing to customize the Sitecore search page in order to give it the same look and feel of the rest of the website, or to extend some missing feature. Instead of editing the SearchStudio search page component, the best way to do that is by creating a custom search page.

Do not modify SearchStax components!

SearchStax strongly recommends that code customization should not be performed on the original SearchStax Sitecore components. Any change applied to an out-of-the-box component might be overwritten during an upgrade process. To avoid this situation, you should create a new component using the original search page as starting point and then apply any customization needed.

This tutorial is a step by step that shows how to create a full custom component.

Prerequisites

This article assumes that you already have a C# solution with an MVC project.

Assembly References

Start by adding project references to those two SearchStax assemblies. They are part of your SearchStax for Sitecore package:

  • SearchStax.Foundation.Core.dll
  • SearchStax.Feature.SearchPage.dll

Controller

Add the below class to your MVC project and give it a meaningful name following the MVC pattern, such as CustomSearchStaxController. This class will have an Index() action method that will be used by a Sitecore controller rendering later. This method loads everything required by a SearchStax view class to work properly and passes it to the view using the SearchPageModel object.

using SearchStax.Feature.SearchPage.Models;
using SearchStax.Foundation.Core.Configuration;
using SearchStax.Foundation.Core.Fetchers;
using SearchStax.Foundation.Core.Indexes;
using System.Web.Mvc;

namespace Custom.SearchStax.Searchpage.Controllers
{
    public class CustomSearchStaxController : Controller
    {
        private readonly ISearchStaxConfigurationHandler _configurationFetcher;
        private readonly IIndexResolver _indexResolver;
        private readonly ILanguageFetcher _languageFetcher;
        private readonly ISearchModelFetcher _searchModelFetcher;

        public CustomSearchStaxController()
            : this(new SearchStaxConfigurationHandler(),
                   new IndexResolver(),
                   new LanguageFetcher(),
                   new SearchModelFetcher())
        { }

        public CustomSearchStaxController(ISearchStaxConfigurationHandler configurationFetcher,
                                          IIndexResolver indexResolver,
                                          ILanguageFetcher languageFetcher,
                                          ISearchModelFetcher searchModelFetcher)
        {
            this._configurationFetcher = configurationFetcher;
            this._indexResolver = indexResolver;
            this._languageFetcher = languageFetcher;
            this._searchModelFetcher = searchModelFetcher;
        }

        public ActionResult Index()
        {
            var searchModel = _searchModelFetcher.GetSearchModel();

            var resultTemplateFields = _searchModelFetcher.GetResultTemplateFields();

            var configurations = _configurationFetcher.GetSearchStaxConfigurationsDictionaryLowercased();

            var indexCoreName = _searchModelFetcher.GetOverrideCoreIndexName();
            if (string.IsNullOrEmpty(indexCoreName))
                indexCoreName = _indexResolver.GetCurrentIndexCoreName();

            var language = _languageFetcher.GetCurrentPageLanguage();

            var configuration = configurations[indexCoreName];

            SearchPageModel model = new SearchPageModel
            {
                SearchStaxConfiguration = configuration,
                Language = language,
                SearchModel = searchModel,
                ResultTemplateFields = resultTemplateFields
            };

            return View(model);
        }
    }
}

View

Create a new view file based on the already existing \Views\SearchStaxPage\Index.cshtml file found on your Sitecore instance. Name this file as Index.cshtml and add it to the project folder \Views\[CustomSearchStax]. Make sure you change the [CustomSearchStax] by your controller prefix.

This is the moment when you can apply some custom styling with CSS manipulations, or even more structural changes to the search page, accordingly to what is required by your project design.

Rendering

In Sitecore, create a controller rendering under a custom folder on /sitecore/layout/Renderings. Configure the Controller field to point to the previously created controller, and the Controller Action field to its Index method. Here is an example:

Search Page

Once you have everything configured in the rendering, you can add the new rendering to a page item and validate that the customizations you previously applied are there.

You can even compare this search page with the standard one that uses the standard /sitecore/layout/Renderings/Feature/SearchStax/SearchPage/SearchStaxPageRendering to see the customizations:

Summary

  1. Chose an MVC project or create a new one.
    1. Add a reference to SearchStax.Foundation.Core.dll
    2. Add a reference to SearchStax.Feature.SearchPage.dll
  2. Create a new controller called CustomSearchStaxController
    1. Copy and paste the controller class from the example
  3. Create a new view based on \Views\SearchStaxPage\Index.cshtml and add it to \Views\ CustomSearchStax\Index.cshtml
  4. Create a new rendering pointing to the method in the new controller
  5. Add the rendering to a search page and validate the customizations