BS Modal에서의 WooCommerce 고객 주문 상세
WooCommerce를 실행하는 WordPress 웹 사이트에서 사용자는 자신의 (기본값) 개인 영역에 로그인하여 다음과 같은 정보를 표시할 수 있습니다.
- 주문내역
- 다운로드.
- 주소
- 정보 편집
- 로그아웃
탭에는 기본적으로 테이블이 표시되며 모든 주문 목록이 표시됩니다.View
버튼을 클릭하면 해당 주문의 전체 상세 페이지로 리디렉션됩니다.
모달 창에 테이블 뷰를 표시하려고 합니다.
타겟 URL이 로딩된 모달은 문제 없습니다.진짜 문제는 타겟 url이 full page의 url이라는 것입니다.이 url은 full page full page는 다음과 같습니다.<iframe>
그리고 내가 원하는 것은 아니다
그 테이블만 로드할 수 있는 쇼트코드가 몇 개 있는 것 같습니다.혹은 다음과 같은 woocommerce 함수도 있습니다.load_order_content_by_id($id)
?
누가 나를 올바른 방향으로 인도해 줄 수 있나요?
감사해요.
===외부===
올바른 기능을 알려준 Raunak Gupta에게 감사드립니다.orders.php 템플릿을 덮어쓰고 Modal window html을 추가하여 편집했습니다.$actions
:
'view' => array(
'url' => 'javascript:;',
'data' => [
'order-number' => $order->get_order_number()
],
'name' => __( 'View', 'woocommerce' )
),
같은 파일에 저장:
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>';
}
작은 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);
});
});
그리고 워드프레스에 연결되었다.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');
다음은 모달 창에 고객의 주문을 표시하는 전체 코드입니다.현재 사용자 주문을 받기 위한 기존 쿼리와 템플릿(약간 맞춤형)을 기반으로 합니다.
<?php
if(is_user_logged_in()):
// The query
$args = array(
// WC orders post type
'post_type' => 'shop_order',
'numberposts' => -1,
// for current user id
'meta_key' => '_customer_user',
'meta_value' => get_current_user_id(),
// get orders statuses
'post_status' => array_keys(wc_get_order_statuses()),
);
// Get all customer orders
$customer_orders = get_posts( $args );
$count_ord = 0;
if (!empty($customer_orders))
foreach ( $customer_orders as $custo_order )
$count_ord++;
if ( $count_ord > 0 )
$has_orders = true;
else
$has_orders = false;
// the template my-account/orders.php ?>
<?php do_action( 'woocommerce_before_account_orders', $has_orders ); ?>
<?php if ( $has_orders ) : ?>
<table class="woocommerce-MyAccount-orders shop_table shop_table_responsive my_account_orders account-orders-table">
<thead>
<tr>
<?php foreach ( wc_get_account_orders_columns() as $column_id => $column_name ) : ?>
<th class="<?php echo esc_attr( $column_id ); ?>"><span class="nobr"><?php echo esc_html( $column_name ); ?></span></th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ( $customer_orders as $customer_order ) :
$order = wc_get_order( $customer_order );
$item_count = $order->get_item_count();
?>
<tr class="order">
<?php foreach ( wc_get_account_orders_columns() as $column_id => $column_name ) : ?>
<td class="<?php echo esc_attr( $column_id ); ?>" data-title="<?php echo esc_attr( $column_name ); ?>">
<?php if ( has_action( 'woocommerce_my_account_my_orders_column_' . $column_id ) ) : ?>
<?php do_action( 'woocommerce_my_account_my_orders_column_' . $column_id, $order ); ?>
<?php elseif ( 'order-number' === $column_id ) : ?>
<a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
<?php echo _x( '#', 'hash before order number', 'woocommerce' ) . $order->get_order_number(); ?>
</a>
<?php elseif ( 'order-date' === $column_id ) : ?>
<time datetime="<?php echo date( 'Y-m-d', strtotime( $order->order_date ) ); ?>" title="<?php echo esc_attr( strtotime( $order->order_date ) ); ?>"><?php echo date_i18n( get_option( 'date_format' ), strtotime( $order->order_date ) ); ?></time>
<?php elseif ( 'order-status' === $column_id ) : ?>
<?php echo wc_get_order_status_name( $order->get_status() ); ?>
<?php elseif ( 'order-total' === $column_id ) : ?>
<?php echo sprintf( _n( '%s for %s item', '%s for %s items', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ); ?>
<?php elseif ( 'order-actions' === $column_id ) : ?>
<?php
$actions = array(
'pay' => array(
'url' => $order->get_checkout_payment_url(),
'name' => __( 'Pay', 'woocommerce' )
),
'view' => array(
'url' => $order->get_view_order_url(),
'name' => __( 'View', 'woocommerce' )
),
'cancel' => array(
'url' => $order->get_cancel_order_url( wc_get_page_permalink( 'myaccount' ) ),
'name' => __( 'Cancel', 'woocommerce' )
)
);
if ( ! $order->needs_payment() ) {
unset( $actions['pay'] );
}
if ( ! in_array( $order->get_status(), apply_filters( 'woocommerce_valid_order_statuses_for_cancel', array( 'pending', 'failed' ), $order ) ) ) {
unset( $actions['cancel'] );
}
if ( $actions = apply_filters( 'woocommerce_my_account_my_orders_actions', $actions, $order ) ) {
foreach ( $actions as $key => $action ) {
echo '<a href="' . esc_url( $action['url'] ) . '" class="button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
}
}
?>
<?php endif; ?>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_account_orders_pagination' ); ?>
<?php if ( 1 < $customer_orders->max_num_pages ) : ?>
<div class="woocommerce-Pagination">
<?php if ( 1 !== $current_page ) : ?>
<a class="woocommerce-Button woocommerce-Button--previous button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page - 1 ) ); ?>"><?php _e( 'Previous', 'woocommerce' ); ?></a>
<?php endif; ?>
<?php if ( $current_page !== intval( $customer_orders->max_num_pages ) ) : ?>
<a class="woocommerce-Button woocommerce-Button--next button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page + 1 ) ); ?>"><?php _e( 'Next', 'woocommerce' ); ?></a>
<?php endif; ?>
</div>
<?php endif; ?>
<?php else : ?>
<div class="woocommerce-Message woocommerce-Message--info woocommerce-info">
<a class="woocommerce-Button button" href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">
<?php _e( 'Go Shop', 'woocommerce' ) ?>
</a>
<?php endif; ?>
<?php _e( 'No order has been made yet.', 'woocommerce' ); ?>
</div>
<?php do_action( 'woocommerce_after_account_orders', $has_orders ); ?>
<?php endif; ?>
모달 창에 기존 css 규칙을 추가하거나 해당 css 규칙을 커스터마이즈해야 합니다.
이 코드는 테스트되어 완전하게 기능하고 있습니다.
woocommerce_order_table ($order_id)
이 WooCommerce 함수는 주문 상세 내역을 HTML 형식으로 반환합니다.$order_id
필요한 모든 주문내역을 한 번에 얻을 수 있는 기능은 전화를 걸어도 없는 것으로 알고 있습니다.WC_Order
필요한 것을 얻을 수 있습니다.이것과 같은 콜 방법을 사용하면, 필요한 정보를 얻을 수 있습니다.전화뿐만 아니라 다른 사람에게도 전화를 걸어야 합니다.get_items()
필요한 정확한 정보에 따라 방법이 달라집니다.일반적으로 이들은 게시된 객체와 구조가 유사한 객체를 반환합니다.
$order = new WC_Order($post->ID);
$_order = $order->get_items();
필요한 모든 정보를 얻기 위해 호출해야 할 메서드를 찾으려면 '상속된 메서드' 섹션에서 확인하십시오.https://docs.woocommerce.com/wc-apidocs/class-WC_Order.html
언급URL : https://stackoverflow.com/questions/39070007/woocommerce-customer-order-detail-in-bs-modal
'programing' 카테고리의 다른 글
JS index.js 파일에 접속하는 index.html을 ID 참조용으로 어떻게 반응합니까? (0) | 2023.04.05 |
---|---|
재료 UI 변경 시 반응 테스트 라이브러리 구성 요소 선택 (0) | 2023.04.05 |
Angularjs $http 투고 파일 및 폼 데이터 (0) | 2023.04.05 |
Typescript에서 인터페이스 또는 클래스를 사용하는 경우 (0) | 2023.04.05 |
jQuery AJAX 호출의 'finally'와 유사한 호출이 있습니까? (0) | 2023.04.05 |