Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Infinite scroll for FacetWP
/* 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 );
@adput
Copy link

adput commented Dec 31, 2016

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

Thanks!

@larsvdd
Copy link

larsvdd commented Aug 2, 2017

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

@rumur
Copy link

rumur commented Sep 26, 2017

@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 );

@bh-m3
Copy link

bh-m3 commented Apr 8, 2019

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.

@regioNico
Copy link

regioNico commented Oct 9, 2021

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
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment