根据Woocommerce结帐中的选定日期动态选择字段选项 [英] Dynamic select field options based on selected day in Woocommerce checkout

问题描述

我在Woocommerce结帐中添加了2个自定义字段:

I have added 2 customized fields to Woocommerce checkout:

1. 一个jQuery-ui Datepicker字段，
2. 时间的选择字段(下拉列表).

现在，我希望时间选择字段下拉选项取决于所选日期.基本上，如果选择了星期六和星期日，我希望时间间隔是有限的(仅到15:00).

Now, I would like that the time select field dropdown options to be depended on the chosen dates. Basically if Saturdays and Sundays are chosen, I want the time intervals to be limited (only until 15:00).

我尝试了许多不同的策略，但是似乎没有一个是正确的方法.

I've tried lots of different strategies, but none of them seems to be the right approach.

这是两个自定义字段:

//Datepicker 
add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_DP' );


function my_custom_checkout_field_DP($checkout)
{
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-ui', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
wp_enqueue_style('datepicker', plugins_url('/css/datepicker.css', __FILE__), '', '', false);

/*print(' <link rel="stylesheet" type="text/css" href="' . plugins_url() . '/order-delivery-date-for-woocommerce/datepicker.css">

<script type="text/javascript" src="' . plugins_url() . '/order-delivery-date-for-woocommerce/datepicker.js"></script>'
);
print('<script type="text/javascript" src="' . plugins_url() . '/order-delivery-date-for-woocommerce/initialize-datepicker.js"></script>');*/


echo '<script language="javascript">jQuery(document).ready
(function(){
jQuery("#e_deliverydate").width("150px");
var formats = ["MM d, yy","MM d, yy"];
jQuery("#e_deliverydate").val("").datepicker({dateFormat: formats[1], minDate:1});
jQuery("#e_deliverydate").parent().after("<div id=\'order-desc\'></div>");
});   </script>';

echo '<div id="my_custom_checkout_field_DP" style="width: 202%; float: left;">';

woocommerce_form_field('e_deliverydate', array(
'type' => 'text', 
'class'=> array('my-field-class form-row-first'),
'label' => __('Your Delivery Date'), 
'required' => true, 
'placeholder' => __('Pick a date')
), $checkout->get_value('e_deliverydate'));

 echo '</div>';

//Time selection field


add_action( 'woocommerce_before_order_notes', 'my_custom_checkout_field_TIME' ); 
unction my_custom_checkout_field_TIME( $checkout ) {

woocommerce_form_field( 'my_custom_field_TIME', array(
'type'          => 'select',
'class'         => array('my-field-class form-row-wide'),
'label'         => __('Your time'),
'required'      => true, 
'placeholder'   => __('Time to pick'),

'options'       => array(
'10:00'   => __( '10:00', 'wps' ),
'10:30'   => __( '10:30', 'wps' ),
'11:00'   => __( '11:00', 'wps' ),
'11:30'   => __( '11:30', 'wps' ),
'12:00'   => __( '12:00', 'wps' ),
'12:30'   => __( '12:30', 'wps' ),
'13:00'   => __( '13:00', 'wps' ),
'13:30'   => __( '13:30', 'wps' ),
'14:00'   => __( '14:00', 'wps' ),
'14:30'   => __( '14:30', 'wps' ),
'15:00'   => __( '15:00', 'wps' ),
'15:30'   => __( '15:30', 'wps' ),
'16:00'   => __( '16:00', 'wps' ),
'16:30'   => __( '16:30', 'wps' ),
'17:00'   => __( '17:00', 'wps' ),
'17:30'   => __( '17:30', 'wps' ),
'18:00'   => __( '18:00', 'wps' ),
)
), $checkout->get_value( 'my_custom_field_TIME' ));

echo '</div>';
}

感谢您的帮助.

推荐答案

下面的代码将基于check-out页面中jQuery-ui Datepicker字段中的选定日期，通过jQuery动态加载时间选择字段选项.

The code below will load dynamically the time select field options through jQuery based on the selected day in jQuery-ui Datepicker field in checkout page.

我还为选择字段(select2库的克隆)启用了selectWoo.

I have also enabled selectWoo for the select field (the clone of the select2 library).

我已将您的功能和单独的脚本合并到专用的挂钩中.

I have merged your functions and separate scripts enqueue in a dedicated hook.

您重新访问的代码:

// 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', "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css", '', '', false);
    ## wp_enqueue_style('datepicker', plugins_url('/css/datepicker.css', __FILE__), '', '', false);
}

// Datepicker field and select time field
add_action( 'woocommerce_before_order_notes', 'datepicker_custom_field' );
function datepicker_custom_field($checkout) {

    // $globalText = get_post_meta( $order_parent_id, 'e_deliverydate', true);

    echo '<div id="date-time-wrapper">';

    woocommerce_form_field('delivery_date', array(
        'type' => 'text',
        'class'=> array('delivery-date-class form-row-first'),
        'label' => __('Your Delivery Date'),
        'required' => true,
        'placeholder' => __('Pick a date')
    ), $checkout->get_value('delivery_date') );

    $options = array('' => __('Time to pick…') );

    woocommerce_form_field( 'delivery_time', array(
        'type'          => 'select',
        'class'         => array('delivery-time-class form-row-last'),
        'label'         => __('Your Delivery time'),
        'required'      => true,
        'options'       => $options,
    ),  $checkout->get_value( 'delivery_time' ) );

    // Restricted options array
    $options1 = array(
        '10:00'   => __( '10:00', 'wps' ),
        '10:30'   => __( '10:30', 'wps' ),
        '11:00'   => __( '11:00', 'wps' ),
        '11:30'   => __( '11:30', 'wps' ),
        '12:00'   => __( '12:00', 'wps' ),
        '12:30'   => __( '12:30', 'wps' ),
        '13:00'   => __( '13:00', 'wps' ),
        '13:30'   => __( '13:30', 'wps' ),
        '14:00'   => __( '14:00', 'wps' ),
        '14:30'   => __( '14:30', 'wps' ),
        '15:00'   => __( '15:00', 'wps' ),
    );

    // The other part of options array
    $options2 = array(
        '15:30'   => __( '15:30', 'wps' ),
        '16:00'   => __( '16:00', 'wps' ),
        '16:30'   => __( '16:30', 'wps' ),
        '17:00'   => __( '17:00', 'wps' ),
        '17:30'   => __( '17:30', 'wps' ),
        '18:00'   => __( '18:00', 'wps' ),
    );

    // Merging options arrays 
    $options1 = array_merge($options, $options1); // Partial
    $options  = array_merge($options1,$options2); // Full

    echo '<br clear="all"></div>';

    ?>
    <script language="javascript">
    jQuery( function($){
        var a = <?php echo json_encode($options); ?>,
            b = <?php echo json_encode($options1); ?>,
            c = new Date(),
            s = 'select#delivery_time';

        // Utility function to fill dynamically the select field options
        function dynamicSelectOptions( opt ){
            var o = '';
            $.each( opt, function( key, value ){
                o += '<option value="'+key+'">'+value+'</option>';
            });
            $(s).html(o);
        }

        // Once DOM is loaded
        if( c.getDay() == 6 || c.getDay() == 0 )
            dynamicSelectOptions( b );
        else
            dynamicSelectOptions( a );

        // Select time to selectWoo
        $(s).selectWoo();

        // Datepicker
        $('#delivery_date').datepicker({
            dateFormat: 'MM d, yy',
            minDate:1,
            onSelect: function(){
                // Live event: On selected date event
                var d = new Date($(this).val());
                if( d.getDay() == 6 || d.getDay() == 0 )
                    dynamicSelectOptions( b );
                else
                    dynamicSelectOptions( a );
            }
        }).parent().after('<div id="order-desc"></div>');
    });
    </script>
    <?php
}

代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试并有效

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

这篇关于根据Woocommerce结帐中的选定日期动态选择字段选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！