Question

一段时间以来，我一直在努力解决这一问题，经过数小时的谷歌搜索和修补后，我似乎找不到该问题。

我的woocommerce分页（下一个，上一个）按钮将URL附加到/ page / 2。但是，我需要它们附加/？product-page = 2，因为这样可以正确显示该页面。我试图设置一个使用/？product-page = 2的Ajax“加载更多”按钮，因此我相信它是正确的。

对此的任何帮助或指示都将是惊人的，我不确定目前还有什么地方可以解决。

欢呼丹

Answer 1

我通常要在Wordpress上使用Ajax加载更多帖子的方法是，使用下一页按钮 显示帖子列表我这样创建：

<?php global $wp_query;?>

<?php $next_link = get_next_posts_link( 'Load more' , $wp_query->max_num_pages); ?>
<?php if($next_link) : ?>
    <a href="<?php echo $next_link; ?>" id="#loadMore">
<?php endif; ?>

因此，我的 php渲染后的html页面如下：

<html>
<head>
 <!-- Head stuff -->
</head>
<body>
   <h1>List of posts</h1>
   <ul id="postsList">
        <li>Post 1</li>
        ....
        </li>Post 10</li>
   </ul>
    <a href="http://example.com/posts-list/page/2" id="#loadMore">
</body>
</html>

如果我点击加载，我当然会重新加载页面，然后加载更多帖子链接将为http://example.com/posts-list/page/3

现在，如果我希望使用ajax加载帖子，并使用下一页更新“加载更多”按钮，请点击href IF，如果有下一页，请使用javascript：

$('#loadMore').on('click', function(e){

  // Prevent the link reload the page
  e.preventDefault();

  $.ajax({
    url: $(this).attr('href'),
    success: function(response){
      // Get the next page html and convert it to jquery elemnt
      let nextPageHTML = $(response);

      // Get the next page posts list
      let nextPagePostsList = nextPageHTML.find('#postsList').html();

      // Get the next page load more button
      let nextPageLoadMore = nextPageHTML.find('#loadMore');

      // Append the next page posts
      $('#postsList').append(nextPagePostsList);

      // If there is a load more link on the next page update the current load more href
      if(nextPageLoadMore.length) {
          $('#loadMore').attr('href', nextPageLoadMore.attr('href'));    
      }
    }
});

我希望这很清楚。我没有测试代码，所以告诉我是否有问题。

恢复：

您需要具备：

帖子列表上的ID
加载更多链接的ID
使用wordpress功能创建的下一页按钮
添加ajax逻辑以获取下一页帖子

Wordpress / Woocommerce产品页面错误

1 个答案: