在WooCommerce感谢页嵌入订单详情并传递给JavaScript-js教程-PHP中文网

在WooCommerce感谢页嵌入订单详情并传递给JavaScript

霞舞

发布： 2025-11-03 15:38:02

原创

576人浏览过

在WooCommerce感谢页嵌入订单详情并传递给JavaScript

本教程旨在详细指导如何在woocommerce的“感谢页”中安全有效地获取订单详情，并将其动态嵌入到javascript代码中，以便将数据发送至第三方营销或分析系统。文章将重点介绍使用wordpress动作钩子`wp_footer`的正确方法，并提供处理单个或多个订单商品的代码示例，确保数据准确无误地传递。

在现代电商运营中，将WooCommerce订单数据实时同步到第三方营销、联盟或分析平台是常见的需求。这通常需要在用户完成购买后的“感谢页”上执行一段JavaScript代码，并将订单ID、总金额、商品信息等动态数据传递给该脚本。然而，直接在页面内容中嵌入PHP代码或使用不当的钩子，可能导致数据无法正确获取或脚本无法执行。本文将提供一种稳健且专业的解决方案。

理解WooCommerce感谢页的数据流

当用户在WooCommerce完成订单后，系统会跳转到一个特殊的“感谢页”。这个页面的URL通常包含订单ID，例如 yourdomain.com/checkout/order-received/1234/?key=wc_order_xxxxxx。WooCommerce通过order-received这个查询变量来识别当前页面对应的订单。要正确获取订单数据，我们需要利用这个查询变量。

错误的常见方法及原因

许多开发者在尝试实现此功能时，可能会遇到以下问题：

使用isset($wp-youjiankuohaophpcnquery_vars['thankyou'])： 尽管thankyou在某些旧版本或特定配置下可能存在，但WooCommerce官方推荐且更稳定的查询变量是order-received。
在Elementor或其他页面构建器中直接嵌入PHP： 页面构建器通常会将内容渲染为静态HTML，或者在PHP执行环境之外处理短代码，导致嵌入的PHP代码无法正确解析或获取WordPress/WooCommerce的全局变量和函数。
在不正确的WordPress钩子中执行代码： 将代码放置在不恰当的钩子中，可能导致在订单数据尚未完全加载时执行，或者脚本位置不符合要求。

正确的实现方法：使用WordPress动作钩子

最推荐且最稳健的方法是利用WordPress的动作钩子（Action Hooks），将PHP代码与JavaScript脚本结合，动态生成包含订单数据的脚本。wp_footer钩子是一个理想的选择，它会在页面</body>标签之前执行，确保所有HTML内容都已加载，并且不会阻塞页面渲染。

立即学习“Java免费学习笔记（深入）”；

步骤一：创建PHP函数来嵌入JavaScript

我们将创建一个PHP函数，该函数将负责：

灵感PPT

AI灵感PPT - 免费一键PPT生成工具

查看详情

检查当前页面是否为WooCommerce的“感谢页”。
获取当前订单的WC_Order对象。
提取所需的订单详情。
将这些详情动态地插入到JavaScript变量中。
将整个JavaScript脚本通过wp_footer钩子输出到页面底部。

以下是实现此功能的PHP代码：

<?php

/**
 * 在WooCommerce感谢页嵌入营销追踪脚本并传递订单详情
 */
add_action( 'wp_footer', 'embed_marketing_script_with_order_details', 5 );
function embed_marketing_script_with_order_details() {
    global $wp;

    // 检查当前页面是否为WooCommerce的订单接收（感谢）页面
    if ( isset( $wp->query_vars['order-received'] ) ) :

        // 获取订单ID
        $order_id = absint( $wp->query_vars['order-received'] ); 
        // 获取WC_Order对象
        $order = wc_get_order( $order_id ); 

        // 确保订单对象有效
        if ( ! $order ) {
            return; // 如果订单无效，则停止执行
        }

        // 获取所有订单商品
        $order_items = $order->get_items(); 

        // 初始化用于存储商品ID和名称的数组
        $product_ids = $product_names = array(); 

        // 遍历订单商品，提取ID和名称
        foreach ( $order_items as $order_item ) {
            $product_ids[]   = $order_item->get_product_id();
            $product_names[] = $order_item->get_name();
        }

        // 将商品ID和名称数组转换为以 "|" 分隔的字符串
        // 如果第三方系统需要不同的分隔符，请在此处修改
        $product_ids_string = implode( '|', $product_ids );
        $product_names_string = implode( '|', $product_names );

        ?>   
        <script id="wc-checkout-custom-tracking" 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( $product_ids_string ); ?>', // 商品ID字符串 (多个商品用'|'分隔)
            gname : '<?php echo esc_js( $product_names_string ); ?>', // 商品名称字符串 (多个商品用'|'分隔)
            unit : ' ', // 固定值或无需填充
            odate : '<?php echo esc_js( $order->get_date_created()->format('Y-m-d H:i:s') ); ?>', // 订单创建时间
        };

        (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'; // 第三方追踪脚本URL
            var s = document.getElementsByTagName('script')[0]; 
            s.parentNode.insertBefore(oeyasc, s);
        })();
        </script>
        <?php 
    endif;
}

登录后复制

代码解析：

add_action( 'wp_footer', 'embed_marketing_script_with_order_details', 5 );: 这行代码将我们的自定义函数 embed_marketing_script_with_order_details 挂载到 wp_footer 钩子上。优先级 5 确保它在大多数其他脚本之前执行。
global $wp;: 访问WordPress的全局$wp对象，其中包含查询变量信息。
if ( isset( $wp->query_vars['order-received'] ) ) :: 这是关键的条件判断，确保代码只在WooCommerce的“感谢页”上执行。
$order_id = absint( $wp->query_vars['order-received'] );: 安全地获取订单ID。absint函数确保值是正整数。
$order = wc_get_order( $order_id );: 使用WooCommerce提供的函数获取订单对象，通过这个对象我们可以访问订单的所有属性。
$order->get_order_number(), $order->get_total(), $order->get_date_created(): 这些是WC_Order对象提供的方法，用于获取订单号、总金额和创建日期。注意get_date_created()返回的是一个WC_DateTime对象，需要用format()方法格式化为字符串。
$order_items = $order->get_items();: 获取订单中的所有商品项，返回一个WC_Order_Item_Product对象数组。
循环处理商品： foreach ( $order_items as $order_item ) 循环遍历每个商品，并通过$order_item->get_product_id()和$order_item->get_name()获取商品的ID和名称。
implode('|', $product_ids) / implode('|', $product_names): 由于第三方系统可能需要将多个商品ID或名称作为单个字符串传递（例如，用特定分隔符连接），这里使用implode函数将数组转换为以|分隔的字符串。如果您的第三方系统有不同的要求，请调整分隔符。
<?php echo esc_js( ... ); ?>: esc_js()是一个重要的安全函数，用于转义输出到JavaScript中的PHP变量，防止XSS攻击或JavaScript语法错误。
JavaScript脚本嵌入： PHP代码块结束后，直接输出<script>标签，并在其中使用<?php echo ...; ?>将动态获取的PHP变量值填充到JavaScript的oeyaPostParam对象中。
第三方脚本加载： (function() { ... })(); 内部的JavaScript代码负责动态创建并插入第三方追踪脚本。

步骤二：将代码添加到WordPress

将上述PHP代码添加到您的WordPress网站有以下两种推荐方式：

使用Code Snippets插件（推荐）：
- 安装并激活“Code Snippets”插件。
- 进入WordPress后台的“Snippets” -> “Add New”。
- 粘贴上述PHP代码到代码框中。
- 为Snippet命名，例如“WooCommerce感谢页追踪脚本”。
- 确保“Run Snippet everywhere”选项被选中。
- 保存并激活Snippet。
添加到主题的functions.php文件：
- 通过FTP或主机控制面板访问您的WordPress安装。
- 导航到 wp-content/themes/您的主题名/。
- 编辑 functions.php 文件。
- 将上述PHP代码粘贴到文件的末尾，在?>标签之前（如果存在的话）。
- 注意： 直接修改主题文件可能在主题更新时丢失更改。强烈建议使用子主题或Code Snippets插件。

注意事项

安全： 始终使用esc_js()等转义函数来处理输出到JavaScript中的数据。
第三方脚本URL： 确保oeyasc.src中的第三方脚本URL是正确的。
数据格式： 根据第三方系统的具体要求，调整gno和gname中商品ID和名称的连接方式（例如，使用逗号,或其他分隔符）。
错误处理： 在实际生产环境中，您可能需要添加更健壮的错误处理和日志记录机制，以应对订单获取失败或其他异常情况。
缓存： 如果您的网站使用了缓存插件，请在部署新代码后清除缓存，以确保更改立即生效。
测试： 在部署到生产环境之前，务必在开发或测试环境中进行充分测试，验证数据是否正确传递到第三方系统。

总结

通过利用WordPress的动作钩子wp_footer，结合WooCommerce的wc_get_order()函数，我们可以安全、高效地在感谢页中获取订单详情，并将其动态嵌入到JavaScript追踪脚本中。这种方法避免了直接在页面内容中混合PHP和HTML可能带来的问题，提供了更清晰、更易于维护的代码结构，是实现此类功能的最佳实践。

以上就是在WooCommerce感谢页嵌入订单详情并传递给JavaScript的详细内容，更多请关注php中文网其它相关文章！