Last active
October 9, 2021 22:26
-
-
Save robneu/d917cd235a12822d4df9480f48446f9e to your computer and use it in GitHub Desktop.
Infinite scroll for FacetWP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 ); |
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
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@larsvdd Try this one.
(function( $ ) {
'use-strict';
var throttleTimer = null;
var throttleDelay = 100;
$(function() {$win = $ ( window );$doc = $ ( document );
var
var
});
})( jQuery );