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() {
		var $win = $( window );
		var $doc = $( document );

		function ScrollHandler() {
			clearTimeout( throttleTimer );
			throttleTimer = setTimeout( function() {

				if ( $( window )
					.scrollTop() + $( window )
					.height() > $( document )
					.height() - 400 ) {
					console.log( 'aaaaaaaaaaaaaa' );
				} else {
					console.log( 'bbbbbbbbbbbbb' );
					return;
				}

				console.log( 'your message 3' );
				
				if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
					FWP.paged = parseInt( FWP.settings.pager.page ) + 1;
					FWP.is_load_more = true;
					//alert("start");
					if ( jQuery( '.mycurellsloadder' )
						.length == 0 ) {

						jQuery( ".woocommerce-pagination" )
							.append( "<div class='mycurellsloadder'></div>" );
					}
					FWP.soft_refresh = false;
					FWP.refresh();
				}
			}, throttleDelay );
		}

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

			return resp;
		} );

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

thanks for the code! i made some little changes in order to make it work for me:
(dont forget to update "bottomDistance" and "throttleFetchDelay" for your requirements)

`
/* globals FWP */

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

            // TODO: update for your requirements
            var bottomDistance = 1500; // the distance in px to the bottom of the page, when facetwp should trigger
            var throttleFetchDelay = 5000; // the timeout for checking if to fetch new products again after a fetch if triggered

            var isFetching = false; // if facetwp is already fetching new products
            var isChecking = false; // if a timeout for checking if to fetch new products is already set

            var throttleTimer = null; // the timer for checking if to fetch new products
            var throttleDelay = 100; // the timeout for checking if to fetch new products

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

                function ScrollHandler() {
                    if (isChecking) {
                        return;
                    }
                    clearTimeout( throttleTimer );
                    console.log( 'start timer');
                    isChecking = true;
                    throttleTimer = setTimeout( function() {
                        isFetching = false;
                        throttleDelay = 100;

                        if ( ($( window ).scrollTop()
                            + $( window ).height()
                            > $( document ).height() - bottomDistance)
                            && !isFetching ) {
                            console.log( 'aaaaaaaaaaaaaa' );
                        } else {
                            console.log( 'bbbbbbbbbbbbb' );
                            isChecking = false;
                            return;
                        }
                        isFetching = true;
                        throttleDelay = throttleFetchDelay;

                        if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
                            FWP.paged = parseInt( FWP.settings.pager.page ) + 1;
                            FWP.is_load_more = true;
                            //alert("start");
                            if ( jQuery( '.mycurellsloadder' )
                                .length == 0 ) {

                                jQuery( ".woocommerce-pagination" )
                                    .append( "<div class='mycurellsloadder'></div>" );
                            }
                            FWP.soft_refresh = false;
                            FWP.refresh();
                            isChecking = false;
                        }
                    }, throttleDelay );
                }

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

                    return resp;
                } );

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

`

still had some problems with the code, now this solutions seems pretty stable:

jQuery(document).ready(function($){
var intBottomMargin = 1500; //Pixels from bottom when script should trigger
setInterval(() => {
if (($(window).scrollTop() >= $(document).height() - $(window).height() - intBottomMargin)
&& (!$(".facetwp-load-more").hasClass("loading"))
&& (!$(".facetwp-load-more").hasClass("facetwp-hidden"))
) {
$(".facetwp-load-more").addClass('loading');
$(".facetwp-load-more").click(); //trigger click
// the class is automatically removed, as the button is recreated, as soon as it loaded the products
}
}, 1000);
});

Thanks @regioNico, short and sweet. Works very well.

So helpful, thank you! I had to add a $ before (document) on if statement. Apparently stripped from comment.

To trigger the Load More button click just like @regioNico did, but using intersection observer API. There's no need for window / doc pixel calcs and setInterval :)

PS: Observer is observing an empty div#end-post-list at the end of the posts / products list.

window.onload = function() { const end = document.getElementById("end-post-list"); const facetLoadMore = document.querySelector(".facetwp-facet-load_more"); const btnLoadMore = document.querySelector(".facetwp-load-more"); const options = {}; const observer = new IntersectionObserver(function (entries, observer) { entries.forEach((entry) => { if (entry?.isIntersecting) { facetLoadMore.classList.add('is-loading'); if (!FWP.is_refresh) { jQuery(".facetwp-load-more").click(); } } else { facetLoadMore.classList.remove('is-loading'); } }); }, options); observer.observe(end); }