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

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