如何在WooCommerce感谢页嵌入JS传递订单数据至联盟营销系统

问题背景 #

与联盟营销公司合作，需在用户下单后将WooCommerce订单信息传递至对方系统。自行尝试的代码方案无效，感谢页无法正常传递数据。

对方提供的参考代码：

<script type="text/javascript">
 var oeyaPostParam = {
 code : '',
 cookie_name : '',
 mcode : '', 
 oid : 'order id', 
 amount : 'order total',
 bid : '',
 gno : 'product id', 
 gname : 'product name',
 unit : ' ', 
 odate : 'order establishment time ', 
};
 (function() {
 var oeyasc = document.createElement('script'); oeyasc.type = 'text/javascript'; oeyasc.async = true;
 oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
 })();
</script>

注：空白项无需填写或仅填固定值。

自身原方案（无效）：

1. Code Snippets添加的PHP代码（全局运行）：

<?php

global $wp;

if ( isset($wp->query_vars['thankyou']) ) {
    $order_id = absint($wp->query_vars['thankyou']); // The order ID
    $order    = wc_get_order( $order_id ); // The WC_Order object
}

2. Elementor短代码小工具插入的HTML代码：

<!-- begin content -->

<script type="text/javascript">
 var oeyaPostParam = {
 code : '',
 cookie_name : '',
 mcode : '', 
 oid : '<?php echo $order->get_order_number(); ?>', 
 amount : '<?php echo $order->get_total(); ?>',
 bid : '',
 gno : '<?php echo $item->get_product_id(); ?>', 
 gname : '<?php echo $item->get_name(); ?>',
 unit : ' ', 
 odate : '<?php echo $order->get_date_created(); ?>', 
};
 (function() {
 var oeyasc = document.createElement('script'); oeyasc.type = 'text/javascript'; oeyasc.async = true;
 oeyasc.src = ' https://www.conn.tw/track/oeya_jss2s_v1.0.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(oeyasc, s);
 })();
</script>

原方案问题分析 #

1. 变量作用域不共享：Code Snippets里定义的$order变量无法在Elementor短代码的上下文直接访问，导致PHP输出为空或报错。
2. 商品变量未定义：$item变量未初始化就直接调用方法，会触发PHP错误，导致脚本无法正常生成。
3. 日期格式错误：get_date_created()返回的是WC_DateTime对象，直接输出会生成不符合要求的字符串格式。
4. 脚本URL无效：对方脚本URL前有多余空格，会导致浏览器无法正确加载脚本。

修正方案 #

使用WooCommerce官方提供的woocommerce_thankyou钩子直接输出脚本，确保订单数据能正确获取且上下文有效。

完整代码（替换原所有代码） #

add_action( 'woocommerce_thankyou', 'send_order_data_to_affiliate', 10, 1 );
function send_order_data_to_affiliate( $order_id ) {
    // 获取订单对象，验证有效性
    $order = wc_get_order( $order_id );
    if ( ! $order ) return;

    // 获取订单商品，默认取第一个（多商品情况见下方说明）
    $items = $order->get_items();
    $item = reset( $items );
    if ( ! $item ) return;

    // 格式化订单创建时间为标准格式（YYYY-MM-DD HH:MM:SS）
    $order_date = $order->get_date_created()->format( 'Y-m-d H:i:s' );

    // 输出联盟营销脚本
    ?>
    <script type="text/javascript">
    var oeyaPostParam = {
        code : '',
        cookie_name : '',
        mcode : '', 
        oid : '<?php echo esc_js( $order->get_order_number() ); ?>', 
        amount : '<?php echo esc_js( $order->get_total() ); ?>',
        bid : '',
        gno : '<?php echo esc_js( $item->get_product_id() ); ?>', 
        gname : '<?php echo esc_js( $item->get_name() ); ?>',
        unit : ' ', 
        odate : '<?php echo esc_js( $order_date ); ?>', 
    };
    (function() {
        var oeyasc = document.createElement('script'); 
        oeyasc.type = 'text/javascript'; 
        oeyasc.async = true;
        // 移除URL前的空格，确保脚本正常加载
        oeyasc.src = 'https://www.conn.tw/track/oeya_jss2s_v1.0.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(oeyasc, s);
    })();
    </script>
    <?php
}

代码说明 #

• 使用woocommerce_thankyou钩子：WooCommerce感谢页专属动作钩子，确保代码仅在感谢页执行，且能直接获取订单ID参数。
• 变量安全处理：用esc_js()转义所有输出到JS的变量，避免XSS攻击和JS语法错误。
• 商品处理：通过get_items()获取订单商品列表，reset()取第一个商品（若订单含多商品，需和联盟确认传递规则，见下方补充）。
• 日期格式化：将WC_DateTime对象转为标准字符串格式，符合多数系统的时间参数要求。
• 修复脚本URL：移除URL前的空格，确保浏览器能正确请求联盟脚本。

多商品订单处理补充 #

若联盟支持传递多个商品ID和名称，可将商品信息改为逗号分隔格式，修改代码如下：

// 替换原商品处理部分
$product_ids = array();
$product_names = array();
foreach ( $order->get_items() as $item ) {
    $product_ids[] = $item->get_product_id();
    $product_names[] = $item->get_name();
}
$gno = implode( ',', $product_ids );
$gname = implode( ',', $product_names );

然后在oeyaPostParam中修改对应字段：

gno : '<?php echo esc_js( $gno ); ?>', 
gname : '<?php echo esc_js( $gname ); ?>',

使用方法 #

1. 删除原Code Snippets中的PHP代码和Elementor短代码。
2. 将上述修正后的代码添加到Code Snippets，设置为「Run snippet everywhere」，保存并激活。
3. 测试下单后，打开浏览器开发者工具（F12）：
   • 查看Console标签，确认无JS错误。
   • 查看Network标签，确认联盟脚本已加载，且参数传递正确。

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