SXA Search Sorting

Question

Is there a way to handle two level sorting in SXA search results? for example if 2 item is having the same update date then we should sort by title.

So if the first criteria don't differentiate between items we need another level

Answer 1

The SearchController is accepting two-level sorting. If you will inspect the requests which are sent to the server you'll notice that there is for example o=Title,Ascending parameter. It accepts multiple sorting facets split by |, so e.g.: o=Title,Ascending|NavigationTitle,Ascending.

So the service itself allows you to do that but unfortunately, there is no way to achieve this at the moment with the renderings. It would require custom implementation.

Answer 2

As Dawid mentioned backend supports the multiple sorts, but you require updating the default /sitecore/media library/Base Themes/SearchTheme/Scripts/component-search-sort script file to support multiple sort filters.

Below is the snippet of the 2 functions updated, else you can find the complete file link below:

            sortSearchResults: function (element) {
            var attributes = element.data(),
            sig = this.model.get("sig"),

            attrString ="";

            $(".sort-results").each(function(index){
                var dataProp = $(this).data();
                if((dataProp.properties.sig + '_o') === sig[0])
                {
                    var lnk = $(this).find(".sort-results-group a.is-active").first();
                    if(lnk.length > 0)
                    {
                        //a link
                        attrString += $(lnk).parent().data().facet + ',' + $(lnk).parent().data().direction + '|';
                    }
                    else
                    {
                        //look for drop down.
                        var optn = $(this).find("select").first().children("option:selected");
                        if(optn.length > 0)
                        {
                            attrString += $(optn).data().facet + ',' + $(optn).data().direction + '|';
                        }
                    }
                }
            });
            attrString = attrString.replace(/\|\s*$/, "");


        if (attributes.direction !== "") {
            queryParameters.updateHash(this.updateSignaturesHash(sig, attrString, {}));
        } else {
            queryParameters.updateHash(this.updateSignaturesHash(sig, "", {}));
        }
    }

and

      updateComponent: function (hash) {
        var optionToSelect, sortData,
            sig = this.model.get("sig"),
            i;
        //Remove all selected
        this.$el.find("[data-facet][data-direction]").removeAttr("selected");
        for (i = 0; i < sig.length; i++) {
            if (hash.hasOwnProperty(sig[i])){
                //split with pipe
                var sorts = hash[sig[i]].split('|')

                for(j=0;j<sorts.length;j++)
                {
                    sortData = sorts[j].split(',');
                    optionToSelect = this.$el.find("[data-facet='" + sortData[0] + "'][data-direction='" + sortData[1] + "']");
                    optionToSelect.attr("selected", "selected");
                }
            } else {
                optionToSelect = this.$el.find("[data-facet][data-direction]:first");
                optionToSelect.attr("selected", "selected");
            }
        }        
    }

Gist: https://gist.github.com/mrunalbrahmbhatt/0e290d9d66ada19dd66123ba0e310e00

Best option is to create custom javascript and upload in your custom theme instead of default one.

Hope this will help you.

Answer 3

I am able to achieve this without any code .We have option to set sort in the scope query. We can set multiple sort parameters there with the field name (not index names)like sort:fieldname

NB :We have to remove the default sort option from the search result component if any