选择WooCommerce交付方式后选择日期和时间 [英] Choosing a date and time after choosing the WooCommerce delivery method

查看：122
本文介绍了选择WooCommerce交付方式后选择日期和时间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I need to make a selection of the time and date of delivery of the products, after choosing the method of delivery and place these fields in woocommerce_after_shipping_rate.

我认为。客户选择交付方式，例如Courier。

As I see it. The customer chooses the delivery method, for example, "Courier".

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

After that, two checkboxes appear:


  1. 尽快

  1. ASAP

交货日期。

如果客户选择交货日期，则会出现一个新的字段，其中包含交货日期和时间。这是关于如何这里

If the customer chooses "Delivery Date", a new field appears with the date and time of delivery. That's about how here

基于在WooCommerce Checkout自定义文本字段中启用Datepicker 应答代码，我为交付日期和时间，尽快和交付日期添加了其他字段。我从这里下载了DateTimePicker。

Based on "Enable Datepicker in a WooCommerce Checkout custom text field" answer code, I made additional fields for the date and time of delivery, "ASAP" and "Delivery Date". I downloaded DateTimePicker from here.

这是我的代码：

// 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的选定值。

As I understand it, I need to include conditional logic here so that when selecting the "Delivery Date" checkbox, a field with a DateTimePicker appears. And so that the selected values of the ASAP checkbox and DateTimePicker are saved.

不幸的是，我不知道如何正确地完成所有这些操作。
我很乐意为您提供帮助！

Unfortunately, I do not know how to do all this correctly. I will be glad for your help!

推荐答案

通过添加更新 - 以下代码将：

Update with an addition - The following code will:


  • 显示/隐藏日期时间选择器字段，具体取决于所选复选框...

  • 处理日期字段，检查可见时是否为空

  • 保存所选选项和所选日期时间（如果选择该选项）

我已经重新访问了你的代码，更改了你的字段并添加了一些额外的东西。

I have revisited your code changing your field slugs and adding some additional things.

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' );
    }
}

代码进入函数。 php 您的活动子主题（或活动主题）的文件。测试和工作。

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

2）添加带单选按钮

2) Addition with radio buttons

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

It might be better to replace the checkboxes by radio buttons:

// 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'] ) );
    }
}

代码进入函数。 php 您的活动子主题（或活动主题）的文件。测试和工作。

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

要获得交付自定义字段值，您将使用：

To get your delivery custom fields values, you will use:

1）从 $ order ， WC_Order 对象（使用 WC_Data get_meta（）方法）：

1) From $order, WC_Order Object (using WC_Data get_meta() method): 

$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（）功能）

2) From $order_id, the order ID (using WordPress get_post_meta() function)

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

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




以下内容： 在WooCommerce订单和电子邮件通知中显示自定义字段值





相关帖子： 在WooCommerce Checkout自定义文本字段中启用Datepicker

这篇关于选择WooCommerce交付方式后选择日期和时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆