在WooCommerce感谢页嵌入JavaScript并获取订单详情的专业指南

本教程旨在指导用户如何在woocommerce感谢页面中，利用wordpress的动作钩子（如`wp_footer`），安全有效地获取订单详情，并将其动态注入到javascript跟踪脚本中。通过php代码获取订单id、总金额、商品id和名称等信息，并将其格式化后传递给外部营销或分析系统，确保数据传输的准确性和完整性，避免直接在模板中嵌入复杂逻辑。

理解WooCommerce感谢页的数据流与挑战

在与联盟营销公司或外部分析系统集成时，通常需要在用户完成订单后的“感谢页面”（Thank You Page）上发送订单相关数据。这通常通过嵌入JavaScript代码实现，该代码需要动态获取当前订单的详细信息，如订单号、总金额、商品ID和名称等。

初学者常遇到的挑战是，在WordPress和WooCommerce环境中，直接在页面内容或使用短代码嵌入PHP和JavaScript混合代码，可能无法正确获取到订单上下文，导致PHP变量无法解析或解析错误。这是因为感谢页面在加载时，订单数据需要通过特定的WooCommerce/WordPress查询变量才能被正确识别和访问。

解决方案核心：利用WordPress动作钩子

解决此问题的关键在于使用WordPress的动作钩子（Action Hooks），尤其是在wp_footer或wp_head钩子上执行自定义PHP函数。这些钩子允许我们在页面渲染的不同阶段插入自定义代码，并且在这个阶段，WooCommerce的全局订单对象通常已经可用。

wp_footer钩子通常是更好的选择，因为它将JavaScript代码放置在页面内容的末尾，有助于提高页面加载速度，并确保在脚本执行时DOM元素已基本加载完成。

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

以下是实现此功能的具体步骤和代码示例。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

步骤一：创建并注册自定义PHP函数

我们需要编写一个PHP函数，该函数将负责：

1. 检查当前页面是否为WooCommerce的“订单接收”页面（即感谢页）。
2. 获取当前订单的ID和完整的WC_Order对象。
3. 从WC_Order对象中提取所需的订单详情。
4. 将这些详情动态嵌入到JavaScript跟踪脚本中。
5. 使用add_action函数将此PHP函数挂载到wp_footer钩子上。

代码示例：

将以下PHP代码添加到您的主题的functions.php文件，或者更推荐使用“Code Snippets”等插件进行管理。

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;
        }

        // 初始化商品ID和商品名称数组
        $product_ids = [];
        $product_names = [];

        // 遍历订单中的所有商品项
        $order_items = $order->get_items();
        foreach ( $order_items as $order_item ) {
            $product_ids[] = $order_item->get_product_id();
            $product_names[] = $order_item->get_name();
        }

        // 将商品ID和名称数组转换为以 '|' 分隔的字符串
        $product_ids_str = implode( '|', $product_ids );
        $product_names_str = implode( '|', $product_names );

        ?>   
        <script id="wc-checkout-custom-tracking" 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 esc_js( $product_ids_str ); ?>', // 商品ID列表，以 '|' 分隔
            gname : '<?php echo esc_js( $product_names_str ); ?>', // 商品名称列表，以 '|' 分隔
            unit : ' ', // 联盟营销公司提供的固定值或空值
            odate : '<?php echo $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-received是一个查询变量，仅在感谢页面存在。
• $order_id = absint( $wp->query_vars['order-received'] );：安全地获取订单ID。
• $order = wc_get_order( $order_id );：使用WooCommerce提供的函数获取完整的WC_Order对象，通过这个对象我们可以访问订单的所有属性和方法。
• $order->get_order_number();：获取订单的显示编号。
• $order->get_total();：获取订单的总金额。
• $order->get_date_created()->format('Y-m-d H:i:s');：获取订单创建日期和时间，并格式化为指定字符串。
• 处理多个商品： 订单可能包含多个商品。为了将所有商品的ID和名称传递给JavaScript，我们遍历$order->get_items()获取所有商品项，然后将它们的ID和名称分别存入数组。最后，使用implode('|', ...)将数组元素连接成一个以|分隔的字符串。
• esc_js()：这是一个WordPress函数，用于转义字符串，使其在JavaScript中安全使用，防止XSS攻击或JavaScript语法错误。
• JavaScript部分： PHP代码在服务器端执行，动态生成JavaScript代码。oeyaPostParam对象中的值被PHP变量替换。
• 外部脚本加载： (function(){...})() 是一种立即执行函数表达式（IIFE），用于创建独立的作用域，避免变量污染。它动态创建并插入外部跟踪脚本。

注意事项与最佳实践

1. 使用Code Snippets插件： 强烈建议使用“Code Snippets”或类似插件来添加上述PHP代码，而不是直接修改主题的functions.php。这样做可以避免在主题更新时丢失代码，并且更容易管理和禁用自定义代码。
2. 安全性： 在将PHP变量输出到JavaScript时，始终使用esc_js()或json_encode()等函数进行适当的转义，以防止跨站脚本（XSS）攻击。
3. 调试： 如果数据未正确传输，请检查以下几点：
   • 浏览器开发者工具： 在感谢页面上打开浏览器的开发者工具（通常是F12），检查“网络”选项卡，确认外部跟踪脚本是否已加载。在“控制台”选项卡中，查看是否有JavaScript错误。
   • 页面源代码： 查看感谢页面的页面源代码（右键 -> 查看页面源代码），搜索oeyaPostParam，确认PHP变量是否已被正确替换为订单详情。
   • 服务器错误日志： 检查您的Web服务器错误日志，看是否有PHP错误阻止了代码的执行。
4. 外部脚本的兼容性： 确保联盟营销公司提供的外部JavaScript跟踪脚本（https://www.conn.tw/track/oeya_jss2s_v1.0.js）与您传递的oeyaPostParam对象结构兼容。
5. 钩子选择： wp_footer通常是首选，但如果外部脚本要求在页面头部加载（例如，为了尽早开始跟踪），则可以使用wp_head钩子。

总结

通过利用WordPress的动作钩子和WooCommerce提供的API，我们可以安全、高效地在感谢页面上获取订单详情，并将其动态注入到JavaScript跟踪脚本中。这种方法不仅保证了数据的准确性，也遵循了WordPress的最佳实践，使得代码更易于维护和扩展。正确实施后，您将能够成功地将WooCommerce订单数据传输到联盟营销或其他外部系统中。

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