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

This comment has been minimized.

Copy link

@adput adput commented Dec 31, 2016

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

Thanks!

@larsvdd

This comment has been minimized.

Copy link

@larsvdd larsvdd commented Aug 2, 2017

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

@rumur

This comment has been minimized.

Copy link

@rumur 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

This comment has been minimized.

Copy link

@bh-m3 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.

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