WP_Query Ajax 分页结果为 0 而不是加载更多帖子
[英]WP_Query Ajax pagination get 0 as result instead of load more posts
问题描述
我有一个带有 wp_query 的自定义循环，这是一个显示用户所下订单的表格。 一切正常，显示的内容、分页和数据都正常。
为了测试我每页显示 4 个结果，我想做的是使用 ajax 分页动态加载其他结果。 我希望当我单击第 2 页时会加载另外 4 个帖子，而不是加载另一个页面。
现在 ajax 调用似乎工作了，当我点击第 2 页时它正确加载但结果我得到 0 而不是加载其他帖子。 为什么会这样？
模板.php
<script src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/main.js?<?php $FourDigitRandomNumber = mt_rand(00000,99999); echo $FourDigitRandomNumber; ?>" defer=""></script>
<h3>Custom Endpoint</h3>
<div id="content">
<?php
global $wp_query;
$paged = max( 1, (int) filter_input( INPUT_GET, 'pagina' ) );
$order_statuses = array('wc-completed');
$args = array(
'post_type' => 'shop_order',
'paged' => $paged,
'posts_per_page' => 4,
'post_status' => $order_statuses,
'customer_id' => get_current_user_id(),
);
$loop = new WP_Query( $args );
$post_count = $loop->found_posts;
// The Wordpress post loop
if( $loop->have_posts() ) {
while( $loop->have_posts() ) {
$loop->the_post();
// The order ID
$order_id = $loop->post->ID;
// Get an instance of the WC_Order Object
$order = wc_get_order($loop->post->ID);
$items = $order->get_items();
$orders_id = $order->get_id();
$status = wc_get_order_status_name( $order->get_status() );
$date_created = $order->get_date_created()->date('d/m/Y');
$payment_method = $order->get_payment_method_title();
$order_total = $order->get_formatted_order_total();
foreach ( $items as $item ) {
$product_name = $item->get_name();
$view_order = $order->get_view_order_url();
// Get product image - https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
$product = $item->get_product();
if( $product instanceof WC_Product ){
$order_img = $product->get_image();
}
//Get product download button
$downloads = $order->get_downloadable_items();
if(is_array($downloads)) {
foreach($downloads as $product){
$download_button = '<a href="'. $product['download_url'] .'" target="_blank">Download</a>';
}
}
echo '
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span class="mobile title">Ordine</span>
<span>#'. esc_attr($orders_id) .'</span>
</td>
<td class="product_name">
<span class="mobile title">Prodotto</span>
<a href="'. wp_kses_post($view_order) .'">'. wp_kses_post($product_name) .'</a>
</td>
<td class="product_data">
<span class="mobile title">Data</span>
<span>'. wp_kses_post($date_created) .'</span>
</td>
<td class="product_price">
<span class="mobile title">Prezzo</span>
<span>'. wp_kses_post($order_total) .'</span>
</td>
<td class="product_status">
<span class="mobile title">Stato</span>
<span class="label ' . $order->get_status() . '">'. wp_kses_post($status) .'</span>
</td>
<td class="product_action">
<span class="mobile title">File</span>
<a target=”_blank” href="'. esc_url($view_order) .'">Visualizza<i class="fa-duotone fa-eye"></i></a>
</td>
</tr>
</table>
';
}
}
}
// Pagination
if ( $post_count > 4 ) {
?><div id="pagination" class="container-pagination"><?php
$args = array(
'base' => esc_url( 'https://motustrength.it/account/custom/' ) . '%_%',
'format' => '?pagina=%#%',
'total' => $loop->max_num_pages,
'current' => $paged,
'show_all' => false,
'end_size' => 3,
'mid_size' => 3,
'prev_next' => true,
'prev_text' => __('<i class="fa-regular fa-angle-left"></i><span>Indietro</span>'),
'next_text' => __('<span>Avanti</span><i class="fa-regular fa-angle-right"></i>'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
echo paginate_links($args);
}
else {
?><div class="no-downloads-msg">Nessun download disponibile, non hai ancora acquistato alcun prodotto.</div><?php
}
?></div><?php
文件 Js
(function( $ ) {
$.fn.wpPagination = function( options ) {
options = $.extend({
links: "a",
action: "pagination",
ajaxURL: "https://" + location.host + "/wp-admin/admin-ajax.php",
next: ".next"
}, options);
function WPPagination( element ) {
this.$el = $( element );
this.init();
}
WPPagination.prototype = {
init: function() {
this.createLoader();
this.createEnd();
this.handleNext();
this.handleLinks();
},
createLoader: function() {
var self = this;
$('#pagination').prepend( "<span id='pagination-loader'>Loading...</span>" );
$('#pagination-loader').hide();
},
createEnd: function() {
var self = this;
$('#pagination').prepend( "<span id='pagination-end'>End</span>" );
$('#pagination-end').hide();
},
handleNext: function() {
var self = this;
var $next = $( options.next, self.$el );
},
handleLinks: function() {
var self = this,
$links = $( options.links, self.$el ),
$pagination = $( "#pagination" );
$loader = $( "#pagination-loader" );
$end = $( "#pagination-end" );
$links.click(function( e ) {
e.preventDefault();
$('#pagination .next').fadeOut();
$loader.fadeIn();
var $a = $( this ),
url = $a.attr("href"),
page = url.match( /\d+/ ),
pageNumber = page[0],
data = {
action: options.action,
page: pageNumber,
shop_order: $('#pagination-post-type').text()
};
$.get( options.ajaxURL, data, function( html ) {
$pagination.before( "<div id='page-" + pageNumber + "'></div>" );
$pagination.before( html );
$a.attr("href", url.replace('/' + pageNumber + '/', '/' + ( parseInt(pageNumber) + 1 ) + '/'));
if ( !html ) {
$('#pagination .next').remove();
$loader.fadeOut();
$end.fadeIn();
} else {
$loader.fadeOut();
$('#pagination .next').fadeIn();
//smoothScroll($('#page-' + pageNumber), 85);
}
});
});
}
};
return this.each(function() {
var element = this;
var pagination = new WPPagination( element );
});
};
$(function() {
if( $( "#pagination" ).length ) {
$( "#pagination" ).wpPagination();
}
});
})( jQuery );
函数.php
// ajax pag
function get_posts_for_pagination() {
$html = '';
$paged = ( $_GET['page'] ) ? $_GET['page'] : 1;
$post_type = $_GET['shop_order'];
if ( empty($post_type) ) {
return '';
}
if( filter_var( intval( $paged ), FILTER_VALIDATE_INT ) ) {
$paged = max( 1, (int) filter_input( INPUT_GET, 'pagina' ) );
$order_statuses = array('wc-completed');
$args = array(
'post_type' => 'shop_order',
'paged' => $paged,
'posts_per_page' => 4,
'post_status' => $order_statuses,
'customer_id' => get_current_user_id(),
);
$loop = new WP_Query( $args );
$post_count = $loop->found_posts;
// The Wordpress post loop
if( $loop->have_posts() ) {
while( $loop->have_posts() ) {
$loop->the_post();
// The order ID
$order_id = $loop->post->ID;
// Get an instance of the WC_Order Object
$order = wc_get_order($loop->post->ID);
$items = $order->get_items();
$orders_id = $order->get_id();
$status = wc_get_order_status_name( $order->get_status() );
$date_created = $order->get_date_created()->date('d/m/Y');
$payment_method = $order->get_payment_method_title();
$order_total = $order->get_formatted_order_total();
foreach ( $items as $item ) {
$product_name = $item->get_name();
$view_order = $order->get_view_order_url();
// Get product image - https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
$product = $item->get_product();
if( $product instanceof WC_Product ){
$order_img = $product->get_image();
}
//Get product download button
$downloads = $order->get_downloadable_items();
if(is_array($downloads)) {
foreach($downloads as $product){
$download_button = '<a href="'. $product['download_url'] .'" target="_blank">Download</a>';
}
}
echo '
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span class="mobile title">Ordine</span>
<span>#'. esc_attr($orders_id) .'</span>
</td>
<td class="product_name">
<span class="mobile title">Prodotto</span>
<a href="'. wp_kses_post($view_order) .'">'. wp_kses_post($product_name) .'</a>
</td>
<td class="product_data">
<span class="mobile title">Data</span>
<span>'. wp_kses_post($date_created) .'</span>
</td>
<td class="product_price">
<span class="mobile title">Prezzo</span>
<span>'. wp_kses_post($order_total) .'</span>
</td>
<td class="product_status">
<span class="mobile title">Stato</span>
<span class="label ' . $order->get_status() . '">'. wp_kses_post($status) .'</span>
</td>
<td class="product_action">
<span class="mobile title">File</span>
<a target=”_blank” href="'. esc_url($view_order) .'">Visualizza<i class="fa-duotone fa-eye"></i></a>
</td>
</tr>
</table>
';
}
} wp_reset_query();
}
}
echo $html;
exit();
}
add_action( 'wp_ajax_pagination', 'get_posts_for_pagination' );
add_action( 'wp_ajax_nopriv_pagination', 'get_posts_for_pagination' );
1 个解决方案
解决方案1
0 已采纳 2022-07-15 17:06:32
现在我已经找到了一个解决方案，即使这不是我想要做的，也许我从一开始就错了。 这个想法是在不重新加载页面的情况下转到第 2 页。 使用下面的代码，无需转到第 2 页，而是将其他元素简单地添加到已经存在的元素中。
此外，如果我想将相同的 ajax 函数添加到另一个模板，我将不得不在 functions.php 中添加更多代码。 我认为这是一种非常肮脏且不是很实用的做法。
无论如何，我为解决方法留下了“正确”的代码。
模板.php
<script src="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/custom.js?<?php $FourDigitRandomNumber = mt_rand(00000,99999); echo $FourDigitRandomNumber; ?>" defer=""></script>
<link rel="stylesheet" type="text/css" href="https://mywebsite.com/wp-content/themes/astra-child/woocommerce/myaccount/assets/custom.css?<?php $FourDigitRandomNumber = mt_rand(00000,99999); echo $FourDigitRandomNumber; ?>" />
<h3>Custom Endpoint</h3>
<?php
global $wp_query;
//Variable For Args Query
$paged = max( 1, (int) filter_input( INPUT_GET, 'pagina' ) );
$order_statuses = array('wc-completed');
$args = array(
'post_type' => 'shop_order',
'paged' => $paged,
'posts_per_page' => 4,
'post_status' => $order_statuses,
);
$loop = new WP_Query( $args );
// Loop Content
if( $loop->have_posts() ) {
while( $loop->have_posts() ) {
$loop->the_post();
//Here content
// The order ID
$order_id = $loop->post->ID;
// Get an instance of the WC_Order Object
$order = wc_get_order($loop->post->ID);
$items = $order->get_items();
$orders_id = $order->get_id();
$status = wc_get_order_status_name( $order->get_status() );
$date_created = $order->get_date_created()->date('d/m/Y');
$payment_method = $order->get_payment_method_title();
$order_total = $order->get_formatted_order_total();
foreach ( $items as $item ) {
$product_name = $item->get_name();
$view_order = $order->get_view_order_url();
// Get product image - https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
$product = $item->get_product();
if( $product instanceof WC_Product ){
$order_img = $product->get_image();
}
//Get product download button
$downloads = $order->get_downloadable_items();
if(is_array($downloads)) {
foreach($downloads as $product){
$download_button = '<a href="'. $product['download_url'] .'" target="_blank">Download</a>';
}
}
echo '
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span class="mobile title">Ordine</span>
<span>#'. esc_attr($orders_id) .'</span>
</td>
<td class="product_name">
<span class="mobile title">Prodotto</span>
<a href="'. wp_kses_post($view_order) .'">'. wp_kses_post($product_name) .'</a>
</td>
<td class="product_data">
<span class="mobile title">Data</span>
<span>'. wp_kses_post($date_created) .'</span>
</td>
<td class="product_price">
<span class="mobile title">Prezzo</span>
<span>'. wp_kses_post($order_total) .'</span>
</td>
<td class="product_status">
<span class="mobile title">Stato</span>
<span class="label ' . $order->get_status() . '">'. wp_kses_post($status) .'</span>
</td>
<td class="product_action">
<span class="mobile title">File</span>
<a target=”_blank” href="'. esc_url($view_order) .'">Visualizza<i class="fa-duotone fa-eye"></i></a>
</td>
</tr>
</table>
';
}
}
// Pagination
?><div id="pagination" class="container-pagination"><?php
$args = array(
'base' => esc_url( 'https://motustrength.it/account/custom/' ) . '%_%',
'format' => '?pagina=%#%',
'total' => $loop->max_num_pages,
'current' => $paged,
'show_all' => false,
'end_size' => 3,
'mid_size' => 3,
'prev_next' => true,
'prev_text' => __('<i class="fa-regular fa-angle-left"></i><span>Indietro</span>'),
'next_text' => __('<span>Avanti</span><i class="fa-regular fa-angle-right"></i>'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => ''
);
echo paginate_links($args);
}
else {
?><div class="no-downloads-msg">Nessun download disponibile, non hai ancora acquistato alcun prodotto.</div><?php
}
?></div><?php
文件.js
(function( $ ) {
$.fn.wpPagination = function( options ) {
options = $.extend({
links: "a",
action: "pagination",
ajaxURL: "https://" + location.host + "/wp-admin/admin-ajax.php",
next: ".next",
previous: ".previous",
disablePreviousNext: false
}, options);
function WPPagination( element ) {
this.$el = $( element );
this.init();
}
WPPagination.prototype = {
init: function() {
this.createLoader();
this.handlePreviousNextLinks();
this.handleLinks();
},
createLoader: function() {
var self = this;
self.$el.before( "<div id='pagination-loader'></div>" );
},
handlePreviousNextLinks: function() {
var self = this;
var $previous = $( options.previous, self.$el );
var $next = $( options.next, self.$el );
if( options.disablePreviousNext ) {
$previous.remove();
$next.remove();
} else {
$previous.addClass( "clicked" );
$next.addClass( "clicked" );
}
},
handleLinks: function() {
var self = this,
$links = $( options.links, self.$el ),
$loader = $( "#pagination-loader" );
$links.click(function( e ) {
e.preventDefault();
var $a = $( this ),
url = $a.attr( "href" ),
page = url.match( /\d+/ ), // Get the page number
pageNumber = page[0],
data = {
action: options.action, // Pass the AJAX action name along with the page number
page: pageNumber
};
if( !$a.hasClass( "clicked" ) ) { // We don't want duplicated posts
$loader.show(); // Show the loader
$.get( options.ajaxURL, data, function( html ) {
$loader.hide(); // Hide the loader
$loader.before( html ); // Insert posts
$a.addClass( "clicked" ); // Flag the current link as clicked
});
}
});
}
};
return this.each(function() {
var element = this;
var pagination = new WPPagination( element );
});
};
})( jQuery );
(function( $ ) {
$(function() {
if( $( "#pagination" ).length ) {
$( "#pagination" ).wpPagination();
}
});
})( jQuery );
函数.php
// Ajax Pagination
function my_get_posts_for_pagination() {
$paged = $_GET['page']; // Page number
$html = '';
$pag = 0;
if( filter_var( intval( $paged ), FILTER_VALIDATE_INT ) ) {
$order_statuses = array('wc-completed');
$pag = $paged;
$args = array(
'post_type' => 'shop_order',
'paged' => $pag, // Uses the page number passed via AJAX
'posts_per_page' => 4, // Change this as you wish
'post_status' => $order_statuses,
'customer_id' => get_current_user_id(),
);
$loop = new WP_Query( $args );
// The Wordpress post loop
if( $loop->have_posts() ) {
while( $loop->have_posts() ) {
$loop->the_post();
// Build the HTML string with your post's contents
// The order ID
$order_id = $loop->post->ID;
// Get an instance of the WC_Order Object
$order = wc_get_order($loop->post->ID);
$items = $order->get_items();
$orders_id = $order->get_id();
$status = wc_get_order_status_name( $order->get_status() );
$date_created = $order->get_date_created()->date('d/m/Y');
$payment_method = $order->get_payment_method_title();
$order_total = $order->get_formatted_order_total();
foreach ( $items as $item ) {
$product_name = $item->get_name();
$view_order = $order->get_view_order_url();
// Get product image - https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
$product = $item->get_product();
if( $product instanceof WC_Product ){
$order_img = $product->get_image();
}
//Get product download button
$downloads = $order->get_downloadable_items();
if(is_array($downloads)) {
foreach($downloads as $product){
$download_button = '<a href="'. $product['download_url'] .'" target="_blank">Download</a>';
}
}
//What you want to show
echo '
<table class="table_orders">
<tr class="table_row_items">
<td class="product_number">
<span class="mobile title">Ordine</span>
<span>#'. esc_attr($orders_id) .'</span>
</td>
<td class="product_name">
<span class="mobile title">Prodotto</span>
<a href="'. wp_kses_post($view_order) .'">'. wp_kses_post($product_name) .'</a>
</td>
<td class="product_data">
<span class="mobile title">Data</span>
<span>'. wp_kses_post($date_created) .'</span>
</td>
<td class="product_price">
<span class="mobile title">Prezzo</span>
<span>'. wp_kses_post($order_total) .'</span>
</td>
<td class="product_status">
<span class="mobile title">Stato</span>
<span class="label ' . $order->get_status() . '">'. wp_kses_post($status) .'</span>
</td>
<td class="product_action">
<span class="mobile title">File</span>
<a target=”_blank” href="'. esc_url($view_order) .'">Visualizza<i class="fa-duotone fa-eye"></i></a>
</td>
</tr>
</table>
';
}
wp_reset_query();
}
}
}
echo $html;
exit();
}
add_action( 'wp_ajax_pagination', 'my_get_posts_for_pagination' );
add_action( 'wp_ajax_nopriv_pagination', 'my_get_posts_for_pagination' );
使用WP_Query的Ajax Post Filter仅使用Category触发一次
[英]Ajax Post Filter with WP_Query only fires once with Category
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.