WooCommerce结账时向jQuery/JavaScript传递订单产品详情的问题排查

原有代码问题 #

• 错误调用wc_get_product()：该方法入参要求为产品ID，你传入了订单ID，无法获取到正确的产品对象，直接导致后续逻辑报错
• 钩子选择错误：woocommerce_checkout_order_processed是后台处理订单的触发钩子，在此处输出的JS代码不会渲染到用户前端，跟踪工具无法读取到相关变量
• 未兼容多商品场景：一份订单可能包含多个商品，原有逻辑默认只取单个产品，不符合实际业务逻辑
• JS语法错误：变量输出位置多嵌套了一层双引号，会触发JS语法报错

修复方案 #

核心逻辑改用前端可渲染的woocommerce_thankyou钩子（订单提交后跳转的感谢页触发），先遍历订单内所有商品获取对应数据，再输出符合要求的跟踪JS代码，修复后代码如下：

add_action( 'woocommerce_thankyou', 'send_order_data_to_tracking_tool', 10, 1 );
function send_order_data_to_tracking_tool( $order_id ){
    // 订单有效性校验
    if( empty($order_id) ) return;
    $order = wc_get_order( $order_id );
    if( !is_a( $order, 'WC_Order' ) ) return;

    $product_list = [];
    $total_revenue = 0;

    // 遍历获取订单内所有商品信息
    foreach ( $order->get_items() as $item ) {
        $product = $item->get_product();
        if( empty($product) ) continue;
        $product_list[] = [
            'id' => $product->get_id(),
            'price' => $product->get_price(),
            'quantity' => $item->get_quantity()
        ];
        // 累加订单总金额
        $total_revenue += $product->get_price() * $item->get_quantity();
    }

    if( empty($product_list) ) return;

    // 输出跟踪JS，可根据你的跟踪工具要求调整参数格式
    // 如下示例取第一个商品ID上报，多商品上报可遍历$product_list输出
    $first_product_id = $product_list[0]['id'];
?>
<script type="text/javascript">
var clicky_goal = { 
    id: "<?php echo esc_js($first_product_id); ?>", 
    revenue: "<?php echo esc_js($total_revenue); ?>" 
};
</script>
<?php
}

补充说明 #

• 代码添加了esc_js()做参数转义，避免特殊字符导致JS语法报错
• 如果跟踪工具需要上报所有商品数据，遍历$product_list数组输出对应格式即可
• 若你的跟踪工具支持服务端接口上报，也可以直接在woocommerce_checkout_order_processed钩子中调用服务端接口发送数据，无需输出JS到前端

内容的提问来源于stack exchange，提问作者dcron