Straight forward way for infinitescroll on magento?

Hi,

I’m trying to setup infinite scrolling in magento. As far as I understand, I need to swapp the pagination widget with the infinite-hits widget and add some kind of infinitescroll widget that automatically loads more results.
Currently this boils down to:

  • removing hits and pagination in js/algoliaserach/instantsearch.js
  • having the following in my customalgolia/search.js:
        function infinitescroll() {
    		return {
    			init: function (params) {
    				algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = true;
    				function scrollhandler() {
    					var docViewTop = jQuery(window).scrollTop();
    					var docViewBottom = docViewTop + jQuery(window).height();
    					var elemTop = jQuery('.ais-infinite-hits--showmore').offset().top;
    					var elemBottom = elemTop + jQuery('.ais-infinite-hits--showmore').height();

    					var needsLoading = ((elemBottom >= docViewTop) && (docViewBottom >= elemBottom));
    				  if (algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore && needsLoading) {
    					  algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = false;
    					  params.helper.nextPage().search();
    				  }
    				}
    				jQuery(window).bind("scroll", scrollhandler);
    			  },
    		
    		  render: function (params) {
    			  algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = true;
    		  }
    		
    		};
    	}

    	algoliaBundle.instantsearch.widgets.infinitescroll = infinitescroll;


    	function algoliaHookBeforeInstantsearchStart(search) {	
    		search.addWidget(algoliaBundle.instantsearch.widgets.infinitescroll());
    		
    		search.addWidget(
    				algoliaBundle.instantsearch.widgets.infiniteHits({
    					container: '#instant-search-pagination-container',
    					templates: {
    					  empty: 'No results',
    					  allItems: jQuery('#instant-hit-template').html()
    					},
    					hitsPerPage: algoliaConfig.hitsPerPage
    				  })
    				);
    	}

The triggering bit works fine. However, the new results are not appended to the existing ones properly. Any clue what I’m missing? Or is there an even simpler way of achiving that?

Ok, this one was simple. Problem is the allItems template. This doesn’t work. So you have to switch that to
items: jQuery('#instant-hit-template').html()
Also, use instant-search-results-container instead of instant-search-pagination-container, and remove the {{#hits}} from your instant-hit-template. For me, this results in

function infinitescroll() {
return {
	init: function (params) {
		algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = true;
	    function scrollhandler() {
	    	var docViewTop = jQuery(window).scrollTop();
	    	var docViewBottom = docViewTop + jQuery(window).height();
	    	var elemTop = jQuery('.ais-infinite-hits--showmore').offset().top;
	    	var elemBottom = elemTop + jQuery('.ais-infinite-hits--showmore').height();
	    	var needsLoading = ((elemBottom >= docViewTop) && (docViewBottom >= elemBottom));
	      if (algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore && needsLoading) {
	    	  algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = false;
	    	  params.helper.nextPage().search();
	      }
	    }
	    jQuery(window).bind("scroll", scrollhandler);
	  },

  render: function (params) {
	  algoliaBundle.instantsearch.widgets.infinitescroll.readyToFetchMore = true;
  }

};
} 
 algoliaBundle.instantsearch.widgets.infinitescroll = infinitescroll;
 function algoliaHookBeforeInstantsearchStart(search) {
    search.addWidget(algoliaBundle.instantsearch.widgets.infinitescroll());

    search.addWidget(
		algoliaBundle.instantsearch.widgets.infiniteHits({
			container: '#instant-search-results-container',
		    templates: {
		      empty: 'No results',
		      item: jQuery('#instant-hit-template').html()
		    },
		    hitsPerPage: algoliaConfig.hitsPerPage
		  })
		);

return search;
}
1 Like