将无限负载添加到 FacetWP 寻呼机按钮

Question

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

在那里，我想将无限加载功能添加到 FacetWPs 的“加载更多”按钮。因此，一旦用户向下滚动到页面底部的某个偏移量，应该会自动单击“加载更多”按钮。

不幸的是，他们没有为此提供开箱即用的功能。

所以我的问题是：如何实现facet-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
}