Поле динамического выбора, основанное на выбранной дате выбора даты в Woocommerce

Question

Это сообщение является продолжением другого вопроса:
Параметры динамического выбора поля на основе выбранного дня в кассе Woocommerce

Итак, с помощью этого ответа мне удалось построить динамическое поле выбора на странице оформления заказа, в котором были изменены параметры, основанные на выбранной дате из DatePicker. Это решение отлично работает на авторском тестовом сервере…

Однако на моем сайте код создает некоторые проблемы, если дата пикета указана в мае или октябре . На самом деле кажется, что это не работает вообще.

Это были и остаются основные требования:

Если выбран пн-пт, самовывоз («время доставки») каждые 30 минут с 10:00 до 18: 00

Если выбрано Sat-Sun , доставка («время доставки») каждые 30 минут с 10:00 до 15: 00

Доступны только первые воскресенья месяца . Другие воскресенья, вариантов нет. (новое требование добавлено в апреле и работает)

Может ли это иметь какое-либо отношение к моей установке? Я также попытался отключить все плагины и деактивированный локализатор для Datepicker.

Ниже приведен код для динамического выбора:

/**
 * 
 * 2018-04-16
 * Picking date and time
 * Dynamic select based on selected day 
 * 
 */

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

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

    echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
    echo '<div id="date-time-wrapper">';

    woocommerce_form_field('delivery_date', array(
        'type' => 'text',
        'class'=> array('delivery-date-class form-row-first'),
        'label' => __('Vælg dato for afhentning'),
        'required' => true,
        //'placeholder' => __('Pick a date')
    ), $checkout->get_value('delivery_date') );

    $options = array('' => __('Afhentning kl.') );

    woocommerce_form_field( 'delivery_time', array(
        'type'          => 'select',
        'class'         => array('delivery-time-class form-row-last'),
        'label'         => __('Vælg tidspunkt for afhentning'),
        'required'      => true,
        'options'       => $options,
    ),  $checkout->get_value( 'delivery_time' ) );

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

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

    );

        // The third part of options array
    $options3 = array(
        'Sundays_Closed' => __( 'Åbent første søndag i måneden'),
    );

    // 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); ?>,
            e = <?php echo json_encode($options3); ?>,  
            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

        //Only open first Sunday in month
        if( c.getDay() == 0 && c.getDate() > 7 ){
            dynamicSelectOptions( e );
        }

        else if( c.getDay() == 6 || c.getDay() == 0){
            dynamicSelectOptions( b );
        }

        else
        dynamicSelectOptions( a );

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

        // Datepicker
        $('#delivery_date').datepicker({
            dateFormat: 'd MM, y',
            minDate:1,
            maxDate:new Date(2018, 12),
            onSelect: function(){
                // Live event: On selected date event
                var d = new Date($(this).val());

            //Only first Sunday in month open   
            if( d.getDay() == 0 && d.getDate() > 7 ){ 
                dynamicSelectOptions( e );
            }

            else if( d.getDay() == 6 || d.getDay() == 0){
                dynamicSelectOptions( b );
            }

            else
            dynamicSelectOptions( a );
        }
        }).parent().after('<div id="order-desc"></div>');
    });
    </script>
    <?php
}

Answer 1

Я внес небольшие изменения в ваш код:

• Я переместил скрипт jQuery в нижний колонтитул (так как это лучший способ для jQuery).
• Я включил все ваши опции выбора (все разные массивы) в отдельную служебную функцию.

Но я не уверен, что он будет работать на вашей конфигурации сервера ... Я надеюсь, что это решит проблему (которой у меня нет на обоих тестовых серверах).

Ваш код пересмотрен код:

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

// Utility function (with all option arrays)
function select_options( $type = '' ){
    $options = array('' => __('Afhentning kl.') ); // Default start
    $options1 = array( // Restricted options array
        '10:00' => __( '10:00' ), '10:30' => __( '10:30' ), '11:00' => __( '11:00' ),
        '11:30' => __( '11:30' ), '12:00' => __( '12:00' ), '12:30' => __( '12:30' ),
        '13:00' => __( '13:00' ), '13:30' => __( '13:30' ), '14:00' => __( '14:00' ),
        '14:30' => __( '14:30' ), '15:00' => __( '15:00' ),
    );
    $options2 = array( // complementary options array
        '15:30' => __( '15:30' ), '16:00' => __( '16:00' ), '16:30' => __( '16:30' ),
        '17:00' => __( '17:00' ), '17:30' => __( '17:30' ),'18:00' => __( '18:00' ),
    );

    if( $type == 'partial' ){
        return array_merge($options, $options1); // Partial;
    } elseif ( $type == 'full' ){
        return array_merge($options,$options1,$options2); // Full
    } elseif ( $type == 'close' ){
        return array( 'Sundays_Closed' => __( 'Åbent første søndag i måneden') ); // Sundays closed
    } else {
        return $options; // Default (start)
    }
}

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

    echo '<h3>' . __('Hvornår vil du hente din ordre?') . '</h3>';
    echo '<div id="date-time-wrapper">';

    woocommerce_form_field('delivery_date', array(
        'type' => 'text',
        'class'=> array('delivery-date-class form-row-first'),
        'label' => __('Vælg dato for afhentning'),
        'required' => true,
        //'placeholder' => __('Pick a date')
    ), $checkout->get_value('delivery_date') );

    $options = select_options();

    woocommerce_form_field( 'delivery_time', array(
        'type'          => 'select',
        'class'         => array('delivery-time-class form-row-last'),
        'label'         => __('Vælg tidspunkt for afhentning'),
        'required'      => true,
        'options'       => $options,
    ),  $checkout->get_value( 'delivery_time' ) );

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

add_action( 'wp_footer', 'date_picker_js_script' );
function date_picker_js_script() {
    // Only on checkout page
    if( ! is_checkout() ) return;
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = <?php echo json_encode(select_options('full')); ?>,
            b = <?php echo json_encode(select_options('partial')); ?>,
            e = <?php echo json_encode(select_options('close')); ?>,
            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);
        }

        // ===> Just for testing - To be removed
        console.log('Day: '+c.getDay()+' | Date: '+c.getDate());

        // 1. Once DOM is loaded
        if( c.getDay() == 0 && c.getDate() > 7 ){ // Only open first Sunday in month
            dynamicSelectOptions( e );
        }  else if( c.getDay() == 6 || c.getDay() == 0){ // Weekends
            dynamicSelectOptions( b );
        } else { // all others days
            dynamicSelectOptions( a );
        }

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

        // Datepicker
        $('#delivery_date').datepicker({
            dateFormat: 'd MM, y',
            minDate:1,
            maxDate:new Date(2018, 12),
            onSelect: function(){
                // On live calendar event: On selected date event
                var d = new Date($(this).val());

                // ===> Just for testing - To be removed
                console.log('Day: '+d.getDay()+' | Date: '+d.getDate());

                if( d.getDay() == 0 && d.getDate() > 7 ) { // Only first Sunday in month open
                    dynamicSelectOptions( e );
                } else if( d.getDay() == 6 || d.getDay() == 0) { // Weekends
                    dynamicSelectOptions( b );
                } else { // all others days
                    dynamicSelectOptions( a );
                }
            }
        }).parent().after('<div id="order-desc"></div>');
    });
    </script>
    <?php
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы).

Я протестировал ваш код на 2 разных тестовых серверах с WooCommerce 3.2.x и 3.3.x, и он работает (проверял это на разных браузерах и платформах).

Эта проблема может быть связана с вашей темой, некоторыми подключаемыми модулями или другими настройками, выполненными вами.