Sitecore 9.0.2 SXA 1.7.1 search load more

Sitecore 9.0.2 SXA 1.7.1 search load more.

Same conditions as in this blog.


Issue:

We are using SXA the default search control, and in one of the cases we had even more than two searches in one page, and noticed that the search Load More keeps disappearing and appearing many times while loading and sometimes it does not show even that the Page Size is less than the returned search items count, which caused a wrong behavior.

We made sure that the signatures for each search is different but the issue was still there.
We had to make some changes to js file component-search-load-More.js to solve this issue and check Signature before hiding or showing the Load More component.

Original component-search-load-more.js - SearchLoadMoreView:
 SearchLoadMoreView = Backbone.View.extend({
        initialize : function () {
            var dataProperties = this.$el.data(),
                that = this;

            if (dataProperties.properties.searchResultsSignature === null){
                dataProperties.properties.searchResultsSignature = "";
            }

            if (this.model) {
                this.model.set('sig', dataProperties.properties.searchResultsSignature.split(','));
            }

            XA.component.search.vent.on("results-loaded", function (results) {
                var sig = that.model.get('sig'),
                    i;

                for (i = 0; i < sig.length; i++) {
                    if (results.pageSize >= results.dataCount) //in case if results.offset and/or results.searchResultsSignature are undefined
                    {
                        that.$el.hide();
                    } else {
                        if (sig[i] === results.searchResultsSignature)
                            if (results.offset + results.pageSize >= results.dataCount) {
                                that.$el.hide();
                            } else {
                                that.$el.show();
                            }
                    }
                }
            });  
………………...

Modified component-search-load-more.js - SearchLoadMoreView:
 SearchLoadMoreView = Backbone.View.extend({
        initialize : function () {
            var dataProperties = this.$el.data(),
                that = this;

            if (dataProperties.properties.searchResultsSignature === null){
                dataProperties.properties.searchResultsSignature = "";
            }

            if (this.model) {
                this.model.set('sig', dataProperties.properties.searchResultsSignature.split(','));
            }

            XA.component.search.vent.on("results-loaded", function (results) {
                var sig = that.model.get('sig'),
                    i;

                for (i = 0; i < sig.length; i++) {
     if (sig[i] === results.searchResultsSignature)
                     //in case if results.offset and/or results.searchResultsSignature are undefined
                    if (results.pageSize >= results.dataCount) 
                    {
                        that.$el.hide();
                    } 
                  else 
      {
     if (results.offset + results.pageSize >= results.dataCount) {                               
    that.$el.hide();
                            } else {
                                that.$el.show();
                        }
                    }
                }
            });  
………………...


Lastly, you can refer to Sitecore docs to check the official document on how to set up the search here also there are those YouTube videos that will help learning SXA 

Comments

Post a Comment

Popular posts from this blog

Setting up TeamCity Build Configuration

Image
In this blog, I will go through setting up TeamCity project and adding the minimum needed build steps to rebuild and create the package that will be used through the Octopus server to deploy. So, here we go: Start by creating the project and set the VCS root Let us start by navigating to the Administration on the upper right corner. Click on + Create Project. Insert the General Setting. Project name and ID, you can leave other information as it is Setup the VCS root (I already have a created root. If you want to create one click on Create VCS root) Start by inserting type of VCS, root name, fetch URL and the branch you want to use for the deployment Specify the Authentication method and insert the needed credentials Now test the information inserted and credential by clicking on Test Connection. Then save Next we will create the build steps. Remember that there is a large number of Runner Types that can be added to configure the sequence of buil...
Read more

Less than a year with Sitecore, so far so good.

Image
Less than a year with Sitecore, so far so good. The first time I heard of Sitecore was in my initial interview with Tanasuk.  My career with Tanasuk began in February 2018. From its genesis, I was excited to learn about this new technology. I attended a Digital Transformation Event that highlighted the paramount functionality and possibilities of Sitecore, peaking my enthusiasm to develop websites unparalleled to anything I had previously worked on.  I started my learning process one step at a time. This is just the beginning, as there is still so much to master; new technology emerges every day. I frequently attend user groups in Jordan to enhance my knowledge and augment my skillset. Going to the Sitecore symposium in Orlando, Florida this year further ignited my enthusiasm (and there was an off-chance to see Will Smith). I heard about innovative topics, client-satisfaction features, and new technologies that would stimulate my experience as well. And ...
Read more