Yuri Yuri - 3 months ago 31
PHP Question

WooCommerce customer order detail in BS Modal

In a WordPress website running WooCommerce, the user can login in his (default) personal area and display information like:


  • Orders history

  • Download

  • Addresses

  • Edit info

  • Logout



In the
orders
tab, a table is presented by default, showing a list of all orders, with a
View
button which redirects to the full detail page of that order.

What I'm trying to do is showing that page content (so, without any menu, header or footer) in a modal window.

I don't have any problem in showing the modal with the target url loaded in it.
The real problem is that the targeted url is that of the full page, which is not what I want.

I think there is some shortcode allowing to load that table, or maybe some woocommerce function like
load_order_content_by_id($id)
?

Can anybody point me in the right direction?

Thanks

===SOLVED===

Thanks to Raunak Gupta for pointing me to the right function.
I override the orders.php template, added Modal window html and edited
$actions
:

'view' => array(
'url' => 'javascript:;',
'data' => [
'order-number' => $order->get_order_number()
],
'name' => __( 'View', 'woocommerce' )
),


and on same file:

foreach ( $actions as $key => $action ) {
echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '"';
if(isset($action['data']) && is_array($action['data'])){
foreach($action['data'] AS $data_attr=>$data_value){
echo 'data-' . sanitize_html_class($data_attr) .'="' .esc_html($data_value) . '" ';
}
}
echo '>' . esc_html( $action['name'] ) . '</a>';
}


A little JS

$('.woocommerce-MyAccount-orders .button.view').on('click', function(e){
e.preventDefault();
var data = {};
data.action = 'modal_order';
data.order_number = $(this).data('order-number');

$.get( ajax_script.ajax_url, data, function(response) {
$('#modalOrderDetail').modal('show').find('.modal-body').html(response);
});
});


and hooked into wordpress by
function.php


function modal_order() {
if(is_user_logged_in()) {
$order_number = $_GET['order_number'];
woocommerce_order_details_table($order_number);
}
}

add_action('wp_ajax_modal_order', 'modal_order');
add_action('wp_ajax_nopriv_modal_order', 'modal_order');

Answer

woocommerce_order_details_table( $order_id )

This WooCommerce function returns the full order details in HTML form by $order_id