自定义WooCommerce datepicker检出字段已保存并显示在订单和电子邮件中 第1部分 第2部分

如何解决自定义WooCommerce datepicker检出字段已保存并显示在订单和电子邮件中 第1部分 第2部分

我在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文件中。经过测试，可以正常工作。