问题描述
我在WooCommerce结帐页面上添加了一个新的自定义日期选择器字段。
我正在使用 Enabling a date-picker in Woocommerce checkout fields 。结帐页面上的所有内容都可以。
但是现在我真的不知道如何保存新的字段并将其添加到订单记录中。任何帮助表示赞赏。
解决方法
第1部分
以下内容将在结帐时显示自定义日期选择器字段,它将验证该字段并将其保存。
所选日期将显示在管理员订单,客户订单和电子邮件上
要将此日期包含在客户注释中,请使用结尾处“第2部分”中的代码。
代码:
// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts','enabling_date_picker' );
function enabling_date_picker() {
// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;
// Load the datepicker jQuery-ui plugin script
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-ui');
}
// Add custom checkout datepicker field
add_action( 'woocommerce_before_order_notes','checkout_display_datepicker_custom_field' );
function checkout_display_datepicker_custom_field( $checkout ) {
$field_id = 'my_datepicker';
echo '<div id="datepicker-wrapper">';
woocommerce_form_field( $field_id,array(
'type' => 'text','class'=> array( 'form-row-wide'),'label' => __('Choose a date'),'required' => true,// Or false
),'' );
echo '<br></div>';
// Jquery: Enable the Datepicker
?>
<script language="javascript">
jQuery( function($){
var a = '#<?php echo $field_id ?>';
$(a).datepicker({
dateFormat: 'dd-mm-yy',// ISO formatting date
});
});
</script>
<?php
}
// Field validation
add_action( 'woocommerce_after_checkout_validation','checkout_datepicker_custom_field_validation',10,2 );
function checkout_datepicker_custom_field_validation( $data,$errors ) {
$field_id = 'my_datepicker';
if ( isset($_POST[$field_id]) && empty($_POST[$field_id]) ) {
$errors->add( 'validation',__('You must choose a date on datepicker field.','woocommerce') );
}
}
// Save field
add_action( 'woocommerce_checkout_create_order','save_datepicker_custom_field_value',2 );
function save_datepicker_custom_field_value( $order,$data ){
$field_id = 'my_datepicker';
$meta_key = '_'.$field_id;
if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {
$order->update_meta_data( $meta_key,esc_attr($_POST[$field_id]) );
}
}
// Display custom field value in admin order pages
add_action( 'woocommerce_admin_order_data_after_billing_address','admin_display_date_custom_field_value',1 );
function admin_display_date_custom_field_value( $order ) {
$meta_key = '_my_datepicker';
$meta_value = $order->get_meta( $meta_key ); // Get carrier company
if( ! empty($meta_value) ) {
// Display
echo '<p><strong>' . __("Date","woocommerce") . '</strong>: ' . $meta_value . '</p>';
}
}
// Display custom field value after shipping line everywhere (orders and emails)
add_filter( 'woocommerce_get_order_item_totals','display_date_custom_field_value_on_order_item_totals',3 );
function display_date_custom_field_value_on_order_item_totals( $total_rows,$order,$tax_display ){
$field_id = 'my_datepicker';
$meta_key = '_my_datepicker';
$meta_value = $order->get_meta( $meta_key ); // Get carrier company
if( ! empty($meta_value) ) {
$new_total_rows = [];
// Loop through order total rows
foreach( $total_rows as $key => $values ) {
$new_total_rows[$key] = $values;
// Inserting the carrier company under shipping method
if( $key === 'shipping' ) {
$new_total_rows[$field_id] = array(
'label' => __("Date","woocommerce") . ':','value' => $meta_value,);
}
}
return $new_total_rows;
}
return $total_rows;
}
代码进入活动子主题(或活动主题)的functions.php文件中。经过测试,可以正常工作。
第2部分
要将此字段添加到客户订单注释中,您将改为使用以下内容:
// Register main datepicker jQuery plugin script
add_action( 'wp_enqueue_scripts',$data ){
$field_id = 'my_datepicker';
$meta_key = '_'.$field_id;
if ( isset($_POST[$field_id]) && ! empty($_POST[$field_id]) ) {
$date = esc_attr($_POST[$field_id]);
$order->update_meta_data( $meta_key,$date ); // Save date as order meta data
$note = sprintf(__("Chosen date: %s.","woocommerce"),$date );
$note = isset($data['order_comments']) && ! empty($data['order_comments']) ? $data['order_comments'] . '. ' . $note : $note;
// Save date on customer order note
$order->set_customer_note( $note );
}
}
// Display custom field value in admin order pages
add_action( 'woocommerce_admin_order_data_after_billing_address',1 );
function admin_display_date_custom_field_value( $order ) {
$meta_key = '_my_datepicker';
$meta_value = $order->get_meta( $meta_key ); // Get carrier company
if( ! empty($meta_value) ) {
// Display
echo '<p><strong>' . __("Chosen date","woocommerce") . '</strong>: ' . $meta_value . '</p>';
}
}
代码进入活动子主题(或活动主题)的functions.php文件中。经过测试,可以正常工作。