Woocommerce使用Ajax创建更多的产品 - Woocommerce create load more products with Ajax

Woocommerce create load more products with Ajax

本文关键字：使用 Ajax 创建 Woocommerce | 更新日期: 2023-09-27

我正在尝试创建一个函数，在Woocommerce中使用Ajax请求加载更多产品。我的想法是创建一个按钮"加载更多的产品"，取代woocommerce分页，并加载使用ajax请求的第二，第三等页面。我已经创建了脚本，创建加载更多的按钮与ajax请求，它的工作原理，但我试图创建一个php函数，检索其余的产品使用ajax请求。

在我的代码下面创建load more按钮:

    <?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"的函数来加载其余的页面?

最简单的解决方案可能是使用无限滚动脚本。你可以在这里找到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');
});