Con la ayuda de los usuarios de stackoverflow, hice una navegación ajax con WP_Query. Las publicaciones (que en mi caso son pedidos de usuarios) se cargan correctamente. Sin embargo, al final del trabajo me di cuenta que el resultado que buscaba era diferente.
Lo que quiero hacer
Lo que estaba tratando de lograr era una página de navegación como sucede en el gif a continuación. Logré esto con un complemento, pero como estoy tratando de aprender, me gustaría confiar en el código personalizado y no en los complementos.
Lo que hice
El código que escribí no navega entre páginas, sino que agrega más publicaciones a las existentes, por lo que lo que hace es cargar más publicaciones hasta que obtiene una lista de pedidos demasiado larga.
Mi pregunta
¿Puedo modificar el código que tengo para obtener navegación ajax entre páginas en lugar de cargar otras publicaciones? Si se puede hacer, ¿cuál es la forma correcta de hacerlo? Espero algunos posibles cambios, de lo contrario tendría que empezar de nuevo.
Plantilla.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
Archivo.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 );
funciones.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' );
.