php - 选择 WooCommerce 交付方式后选择日期和时间

Question

在选择送货方式后，我需要选择产品的送货时间和日期，并将这些字段放入 woocommerce_after_shipping_rate 中。

据我所知。客户选择送货方式，例如“ express ”。

之后，会出现两个复选框:

1. 尽快

2. 交货日期。

如果客户选择“交货日期”，则会出现一个新字段，其中包含交货日期和时间。就是这样here

根据"Enable Datepicker in a WooCommerce Checkout custom text field "答案代码，我为交货日期和时间“尽快”和“交货日期”创建了附加字段。我从here下载了DateTimePicker .

这是我的代码:

// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {

// Only on front-end and checkout page
if( is_admin() || ! is_checkout() ) return;

// Load the datetimepicker jQuery-ui plugin script
    wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
    wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array());

}

// Call datetimepicker functionality in your custom text field
add_action('woocommerce_before_order_notes', 'my_custom_checkout_field', 10, 1);

function my_custom_checkout_field( $checkout ) {

date_default_timezone_set('Europe');
$mydateoptions = array('' => __('', 'woocommerce' ));

echo '<div id="my_custom_checkout_field">
<h3>'.__('Delivery Info').'</h3>';

echo '
<script>

    jQuery(function($){
        $("#datetimepicker").datetimepicker({format:\'d.m.Y H:i\', allowTimes:[
        \'11:00\', \'11:30\', \'12:00\', \'12:30\', \'13:00\', \'13:30\', \'14:00\', \'14:30\',
        \'15:00\', \'15:30\', \'16:00\', \'16:30\', \'17:00\', \'17:30\', \'18:00\', \'18:30\',
        \'19:00\', \'19:30\', \'20:00\', \'20:30\', \'21:00\', \'21:30\', \'22:00\', \'22:30\']
        });
    });
</script>';

// Checkbox ASAP
woocommerce_form_field( 'order_delivery_asap', array(
'type'          => 'checkbox',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('As Soon As Possible'),
'checked'       => '',
'default'       => 0,
), $checkout->get_value( 'order_delivery_asap' ));


// Checkbox Delivery Date
woocommerce_form_field( 'order_delivery_date', array(
'type'          => 'checkbox',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('Delivery Date'),
'checked'       => '',
'default'       => 0,
), $checkout->get_value( 'order_delivery_date' ));

// DateTimePicker
woocommerce_form_field( 'order_pickup_date', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'id'            => 'datetimepicker',
    'required'      => false,
    'label'         => __('Select date'),
    'placeholder'   => __(''),
    'options'       => $mydateoptions
    ),$checkout->get_value( 'order_pickup_date' ));         

echo '</div>';
}

据我了解，我需要在此处包含条件逻辑，以便在选择“交付日期”复选框时，会出现一个带有 DateTimePicker 的字段。以便保存 ASAP 复选框和 DateTimePicker 的选定值。

不幸的是，我不知道如何正确地完成这一切。我将很高兴得到您的帮助!

Answer 1

添加更新 - 以下代码将:

• 根据所选的复选框显示/隐藏日期时间选择器字段...
• 处理日期字段，检查可见时不为空
• 保存所选选项和所选日期时间(如果选择了该选项)

我重新访问了您的代码，更改了字段段并添加了一些其他内容。

1) 带复选框

// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {

    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    // Load the datetimepicker jQuery-ui plugin script
    wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
    wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array('jquery'), '1.0', false );
    endif;
}

// Display custom checkout fields (+ datetime picker)
add_action('woocommerce_before_order_notes', 'display_custom_checkout_fields', 10, 1 );
function display_custom_checkout_fields( $checkout ) {
    // Define the time zone
    date_default_timezone_set('Europe/Paris'); // <== Set the time zone (http://php.net/manual/en/timezones.php)

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Delivery Info').'</h3>';

    // Hide datetimepicker container field
    echo'<style> #datetimepicker_field.off { display:none; } </style>';

    // Checkbox ASAP
    woocommerce_form_field( 'delivery_asap', array(
        'type'          => 'checkbox',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __("As Soon As Possible", "woocommerce"),
        'checked'       => '',
        'default'       => 0,
    ), '');


    // Checkbox Delivery Date
    woocommerce_form_field( 'delivery_option', array(
        'type'          => 'checkbox',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __("Choose a delivery Date", "woocommerce"),
        'checked'       => '',
        'default'       => 0,
    ), '');

    // DateTimePicker
    woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide off'),
        'id'            => 'datetimepicker',
        'required'      => false,
        'label'         => __('Select date'),
        'placeholder'   => __(''),
        'options'       => array('' => __('', 'woocommerce' ))
    ),'');

    echo '</div>';
}

// The jQuery script
add_action( 'wp_footer', 'checkout_delivery_jquery_script');
function checkout_delivery_jquery_script() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    ?>
    <script>
    jQuery(function($){
        var a = 'input[name="delivery_asap"]',
            c = 'input[name="delivery_option"]',
            d = '#datetimepicker',
            f = d+'_field';

        $(f).hide();
        $(a).prop('checked', true);

        // First checkbox
        $(a).change(function(){
            if( $(this).prop('checked') == true ){
                $(f).hide();
                $(c).prop('checked', false);
            } else {
                $(f).show();
                $(c).prop('checked', true);
            }
        });

        // Second checkbox
        $(c).change(function(){
            if( $(this).prop('checked') == true ){
                $(f).show();
                $(a).prop('checked', false);
            } else {
                $(f).hide();
                $(a).prop('checked', true);
            }
        });

        $(d).datetimepicker({
            format: 'd.m.Y H:i',
            allowTimes:[ '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30',
                '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30',
                '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30']
        });
    });
    </script>
    <?php

    endif;
}

// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_process', 'check_datetimepicker_field' );
function check_datetimepicker_field() {
    if ( isset($_POST['delivery_option']) && empty($_POST['delivery_date']) ) {
        wc_add_notice( __( 'Error: You must choose a delivery date and time', 'woocommerce' ), 'error' );
    }
}

// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_create_order', 'save_order_delivery_data', 10, 2 );
function save_order_delivery_data( $order, $data ) {
    if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] && ! empty($_POST['delivery_date']) ) {
        $order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_date'] ) );
        $order->update_meta_data( '_delivery_option', 'date' );
    } elseif( isset($_POST['delivery_asap']) && $_POST['delivery_asap'] ) {
        $order->update_meta_data( '_delivery_option', 'azap' );
    }
}

代码位于事件子主题(或事件主题)的 function.php 文件中。经过测试并有效。

<小时/>

2) 使用单选按钮添加

用单选按钮替换复选框可能会更好:

// Register main datetimepicker jQuery plugin script
add_action( 'wp_enqueue_scripts', 'enabling_date_time_picker' );
function enabling_date_time_picker() {

    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    // Load the datetimepicker jQuery-ui plugin script
    wp_enqueue_style( 'datetimepicker', get_stylesheet_directory_uri() . '/assets/css/jquery.datetimepicker.min.css', array());
    wp_enqueue_script('datetimepicker', get_stylesheet_directory_uri() . '/js/jquery.datetimepicker.full.min.js', array('jquery'), '1.0', false );
    endif;
}

// Display custom checkout fields (+ datetime picker)
add_action('woocommerce_before_order_notes', 'display_custom_checkout_fields', 10, 1 );
function display_custom_checkout_fields( $checkout ) {
    // Define the time zone
    date_default_timezone_set('Europe/Paris'); // <== Set the time zone (http://php.net/manual/en/timezones.php)

    echo '<div id="my_custom_checkout_field">
    <h3>'.__('Delivery Info').'</h3>';

    // Hide datetimepicker container field
    echo'<style> #datetimepicker_field.off { display:none; } </style>';

    // Radio buttons field: Selected option
    woocommerce_form_field( 'delivery_option', array(
        'type'      => 'radio',
        'class'     => array('my-field-class form-row-wide'),
        'options'   => array(
            'asap'  => __('As Soon As Possible'),
            'date'  => __('Select Delivery Date'),
        ),
    ), 'asap' );

    // DateTimePicker
    woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide off'),
        'id'            => 'datetimepicker',
        'required'      => false,
        'label'         => __('Select date'),
        'placeholder'   => __(''),
        'options'       => array('' => __('', 'woocommerce' ))
    ),'');

    echo '</div>';
}

// The jQuery script
add_action( 'wp_footer', 'checkout_delivery_jquery_script');
function checkout_delivery_jquery_script() {
    // Only on front-end and checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    ?>
    <script>
    jQuery(function($){
        var d = '#datetimepicker',
            f = d+'_field',
            r = 'input[name="delivery_option"]';

        $(f).hide();

        // On radio button change
        $(r).change(function(){
            if( $(this).val() == 'date' ){
                $(f).show();
            } else {
                $(f).hide();
            }
        });

        // Enable the datetime picker field
        $(d).datetimepicker({
            format: 'd.m.Y H:i',
            allowTimes:[ '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30',
                '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30',
                '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30']
        });
    });
    </script>
    <?php

    endif;
}

// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_process', 'check_datetimepicker_field' );
function check_datetimepicker_field() {
    if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] === 'date'
    && isset($_POST['delivery_date']) && empty($_POST['delivery_date']) ) {
        wc_add_notice( __( 'Error: You must choose a delivery date and time', 'woocommerce' ), 'error' );
    }
}

// Check that the delivery date is not empty when it's selected
add_action( 'woocommerce_checkout_create_order', 'save_order_delivery_data', 10, 2 );
function save_order_delivery_data( $order, $data ) {
    if ( isset($_POST['delivery_option']) && $_POST['delivery_option'] == 'date' && ! empty($_POST['delivery_date']) ) {
        $order->update_meta_data( '_delivery_datetime', sanitize_text_field( $_POST['delivery_date'] ) );
    }
    if( isset($_POST['delivery_option']) ) {
        $order->update_meta_data( '_delivery_option', esc_attr( $_POST['delivery_option'] ) );
    }
}

代码位于事件子主题(或事件主题)的 function.php 文件中。经过测试并有效。

<小时/>

获取您的配送自定义字段值

要获取交付自定义字段值，您将使用:

1) 来自 $order、WC_Order 对象(使用 WC_Data get_meta() 方法):

$delivery_option = $order->get_meta('_delivery_option');

if( $delivery_option == 'date' ) {
    $delivery_datetime = $order->get_meta('_delivery_datetime');
}

2) 来自 $order_id，订单 ID(使用 WordPress get_post_meta() 函数)

$delivery_option = get_post_meta($order_id, '_delivery_option', true);

if( $delivery_option == 'date' ) {
    $delivery_datetime = get_post_meta($order_id, '_delivery_datetime', true);
}

The following: Display custom fields values in WooCommerce order and email notification

<小时/>

相关主题: Enable Datepicker in a WooCommerce Checkout custom text field