将不确定负载添加到FacetWP寻呼按钮中

Question

我有一个wordpress/woocommerce商店，安装了FacetWP插件，用于分类和过滤我的商店中的产品。这个插件提供了一个“加载更多”的功能，以惰性地在产品类别屏幕上加载更多的产品。

在这里，我想将不确定加载功能添加到FacetWPs "load more“按钮中。因此，一旦用户从页面底部滚动到某个偏移量，就应该自动单击"load“按钮。

不幸的是，他们没有为这个提供一个现成的功能。

因此，我的问题是:如何实现无限加载功能到方面-wps“加载更多”按钮？

我试图从这里将代码https://gist.github.com/hirejordansmith/cc2363a860a7ed8320307b46f1196407#gistcomment-3921811添加到我的function.php文件中，但并不是所有浏览器都能工作：

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

可以通过将此代码放置在functions.php文件中来实现无限加载功能。通过更改"intBottomMargin“变量，您可以根据自己的情况来决定，在哪种情况下应该触发”负载更多“：

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
}