Woocommerce 使用 Ajax 创建加载更多产品

Question

我正在尝试在 Woocommerce 中创建一个使用 Ajax 请求加载更多产品的函数。我的想法是创建一个按钮“加载更多产品”来替换 woocommerce 分页并使用 ajax 请求加载第二个第三个等页面。我已经创建了使用 ajax 请求创建加载更多按钮的脚本并且它可以工作，但我正在尝试创建一个使用 ajax 请求检索其余产品的 php 函数。

在我的代码下面创建加载更多按钮：

    <?php 

    $max_num_pages = $wp_query->max_num_pages;

    if ($max_num_pages > 1) {
        $output .=
    '<script type="text/javascript">
    var page = 1,
    max_page = '.$max_num_pages.'
    jQuery(document).ready(function(){
    jQuery(".woocommerce-pagination").hide();
    jQuery("#woo_load_more").click(function(){
    jQuery(this).hide();
    jQuery("#spinner").show();
    jQuery.ajax({
         type: "POST",
        url: "http://demo.ecquadro.com/transport/wp-admin/admin-ajax.php",
        data: {
            action: "wooPagination",
            page: page+1,
            per_page: 4,
        },
        success: function(data, textStatus, XMLHttpRequest){
            page++;
             jQuery(".prova").append(data);
            jQuery("#spinner").hide();
            if (max_page > page) {
                 jQuery("#woo_load_more").show();
            }
         },
         error: function(MLHttpRequest, textStatus, errorThrown){
             jQuery("#spinner").hide();
             jQuery(this).show();
        }
        });
        });
        });
     </script>
     <div class="woo-products-load">
     <a href="javascript:void(0);" id="woo_load_more" class=""><span>'.__('Load More Posts', '').'</span></a>
     <img id="spinner" src="'.get_template_directory_uri().'/img/loader.gif" style="display: none;">
     </div>';

     }

    echo $output;

    ?>

知道如何创建一个名为“wooPagination”的函数来加载其余页面吗？

提前致谢。

Answer 1

最简单的解决方案可能是使用无限滚动脚本。你在这里找到它http://www.infinite-scroll.com/

让您不要从 HTML 输出中删除正常的分页，然后按如下方式将其连接起来（您可能需要更改选择器以适合您的站点）：

var infinite_scroll = {
    loading: {
        //img: "/img/loading-animation.gif",
        msgText: '',
    },
    nextSelector: ".pagination a.next",
    navSelector: ".pagination",
    itemSelector: "#main-content ul.products .product-small",
    contentSelector: "#main-content ul.products"
};

//Unbind load more on scroll
$(window).unbind('.infscr');

//
$("#load-more-button").click( function() {
    $(document).trigger('retrieve.infscr');
});