Woocommerce 3中的自定义结帐字段和送货方式ajax交互 [英] Custom checkout field and shipping methods ajax interaction in Woocommerce 3

问题描述

这个问题将使我很快就去邮寄....

在Woocommerce Checkout中，我需要在地址中添加一个Custom字段. 此额外字段用于function calculate_shipping( $package = array())

现在，很明显woocommerce/wordpress不允许访问此函数调用中的这些自定义字段.

因此解决方案将是jQuery，对吗? ..没那么快.. 每个示例都不会将值返回到woocommerce环境中.

所以在代码上，我到目前为止已经将这个兔子洞弄成了一个字段值……

//We first add the field to the checkout form
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields');

function custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_area'] = array(
         'label'     => __('Area', 'woocommerce'),
         'placeholder'   => _x('Area', 'placeholder', 'woocommerce'),
         'required'  => true,
         'class'     => array('form-row-wide' ),
         'clear'     => true,
         'priority' => 61
     );

     return $fields;
}

// we load the scripts and the ajax callback functions

add_action( 'wp_enqueue_scripts', 'so18550905_enqueue_scripts' );
add_action( 'wp_ajax_myaction', 'so18550905_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' , 'so18550905_wp_ajax_function' );

function so18550905_enqueue_scripts(){
    wp_register_script( 'ajaxHandle', plugins_url() . '/miguel-shipping/test.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'ajaxHandle' );
    wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

function so18550905_wp_ajax_function(){
  //this function should be called but it is not for some reason..
  $testingitouthere=$_POST['my_billing_area'] ;
  file_put_contents('blablablabla.txt', print_r($testingitouthere,true));
  wp_die(); 
}

JS代码:

jQuery(document).ready( function($){

    $('#billing_area').change(function () {
        var billing_area = $('#billing_area').val();
        console.log(billing_area);

    $.ajax({
        url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
        type: 'POST',
        data:{
            action: 'myaction', 
            my_billing_area: billing_area 
        },
        success: function( data ){
        //Do something with the result from server
        console.log( data );
        }
    });
    return false;
});

});

问题在于php中的函数名为

so18550905_wp_ajax_function()

永远不会被触发..我正在该函数中写入文件(在有人要求之前)仅用于测试..一旦达到这一点，我将从那里继续进行编码... jQuery也正在记录到控制台.

解决方案

尝试以下重新访问的代码是基于您提供的代码的，这些代码将通过Ajax在自定义WC_Session中添加计费区域"字段的值.

然后，您将可以使用:$value = WC()->session->get('billing_area');在连接到

代码进入您的活动子主题(活动主题)的function.php文件中.经过测试，可以正常工作.

---

相似或相关主题:

• 禁用运输方式基于Woocommerce中选择的付款方式
• 移除运费如果在WooCommerce Checkout中选中了自定义复选框

This issue is going to make me go postal pretty soon....

In Woocommerce Checkout , I needed to add a Custom field in the address. This extra field is for function calculate_shipping( $package = array())

Now Clearly woocommerce / wordpress don't allow access to these custom fields within this function call.. don't understand why but we move along..

So the solution would be jQuery right? .. not so fast .. Every single example does not return the value back into the woocommerce environment .. not one ..

So on to the code I have so far down this rabbit hole for a single field value......

//We first add the field to the checkout form
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields');

function custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_area'] = array(
         'label'     => __('Area', 'woocommerce'),
         'placeholder'   => _x('Area', 'placeholder', 'woocommerce'),
         'required'  => true,
         'class'     => array('form-row-wide' ),
         'clear'     => true,
         'priority' => 61
     );

     return $fields;
}

// we load the scripts and the ajax callback functions

add_action( 'wp_enqueue_scripts', 'so18550905_enqueue_scripts' );
add_action( 'wp_ajax_myaction', 'so18550905_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' , 'so18550905_wp_ajax_function' );

function so18550905_enqueue_scripts(){
    wp_register_script( 'ajaxHandle', plugins_url() . '/miguel-shipping/test.js', array('jquery'), '1.0', true );
    wp_enqueue_script( 'ajaxHandle' );
    wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

function so18550905_wp_ajax_function(){
  //this function should be called but it is not for some reason..
  $testingitouthere=$_POST['my_billing_area'] ;
  file_put_contents('blablablabla.txt', print_r($testingitouthere,true));
  wp_die(); 
}

The JS Code:

jQuery(document).ready( function($){

    $('#billing_area').change(function () {
        var billing_area = $('#billing_area').val();
        console.log(billing_area);

    $.ajax({
        url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
        type: 'POST',
        data:{
            action: 'myaction', 
            my_billing_area: billing_area 
        },
        success: function( data ){
        //Do something with the result from server
        console.log( data );
        }
    });
    return false;
});

});

The problem is that the function in the php called

so18550905_wp_ajax_function()

just never gets triggered.. I'm writing to file in that function (before someone asks) solely for testing only .. once I get to that point i'll carry on coding from there... The Jquery is logging to console aswell..

解决方案

Try the following revisited code is based on your provided code that will add in a custom WC_Session the value of the Billing Area field through Ajax.

Then you will be able to get the live value using: $value = WC()->session->get('billing_area'); in a custom function hooked in woocommerce_shipping_packages filter hook located in WC_Shipping method calculate_shipping() as you asked.

The code:

// Add a custom billing field
add_filter( 'woocommerce_billing_fields', 'add_custom_billing_field', 20, 1 );
function add_custom_billing_field($billing_fields) {

    $billing_fields['billing_area'] = array(
        'label'     => __('Area', 'woocommerce'),
        'placeholder'   => _x('Fill in your area', 'placeholder', 'woocommerce'),
        'required'  => true,
        'class'     => array('form-row-wide' ),
        'clear'     => true,
        'priority' => 65
    );
    return $billing_fields;
}

// The Wordpress Ajax PHP receiver
add_action( 'wp_ajax_billing_area', 'get_ajax_billing_area' );
add_action( 'wp_ajax_nopriv_billing_area', 'get_ajax_billing_area' );
function get_ajax_billing_area() {
    if ( isset($_POST['billing_area']) ){
        WC()->session->set('billing_area', esc_attr($_POST['billing_area']));
        echo $_POST['billing_area'];
    }
    die();
}

// Refreshing session shipping methods data (Mandatory)
add_action( 'woocommerce_checkout_update_order_review', 'refresh_shipping_methods', 10, 1 );
function refresh_shipping_methods( $post_data ){
    $bool = true;
    if ( WC()->session->get('billing_area' ) != '' ) $bool = false;

    // Mandatory to make it work with shipping methods
    foreach ( WC()->cart->get_shipping_packages() as $package_key => $package ){
        WC()->session->set( 'shipping_for_package_' . $package_key, $bool );
    }
    WC()->cart->calculate_shipping();
}

// The jQuery Ajax request
add_action( 'wp_footer', 'checkout_billing_area_script' );
function checkout_billing_area_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):

    // Remove "billing_area" custom WC session on load
    if( WC()->session->get('billing_area') ){
        WC()->session->__unset('billing_area');
    }
    // jQuery Ajax code below
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        var a = '#billing_area', f = 'form.checkout';

        // Ajax function
        function checkBArea( value ){
             $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'billing_area',
                    'billing_area': value,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log(result); // For testing (to be removed)
                }
            });
        }

        // On start
        if( $(a).val() != '' )
            checkBArea($(a).val());

        // On change event
        $(f).on('change', a, function() {
            checkBArea($(this).val());
        });
    });
    </script>
    <?php
    endif;
}

Code goes in function.php file of your active child theme (active theme). Tested and works.

---

Similar or related threads:

• Disable shipping method based on chosen payment method in Woocommerce
• Remove shipping cost if custom checkbox is checked in WooCommerce Checkout

这篇关于Woocommerce 3中的自定义结帐字段和送货方式ajax交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！