Infinite scroll for FacetWP

facet-wp-infinite-scroll.js

/* globals FWP */
/**
 * JavaScript for FacetWP Infinite Scroll
 */
(function( $ ) {
	'use-strict';

	var throttleTimer = null;
	var throttleDelay = 100;

	function ScrollHandler() {
		clearTimeout( throttleTimer );
		throttleTimer = setTimeout(function() {
			if ( $( window ).scrollTop() !== $( document ).height() - $( window ).height() ) {
				return;
			}

			if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
				FWP.paged = parseInt( FWP.settings.pager.page ) + 1;
				FWP.is_load_more = true;
				FWP.soft_refresh = false;
				FWP.refresh();
			}
		}, throttleDelay );
	}

	wp.hooks.addFilter( 'facetwp/template_html', function( resp, params ) {
		if ( FWP.is_load_more ) {
			FWP.is_load_more = false;
			$( '.facetwp-template' ).append( params.html );
			return true;
		}

		return resp;
	});

	$( document ).on( 'facetwp-loaded', function() {
		if ( ! FWP.loaded ) {
			$( window ).off( 'scroll', ScrollHandler ).on( 'scroll', ScrollHandler );
		}
	});
})( jQuery );

Hi Rob - any pointers on how to use your FacetWP Infinite Scroll script?

Thanks!

I'd like that too. Currently I get an error:
Uncaught ReferenceError: wp is not defined

@larsvdd Try this one.

(function( $ ) {
'use-strict';

var throttleTimer = null;
var throttleDelay = 100;

$(function() {
var $win = $( window );
var $doc = $( document );

function ScrollHandler() {
  clearTimeout( throttleTimer );
  throttleTimer = setTimeout(function() {
    if ( $win.scrollTop() !== $doc.height() - $win.height() ) {
      return;
    }

    if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
      FWP.paged = parseInt( FWP.settings.pager.page ) + 1;
      FWP.is_load_more = true;
      FWP.soft_refresh = false;
      FWP.refresh();
    }
  }, throttleDelay );
}

wp.hooks.addFilter( 'facetwp/template_html', function( resp, params ) {
  if ( FWP.is_load_more ) {
    FWP.is_load_more = false;
    $( '.facetwp-template' ).append( params.html );
    return true;
  }

  return resp;
});

$doc.on( 'facetwp-loaded', function() {
  if ( ! FWP.loaded ) {
    $win.off( 'scroll', ScrollHandler ).on( 'scroll', ScrollHandler );
  }
});

});
})( jQuery );

The version with the $win and $doc vars works for me. How can I bind the facetwp-loading loader graphic to this? There is no indication more results are available.

it wasnt working for me. This code works:
https://gist.github.com/hirejordansmith/cc2363a860a7ed8320307b46f1196407#gistcomment-3921811

by the way, a simple test if it works is by putting it in your functions.php like so:

add_action('wp_footer', 'add_faceet_wp_infinite_scroll');
function add_faceet_wp_infinite_scroll() {
if (is_admin() || is_checkout()) {
return;
}
?>
<script>

// TODO: script code comes here
</script>
<?php
}