Woocommerce 3中的自定义结帐字段和运输方式ajax交互
Posted
技术标签:
【中文标题】Woocommerce 3中的自定义结帐字段和运输方式ajax交互【英文标题】:Custom checkout field and shipping methods ajax interaction in Woocommerce 3 【发布时间】:2019-03-11 03:25:42 【问题描述】:这个问题会让我很快就去邮局……
在 Woocommerce Checkout 中,我需要在地址中添加一个自定义字段。
这个额外的字段用于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 也正在登录控制台..
【问题讨论】:
【参考方案1】:尝试以下基于您提供的代码重新访问的代码,该代码将通过 Ajax 在自定义 WC_Session 中添加 Billing Area 字段的值。
然后您将能够使用:
$value = WC()->session->get('billing_area');
在自定义函数中获取实时值,该函数与您所要求的位于WC_Shipping
methodcalculate_shipping()
的woocommerce_shipping_packages
过滤器挂钩挂钩。
代码:
// 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;
代码进入您的活动子主题(活动主题)的 function.php 文件中。经过测试并且可以工作。
类似或相关主题:
Disable shipping method based on chosen payment method in Woocommerce Remove shipping cost if custom checkbox is checked in WooCommerce Checkout【讨论】:
伙计...我可以吻你..我现在很高兴,这行得通.....以上是关于Woocommerce 3中的自定义结帐字段和运输方式ajax交互的主要内容,如果未能解决你的问题,请参考以下文章
根据 Woocommerce 3 中的运输方式显示或隐藏结帐字段
根据 WooCommerce 中的自定义结帐单选按钮和文本字段设置动态费用