wordpress 在WooCommerce中嵌入JavaScript代码感谢您页面与订单详细信息

mbjcgjjk  于 2023-06-21  发布在  WordPress
关注(0)|答案(2)|浏览(116)

我正在与一家联盟营销公司合作,需要在下订单时将订单信息发送到他们的系统。尽管我努力使用关键字搜索文章,如“WooCommerce谢谢你页面订单详细信息JavaScript”,我一直没有成功检索到订单信息。
下面是对方提供的代码:

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

空格表示不需要填写或只需要填写固定值。
我使用了代码段并添加了以下代码:
代码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
}

和代码的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>

但是没有用。您可能会发现,在测试订单的“感谢”页面上未收到这些值。
https://www.zmoji.com.tw/checkout/thankyou/1098/?key=wc_order_JyTChsw3eAXvn
我应该做哪些调整才能正确地将订单信息传输到JavaScript?
谢谢大家。

qij5mzcb

qij5mzcb1#

首先,你的代码中有一些错误和遗漏。
现在,要填充JavaScript变量并嵌入代码,您可以简单地使用WordPress可用的操作钩子之一:

  • wp_head钩子,将你的JavaScript代码添加到头部(就在<body>之前的<head>
  • wp_footer钩子,将在内容的末尾,在<footer>之后添加JavaScript。

下面是使用wp_footer钩子嵌入代码的方法:

add_action( 'wp_footer', 'embeded_marketing_script', 5 );
function embeded_marketing_script() {
    global $wp;

    if ( isset($wp->query_vars['order-received']) ) :
    
    $order_id    = absint($wp->query_vars['order-received']); // The order ID
    $order       = wc_get_order( $order_id ); // The WC_Order object
    $order_items = $order->get_items(); // The Order items (array of WC_Order_Item_Product objects)
    $first_item  = reset($order_items); // The first order item (WC_Order_Item_Product object)
    
    ?>   
    <script id="wc-checkout-custom" 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 $first_item->get_product_id(); ?>', 
        gname : '<?php echo $first_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>
    <?php endif;
}

您可以使用代码段添加此内容(无需使用Elementor简码widget)。现在它应该工作。
请注意,WooCommerce订单可以有多个订单项,因此在提供的代码中,我使用第一个订单项。
相关:在WooCommerce 3中获取订单项目和WC_Order_Item_Product

添加

要将所有订单项产品ID和产品名称作为一个单独的值字符串列出,您将使用以下 *(此处的分隔符为 * |

$order_items = $order->get_items(); // Get Order items (array of WC_Order_Item_Product objects)

$product_ids = $product_names = array(); // initializing some variables

// Loop through order items
foreach ( $order_items as $order_item ){
    $product_ids[]   = $order_item->get_product_id();
    $product_names[] = $order_item->get_name();
}

// Converting array to a string of values separated by "|"
$product_ids = implode('|', $product_ids);
$product_names = implode('|', $product_names);

所以在你的函数中,这将像:

add_action( 'wp_footer', 'embeded_marketing_script', 5 );
function embeded_marketing_script() {
    global $wp;

    if ( isset($wp->query_vars['order-received']) ) :
    
    $order_id    = absint($wp->query_vars['order-received']); // The order ID
    $order       = wc_get_order( $order_id ); // The WC_Order object
    $order_items = $order->get_items(); // Get Order items (array of WC_Order_Item_Product objects)

    $product_ids = $product_names = array(); // initializing some variables

    // Loop through order items
    foreach ( $order_items as $order_item ){
        $product_ids[]   = $order_item->get_product_id();
        $product_names[] = $order_item->get_name();
    }
    
    // Converting array to a string of values separated by "|"
    $product_ids = implode('|', $product_ids);
    $product_names = implode('|', $product_names);
    
    ?>   
    <script id="wc-checkout-custom" 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 $product_ids; // String of product ids ?>', 
        gname : '<?php echo $product_names; // String of product names ?>',
        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>
    <?php endif;
}
vsaztqbk

vsaztqbk2#

为什么要使用代码片段插件和elementor的简码放置,更好的方法是直接覆盖和编辑thankyou页面模板。
1.下载wp-content/plugins/woocommerce/templates/checkout/thankyou.php文件
1.把你的JavaScript代码放到thankyou.php文件中。由于$order已经可以在文件中访问,因此不需要额外的PHP代码片段
1.将此文件放在wp-content/themes/your_theme_name/woocommerce/thankyou.php中的子主题或主主题文件夹中以覆盖模板

相关问题