Add inifinity load to FacetWP pager button

Question

I have a wordpress/woocommerce shop with the FacetWP Plugin installed for sorting and filtering products in my shop. This plugin provides a "Load More" functionality to lazily load more products on the products category screen.

There, I would like to add the inifinity load functionality to the FacetWPs "load more" button. So, as soon as the user scrolls down to a certain offset from the bottom of the page, the "load more" button should automatically be clicked.

Unfortunately, they dont provide a function out of the box for this.

So my question is: How to achieve infinity load functionality to the facet-wps "load more" button?

I tried to add the code from here https://gist.github.com/hirejordansmith/cc2363a860a7ed8320307b46f1196407#gistcomment-3921811 to my function.php file , but it doesnt work in all browsers:

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

Answer 1

The infinity load functionality can be achieved by placing this code in your functions.php file. By changing the "intBottomMargin" variable you can decide for your case, at which offset from the bottom the "load more" should be triggered :

add_action('wp_footer', 'add_faceet_wp_infinite_scroll');
function add_faceet_wp_infinite_scroll() {
    if (is_admin() || is_checkout()) {
        return;
    }
    ?>
        <script>

            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);
            });
        </script>
    <?php
}