Beaver Builder, FacetWP, and Infinite Scroll

For some reason, FacetWP doesn’t support infinite scroll when paired with the Posts module in Beaver Builder. However, working with some code from GitHub, I was able to modify it to work with Beaver Builder. Here is the code:

(function( $ ) {
    'use-strict';
    var throttleTimer = null;
    var throttleDelay = 100;

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

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

                if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
                    if ( ! $( ".facetwp-loading-placeholder" ).length ) {
                        $('<p class="facetwp-loading-placeholder">Loading...</p>').hide().appendTo('.fl-module-post-grid').fadeIn(500);
                    }

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

        $doc.on( 'facetwp-loaded', function() {
            $('.fl-module-post-grid .facetwp-loading-placeholder').remove();
            if ( ! FWP.loaded ) {
                $win.off( 'scroll', FWPCustomInfiniteScroll ).on( 'scroll', FWPCustomInfiniteScroll );
            }
        });
    });
})( jQuery );

If just want to play around with the code without modifying files on the server, try out the Additional JS plugin that lets you load just Javascript directly in the customizer.

Posted in

Leave a Comment

Your email address will not be published. Required fields are marked *