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

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

在我的代码下方,以创建更多加载按钮:

    <?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');
});

jQuery Ajax加载仅适用于单个单词变量 - php

在我的PHP文件中,我将一些变量从输入框传递到链接中,该链接通过jQuery的ajax load函数在其URL中使用该变量加载页面。整个系统运行良好,但仅适用于单字变量。每当涉及到空格时,我的Ajax通话都会中断。我假设这是一个编码问题,但是我也有一些疑问。基本上,它归结为我的PHP文件中的这一行代码,这导致了混乱。是否有可能找出格式是否正确,或者为什么在多…

jQuery-找不到Ajax网址 - php

好的,我敢肯定这确实很容易,而且我很愚蠢,但是似乎并不能深入了解它。我试图从我的js文件“ custom.js”中对“ helpers.php”中的某些代码进行简单的AJAX调用。但是,我仍然收到404错误,因为我似乎并没有正确遍历文件夹,尽管我确信我正在...我的文件夹结构如下:html index.php js/ custom.js includes h…

使用jQuery将值增加到attr - php

我想增加i的值。 “ for”循环不起作用。$("a[href$='.xls']").appendTo(".xl1").attr('id','xl'+i); 我搜索所有excel文件,并将它们放在容器中并增加其id的值。谢谢吉恩 参考方案 $("a[…

PHP JQuery复选框 - php

我有以下片段。 var myData = { video: $("input[name='video[]']:checked").serialize(), sinopse: $("#sinopse").val(), dia: $("#dia").val(), quem: $(&#…

jQuery AJAX不向PHP发送多个提交按钮 - php

所以我的问题是,当我将表单提交到PHP时,使用jQuery通过AJAX提交表单时,使用jQuery AJAX时哪个按钮提交表单并不重要,但是当使用表单操作时,表单会提交并让我知道删除还是删除按下了更新按钮。例如,这是提交表单的HTML<input type="submit" name="update" value…