Embed query text in no results view text and result count text for SXA Search results component

Question

Using Sitecore and SXA 9.3

For search, we need to include the query text in the result count message as well as the no results message. For example; for a search of 'bananas' it should say "5 results for the 'bananas' search". In the no results view, it should say something like "there were no results for the 'abcdef' search."

Is there anyway to do this without too much code? Surprisingly, I can't find a token to embed the query, similar to the {count} token with the result count component. I know SXA search is using Backbone JS, I tried to see if there was someway I could get the query out of the BB model, but no luck finding it so far. I thought about doing this on the backend as well, but since the query string variables are after the hash, that was a no go.

I doubt I'm the first person that has needed to do this. Is there a simple way to do this that I can't seem to find? I've Googled of course and came up empty so far.

Answer 1

I've done this recently, I needed to add something like:

Showing results for {Keyword}

What I did is to create a new custom search results count out of the OOTB Search Results count SXA rendering, I did the following:

1. Create a custom model that is similar to the search results model count but renaming two properties as following:

    public string ResultsCountTextFieldName
    {
        get;
        set;
    }

    public string ShowingResultsForTextFieldName
    {
        get;
        set;
    }

2. Create a controller for your new custom rendering, something like:

public ICustomResultsCountRepository Repository
    {
        get;
        set;
    }

    public ActionResult CustomResultsCount()
    {
        return PartialView(GetModel());
    }

    public CustomResultsCountController(ICustomResultsCountRepository repository)
    {
        this.Repository = repository;
    }

    protected override object GetModel()
    {
        return this.Repository.GetModel();
    }

3. Repository that get the model from the data source item (template extended from the OOTB by adding the new string field), similar to:

public override IRenderingModelBase GetModel()
{
     CustomSearchResultsCountRenderingModel searchResultsCountRenderingModel = new CustomSearchResultsCountRenderingModel();
     this.FillBaseProperties(searchResultsCountRenderingModel);
     searchResultsCountRenderingModel.JsonDataProperties = this.GetJsonDataProperties();
     searchResultsCountRenderingModel.ResultsCountTextFieldName = "ResultsCountText";
     searchResultsCountRenderingModel.ShowingResultsForTextFieldName = "ShowingResultsForText";
    return searchResultsCountRenderingModel;
}

4. Add a new config patch to register your repo.

5. You also need a new razor file that is a copy of ..\Views\ResultsCount\Results Count.cshtml

6. Finally, Update the related JS file from the base theme to count for your new added element, you can find it in this location: /sitecore/media library/Base Themes/SearchTheme/Scripts/component-search-results-count, you simply can download that, edit it, and then add it to your unicorn or tds tracking.

Following is Sitecore doc. for how you can create a custom SXA rendering: https://doc.sitecore.com/developers/sxa/93/sitecore-experience-accelerator/en/walkthrough--building-a-simple-rendering.html