在 Woocommerce 3 中通过 ajax 提交并在结帐时创建订单

Posted

技术标签:

【中文标题】在 Woocommerce 3 中通过 ajax 提交并在结帐时创建订单【英文标题】:Submit and create an order on checkout via ajax in Woocommerce 3 【发布时间】:2019-08-20 18:44:35 【问题描述】:

我在结帐表单中添加了一个按钮:

<input type="submit" id="ajax-order-btn" class="button" value="Place Order via AJAX" />

并在functions.php 文件中添加了一个 AJAX sn-p:

add_action('wp_head', 'ajax_call_place_order');
function ajax_call_place_order() 
    ?>
    <script type="text/javascript" >
        jQuery(document).ready(function($) 
            $(document).on("click", "#ajax-order-btn" ,function(e) 
                e.preventDefault();

                var data = 
                    action: 'ajax_order',
                ;

                $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data);
            );
        );
    </script>
    <?php

这是以编程方式创建订单的 AJAX 回调:

add_action('wp_ajax_ajax_order', 'ajax_order_callback_wp');
add_action( 'wp_ajax_nopriv_ajax_order', 'ajax_order_callback_wp' );
function ajax_order_callback_wp() 

    $address = array(
        'first_name' => 'John',
        'last_name'  => 'Doe',
        'company'    => 'Speed Society',
        'email'      => 'joe@testing.com',
        'phone'      => '760-555-1212',
        'address_1'  => '123 Main st.',
        'address_2'  => '104',
        'city'       => 'San Diego',
        'state'      => 'Ca',
        'postcode'   => '92121',
        'country'    => 'US'
    );


    $order = wc_create_order();

    $order->add_product( get_product('275962'), 1); // This is an existing SIMPLE product
    $order->set_address( $address, 'billing' );
    $order->calculate_totals();
    $order->update_status("Completed", 'Imported order', TRUE);

问题是我找不到获取当前订单数据的方法,并在以编程方式创建订单时使用该数据而不是当前硬编码数据。我需要在结帐页面下与当前订单完全相同的订单。

我正在尝试使用WC_Checkout,以及方法create_order()get_checkout_fields(),但没有成功。

【问题讨论】:

【参考方案1】:

让您的 JS 函数也发布结帐字段数据并从 $_POST 捕获数据

 jQuery(document).ready(function($) 
        $(document).on("click", "#ajax-order-btn" ,function(e) 
            e.preventDefault();
            var post_data: $( 'form.checkout' ).serialize()
            var data = 
                action: 'ajax_order',
                post_data : post_data
            ;

            $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data);
        );
    );

【讨论】:

感谢您的快速回答。我不确定我是否正确理解了您的答案,但我认为这不是一个解决方案,因为客户可能会添加新字段或编辑当前字段名称,而且我还需要产品和变体以及其他数据。 我刚刚编辑了标题和与此相关的“问题”部分。 这不是一个解决方案,因为我不知道将来这些字段的确切名称是什么。而且它不会传递其他订单数据——产品、变化、价格......【参考方案2】:

对于 PHP 订单创建,我使用来自 WC_Checkout create_order() 方法的自定义克隆,该方法完美运行。所有提交的数据都会自动按顺序设置。

对于自定义订单元数据和自定义订单商品元数据,您可以使用所有 woocommerce 默认挂钩为:

woocommerce_checkout_create_order woocommerce_checkout_update_order_meta woocommerce_checkout_create_order_line_item 等等……

我还对 jQuery 代码进行了一些必要的更改以使其正常工作,通过 Ajax*(现在位于页脚)* 将必要的格式化数据发送到 PHP。

通过 Ajax 创建订单的完整代码:

add_action('wp_footer', 'checkout_billing_email_js_ajax' );
function checkout_billing_email_js_ajax() 
    // Only on Checkout
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery(function($)
        if (typeof wc_checkout_params === 'undefined') 
            return false;

        $(document.body).on("click", "#ajax-order-btn" ,function(evt) 
            evt.preventDefault();

            $.ajax(
                type:    'POST',
                url: wc_checkout_params.ajax_url,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                enctype: 'multipart/form-data',
                data: 
                    'action': 'ajax_order',
                    'fields': $('form.checkout').serializeArray(),
                    'user_id': <?php echo get_current_user_id(); ?>,
                ,
                success: function (result) 
                    console.log(result); // For testing (to be removed)
                ,
                error:   function(error) 
                    console.log(error); // For testing (to be removed)
                
            );
        );
    );
    </script>
    <?php
    endif;


add_action('wp_ajax_ajax_order', 'submited_ajax_order_data');
add_action( 'wp_ajax_nopriv_ajax_order', 'submited_ajax_order_data' );
function submited_ajax_order_data() 
    if( isset($_POST['fields']) && ! empty($_POST['fields']) ) 

        $order    = new WC_Order();
        $cart     = WC()->cart;
        $checkout = WC()->checkout;
        $data     = [];

        // Loop through posted data array transmitted via jQuery
        foreach( $_POST['fields'] as $values )
            // Set each key / value pairs in an array
            $data[$values['name']] = $values['value'];
        

        $cart_hash          = md5( json_encode( wc_clean( $cart->get_cart_for_session() ) ) . $cart->total );
        $available_gateways = WC()->payment_gateways->get_available_payment_gateways();

        // Loop through the data array
        foreach ( $data as $key => $value ) 
            // Use WC_Order setter methods if they exist
            if ( is_callable( array( $order, "set_$key" ) ) ) 
                $order->"set_$key"( $value );

            // Store custom fields prefixed with wither shipping_ or billing_
             elseif ( ( 0 === stripos( $key, 'billing_' ) || 0 === stripos( $key, 'shipping_' ) )
                && ! in_array( $key, array( 'shipping_method', 'shipping_total', 'shipping_tax' ) ) ) 
                $order->update_meta_data( '_' . $key, $value );
            
        

        $order->set_created_via( 'checkout' );
        $order->set_cart_hash( $cart_hash );
        $order->set_customer_id( apply_filters( 'woocommerce_checkout_customer_id', isset($_POST['user_id']) ? $_POST['user_id'] : '' ) );
        $order->set_currency( get_woocommerce_currency() );
        $order->set_prices_include_tax( 'yes' === get_option( 'woocommerce_prices_include_tax' ) );
        $order->set_customer_ip_address( WC_Geolocation::get_ip_address() );
        $order->set_customer_user_agent( wc_get_user_agent() );
        $order->set_customer_note( isset( $data['order_comments'] ) ? $data['order_comments'] : '' );
        $order->set_payment_method( isset( $available_gateways[ $data['payment_method'] ] ) ? $available_gateways[ $data['payment_method'] ]  : $data['payment_method'] );
        $order->set_shipping_total( $cart->get_shipping_total() );
        $order->set_discount_total( $cart->get_discount_total() );
        $order->set_discount_tax( $cart->get_discount_tax() );
        $order->set_cart_tax( $cart->get_cart_contents_tax() + $cart->get_fee_tax() );
        $order->set_shipping_tax( $cart->get_shipping_tax() );
        $order->set_total( $cart->get_total( 'edit' ) );

        $checkout->create_order_line_items( $order, $cart );
        $checkout->create_order_fee_lines( $order, $cart );
        $checkout->create_order_shipping_lines( $order, WC()->session->get( 'chosen_shipping_methods' ), WC()->shipping->get_packages() );
        $checkout->create_order_tax_lines( $order, $cart );
        $checkout->create_order_coupon_lines( $order, $cart );

        /**
         * Action hook to adjust order before save.
         * @since 3.0.0
         */
        do_action( 'woocommerce_checkout_create_order', $order, $data );

        // Save the order.
        $order_id = $order->save();

        do_action( 'woocommerce_checkout_update_order_meta', $order_id, $data );

        echo 'New order created with order ID: #'.$order_id.'.' ;
    
    die();

代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。

【讨论】:

以上是关于在 Woocommerce 3 中通过 ajax 提交并在结帐时创建订单的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 javascript 在 woocommerce 中通过 Api Rest 添加到购物车?

如何使用正确的字符编码在 jQueryMobile 1.3.1 中通过 AJAX 加载 ISO-8859-1 内容?

在 Laravel 中通过 ajax 加载更雄辩的 hasMany 关系查询?

如何在引导程序中通过ajax调用显示数据表中的数据

Struts2中通过Ajax传递json数据

Ajax在Struts2中通过jquery调用