使用 WP_Query 实现 WooCommerce 订单的 AJAX 分页查询-html教程-PHP中文网

使用 wp_query 实现 woocommerce 订单的 ajax 分页查询

本文详细介绍了如何利用 WordPress 的 WP_Query 和 AJAX 技术，高效地实现 WooCommerce 订单的动态分页查询与展示。我们将探讨常见的 WP_Query 配置问题、WC_Order 对象的正确使用方法，并提供完整的 PHP 和 JavaScript 代码示例，以确保订单数据能够流畅加载和展示，避免常见的 500 错误。

1. 理解问题：WP_Query 与 WooCommerce 订单的挑战

在使用 WP_Query 查询 WooCommerce 订单时，开发者常会遇到无法正确获取订单详情（如订单 ID、商品信息）的问题，甚至可能导致 AJAX 请求返回 500 错误。这通常是由于以下几个原因造成的：

不正确的 WP_Query 参数配置： 未指定正确的 post_type 和 post_status。
获取订单 ID 的方式不当： 在自定义循环中，直接使用 get_the_ID() 可能需要 the_post() 正确设置全局 $post 对象，而 $loop-youjiankuohaophpcnpost->ID 则直接访问当前循环中的帖子对象 ID。
未正确实例化 WC_Order 对象： 仅获取到订单的帖子 ID，但未将其转换为 WooCommerce 的 WC_Order 对象，导致无法调用 get_id()、get_items() 等方法。
分页逻辑错误： 计算总页数和当前页码的逻辑可能导致无限循环或错误的分页结果。
AJAX 请求处理不当： 后端 PHP 代码未正确响应 AJAX 请求，或前端 JavaScript 代码未正确发送和处理数据。

原始代码中，一个常见的错误是尝试在 WP_Query 循环内部直接访问 $order->get_id() 或 $items = $order->get_items(); 而 $order 变量可能尚未被正确初始化为 WC_Order 对象，或者在获取订单 ID 时混淆了全局上下文和循环上下文。此外，用于计算总数的 WP_Query 错误地查询了 post 类型而不是 shop_order 类型，导致分页总数不准确。

2. 核心解决方案：WP_Query 配置与 WC_Order 处理

要正确地通过 WP_Query 获取 WooCommerce 订单并处理其详情，关键在于以下几点：

2.1 正确配置 WP_Query 参数

针对 WooCommerce 订单，WP_Query 必须指定 post_type 为 shop_order，并根据需求设置 post_status。常用的订单状态包括 wc-completed (已完成)、wc-processing (处理中) 等。同时，为了实现分页，需要设置 posts_per_page 和 paged 参数。

$args = [
    'post_type'      => 'shop_order',    // 指定帖子类型为 WooCommerce 订单
    'post_status'    => 'wc-completed',  // 指定订单状态为已完成
    'orderby'        => 'post_date',     // 按订单日期排序
    'order'          => 'DESC',          // 降序排列
    'posts_per_page' => $per_page,       // 每页显示的订单数量
    'paged'          => $page,           // 当前页码
];
$loop = new WP_Query( $args );

登录后复制

2.2 正确获取订单 ID 并实例化 WC_Order 对象

在 WP_Query 的循环中，$loop->the_post() 会设置当前循环的帖子数据。此时，可以通过 $loop->post->ID 或 get_the_ID() 获取当前订单的帖子 ID。然后，使用 wc_get_order() 函数将此 ID 转换为一个 WC_Order 对象，这是访问订单详情的关键。

if ( $loop->have_posts() ) {
    while ( $loop->have_posts() ) {
        $loop->the_post(); // 设置当前帖子数据

        $order_id = $loop->post->ID; // 获取当前订单的帖子 ID
        $order = wc_get_order( $order_id ); // 实例化 WC_Order 对象

        if ( $order instanceof WC_Order ) {
            // 现在可以安全地调用 $order 对象的方法了
            $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();
            $items          = $order->get_items();

            // 遍历订单商品项
            foreach ( $items as $item ) {
                $product_name = $item->get_name();
                $view_order   = $order->get_view_order_url();
                $product      = $item->get_product();

                if ( $product instanceof WC_Product ) {
                    // ... 生成商品详情 HTML
                }
            }
        }
    }
}

登录后复制

注意： 检查 $order instanceof WC_Order 是一个良好的编程习惯，可以防止在订单对象未成功实例化时调用其方法导致错误。

蓝心千询

蓝心千询是vivo推出的一个多功能AI智能助手

查看详情

2.3 获取总页数

WP_Query 对象有一个非常有用的属性 found_posts，它存储了查询到的所有帖子（不考虑 posts_per_page 限制）的总数。利用这个属性，我们可以准确计算出总页数。

$count = $loop->found_posts; // 获取所有符合条件的帖子总数
$pages_num = intval( ceil( $count / $per_page ) ); // 计算总页数

登录后复制

3. AJAX 端点与分页逻辑实现 (PHP)

为了实现无刷新分页，我们需要在 functions.php 中创建一个 AJAX 处理函数，并使用 wp_ajax_ 钩子使其对登录用户和非登录用户都可用。

// functions.php
add_action( 'wp_ajax_demo_pagination_posts', 'demo_pagination_posts' );
add_action( 'wp_ajax_nopriv_demo_pagination_posts', 'demo_pagination_posts' );

function demo_pagination_posts() {
    global $wpdb; // 如果需要直接操作数据库，可以引入 $wpdb

    $msg = ''; // 用于存储订单详情 HTML
    if ( isset( $_POST[ 'page' ] ) ) {
        // 1. 获取并净化页码参数
        $page = max( intval( $_POST[ 'page' ] ), 1 ); // 确保页码至少为 1
        $per_page = 4; // 每页显示的订单数量

        // 2. 构建 WP_Query 查询订单
        $loop = new WP_Query( [
            'post_type'      => 'shop_order',
            'post_status'    => 'wc-completed',
            'orderby'        => 'post_date',
            'order'          => 'DESC',
            'posts_per_page' => $per_page,
            'paged'          => $page,
        ] );

        // 3. 处理订单数据并生成 HTML
        if ( $loop->have_posts() ) {
            while ( $loop->have_posts() ) {
                $loop->the_post();
                $order_id = $loop->post->ID;
                $order = wc_get_order( $order_id );

                if ( $order instanceof WC_Order ) {
                    $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();
                    $items          = $order->get_items();

                    foreach ( $items as $item ) {
                        $product_name = $item->get_name();
                        $view_order   = $order->get_view_order_url();
                        $product      = $item->get_product();

                        if ( $product instanceof WC_Product ) {
                            // 这里可以根据需要获取更多商品信息，例如图片、下载链接等
                            // $order_img = $product->get_image();
                            // $downloads = $order->get_downloadable_items();
                            // $download_button = '';
                            // if ( is_array( $downloads ) ) {
                            //     foreach ( $downloads as $download_item ) {
                            //         $download_button .= '<a href="' . $download_item[ 'download_url' ] . '" target="_blank">下载</a>';
                            //     }
                            // }

                            $msg .= '
                            <table class="table_orders" border="2">
                                <tr class="table_row_items">
                                  <td class="product_number">
                                   <span class="mobile title">订单</span>
                                   <span>#' . esc_attr( $orders_id ) . '</span>
                                  </td>

                                  <td class="product_name">
                                   <span class="mobile title">产品</span>
                                   <a href="' . esc_url( $view_order ) . '">' . esc_html( $product_name ) . '</a>
                                  </td>

                                  <td class="product_data">
                                   <span class="mobile title">日期</span>
                                   <span>' . esc_html( $date_created ) . '</span>
                                  </td>

                                  <td class="product_price">
                                   <span class="mobile title">价格</span>
                                   <span>' . esc_html( $order_total ) . '</span>
                                  </td>

                                  <td class="product_status">
                                   <span class="mobile title">状态</span>
                                   <span class="label ' . $order->get_status() . '">' . esc_html( $status ) . '</span>
                                  </td>

                                  <td class="product_action">
                                   <span class="mobile title">操作</span>
                                   <a target="_blank" href="' . esc_url( $view_order ) . '">查看<i class="fa-duotone fa-eye"></i></a>
                                  </td>
                                </tr>    
                            </table> 
                        ';
                        }
                    }
                }
            }
            wp_reset_postdata(); // 恢复全局 $post 数据
        } else {
            $msg = '<p>没有找到订单。</p>';
        }

        // 4. 生成分页导航 HTML
        $count = $loop->found_posts; // 获取总订单数
        $pages_num = intval( ceil( $count / $per_page ) ); // 计算总页数

        // 分页按钮逻辑（简化版，可根据需求调整）
        $start_loop = 1;
        $end_loop = $pages_num;
        if ($pages_num > 7) { // 如果总页数大于7，显示部分页码
            if ($page >= 4) {
                $start_loop = $page - 3;
                $end_loop = $page + 3;
                if ($end_loop > $pages_num) {
                    $end_loop = $pages_num;
                    $start_loop = $pages_num - 6;
                }
            } else {
                $end_loop = 7;
            }
        }
        $start_loop = max(1, $start_loop); // 确保起始页码不小于1

        $pagination_html = "<div class='pagination-link'><ul>";
        // 上一页按钮
        if ( $page > 1 ) {
            $pagination_html .= "<li data-pagenum='" . ( $page - 1 ) . "' class='active'>上一页</li>";
        } else {
            $pagination_html .= "<li class='inactive'>上一页</li>";
        }
        // 页码按钮
        for ( $i = $start_loop; $i <= $end_loop; $i++ ) {
            $class = ( $page == $i ) ? 'selected' : 'active';
            $pagination_html .= "<li data-pagenum='$i' class='$class'>{$i}</li>";
        }
        // 下一页按钮
        if ( $page < $pages_num ) {
            $pagination_html .= "<li data-pagenum='" . ( $page + 1 ) . "' class='active'>下一页</li>";
        } else {
            $pagination_html .= "<li class='inactive'>下一页</li>";
        }
        $pagination_html .= "</ul></div>";

        // 5. 输出结果
        echo '<div class = "pagination-content">' . $msg . '</div>' .
             '<div class = "pagination-nav">' . $pagination_html . '</div>';
    }
    die(); // 终止 AJAX 请求，防止输出额外内容
}

登录后复制

4. 前端 AJAX 请求与动态加载 (JavaScript)

前端页面（例如 custom-template.php）需要包含 JavaScript 代码来发送 AJAX 请求并处理服务器返回的数据。

<!-- custom-template.php -->
<div class="wrap">
  <div id="primary" class="content-area">
    <div class="col-md-12 content">
      <div class="inner-box content no-right-margin darkviolet">
        <script type="text/javascript">
          jQuery(document).ready(function ($) {
            // WordPress AJAX URL
            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';

            // 加载订单的函数
            function load_all_posts(page) {
              var data = {
                page: page, // 当前页码
                action: "demo_pagination_posts" // 对应的 AJAX 动作名称
              };
              // 发送 AJAX 请求
              $.post(ajaxurl, data, function (response) {
                // 将服务器返回的内容填充到容器中
                $(".pagination_container").html(response);
              });
            }

            // 页面加载时默认加载第一页
            load_all_posts(1);

            // 监听分页链接的点击事件
            $(document).on('click', '.pagination-link ul li', function () {
              var paged = $(this).attr('data-pagenum'); // 获取点击的页码
              if (paged) { // 确保获取到有效的页码
                load_all_posts(paged); // 加载对应页码的订单
              }
            });
          });
        </script>
        <div class="pag_loading">
          <div class="pagination_container">
            <div class="post-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

登录后复制

5. 注意事项与最佳实践

数据净化与验证 (Sanitization and Validation)： 在 PHP 后端接收来自前端的数据（如 $_POST['page']）时，务必进行净化 (sanitize_text_field(), intval()) 和验证，以防止跨站脚本攻击 (XSS) 和 SQL 注入等安全问题。本教程中的代码已包含 intval()。
错误调试： 如果遇到 500 错误，请检查 WordPress 的调试日志 (wp-content/debug.log) 或服务器错误日志。确保 WP_DEBUG 和 WP_DEBUG_LOG 在 wp-config.php 中设置为 true。
wp_reset_postdata()： 在 WP_Query 循环结束后，调用 wp_reset_postdata() 是一个好习惯，它可以恢复全局 $post 数据到主查询的上下文，避免对后续代码造成影响。在本例中，由于 die() 终止了请求，其影响可能不那么明显，但在其他场景中至关重要。
语义化 HTML 和 CSS： 分页导航使用 data-pagenum 属性而非非标准的 p 属性，更符合 HTML5 规范，也更易于维护。
性能考量： 避免在循环内部执行复杂的数据库查询或耗时操作。对于大量订单的场景，可能需要考虑缓存机制。
用户体验： 在 AJAX 请求进行时，可以添加加载动画或禁用分页按钮，以提升用户体验。

总结

通过上述优化和代码示例，我们能够有效地利用 WP_Query 和 AJAX 技术在 WordPress 网站中实现 WooCommerce 订单的动态分页查询。关键在于正确配置 WP_Query 参数，将订单 ID 转换为 WC_Order 对象以访问其详细信息，并构建健壮的 AJAX 处理逻辑和前端交互。遵循这些最佳实践，可以确保订单数据的流畅加载和展示，同时维护网站的性能和安全性。

以上就是使用 WP_Query 实现 WooCommerce 订单的 AJAX 分页查询的详细内容，更多请关注php中文网其它相关文章！