Sitecore 9.0.2 SXA 1.7.1 search results count.

Sitecore 9.0.2 SXA 1.7.1 search result issue.

So if you are using Sitecore and SXA, one of the SXA great features that SXA offers is the flexible out-of-the-box search functionality that enables the website visitors to quickly find what they are looking for.

And from the toolbox, you can find many renderings for the search. All you have to do is to drag and drop.

One of the SXA projects I worked on were we used Sitecore 9.0.2 along with SXA 1.7.1, I faced some issues with the Search functionality/Results specifically in the search result count.

Issue:

Lets say we are using Sitecore 9.0.2 and SXA 1.7.1 we have search page and we are using SXA Search Results + Results Count (SXA default search controls), but we also have partial design lets say it's for the Header and it contains Search Results in its presentation details, and we only display the item's title (no Search result count).

So now we have a page that contains two search functionalities, each has a different search scope and signature, but we noticed that the Results Count keeps changing in a weird way and sometimes it shows the wrong value.

After looking deeply it this issue, it seems like that the search in the header changes the Results Count value with no consideration to the signature. 

And to solve this issue we made some changes to the js file component-search-results-count.js to check and consider the signature. 

That was our easy and quick fix, but you need to consider that in case of an upgrade those changes will be lost. 

Original component-search-results-count.js - SearchResultCountView:

       

         var SearchResultCountView = Backbone.View.extend({
        initialize: function(){
            var dataProperties = this.$el.data(),
                resultsCountContainer = this.$el.find(".results-count"),
                inst = this;

            this.resultsCountText = resultsCountContainer.html();

            //check if we're opening page from disc - if yes then we are in Creative Exchange mode so let's show fake results count
            if (window.location.href.startsWith("file://")) {
                resultsCountContainer.html(inst.resultsCountText.replace('{count}', 1));
                inst.$el.find(".results-count").show();
                return;
            } 

            XA.component.search.vent.on("results-loaded", function (data) {
                resultsCountContainer.html(inst.resultsCountText.replace('{count}', data.dataCount));
                inst.$el.find(".results-count").show();
            });            
        }
    });
  
 

Modified component-search-results-count.js - SearchResultCountView:

       

    var SearchResultCountView = Backbone.View.extend({
        initialize: function(){
            var dataProperties = this.$el.data(),
                resultsCountContainer = this.$el.find(".results-count"),
                inst = this;

            this.resultsCountText = resultsCountContainer.html();

            //check if we're opening page from disc - if yes then we are in Creative Exchange mode so let's show fake results count
            if (window.location.href.startsWith("file://")) {
                resultsCountContainer.html(inst.resultsCountText.replace('{count}', 1));
                inst.$el.find(".results-count").show();
                return;
            } 

            XA.component.search.vent.on("results-loaded", function (data) {
    inst.$el.find(".results-count").show();
   if( inst.$el.find(".results-count").length > 0) 
   { 
  
    var jsonParentProperties = inst.$el.find(".results-count")[0].offsetParent.querySelector("[data-properties]").getAttribute("data-properties");
    var parentProperties = JSON.parse(jsonParentProperties);
    var signature = parentProperties.targetSignature;
                if(signature == data.searchResultsSignature)
    {  
     resultsCountContainer.html(inst.resultsCountText.replace('{count}', data.dataCount));
     inst.$el.find(".results-count").show();
    }
    
   }
    
            });            
        }
    });