WooCommerce Выбор нескольких дат: Полное руководство

Настройка селекторов дат для бронирования в WooCommerce

Настройка селекторов дат для бронирования в WooCommerce требует комбинации корректировок CSS, модификаций JavaScript и, возможно, специализированных плагинов. Система бронирования WooCommerce по умолчанию обычно отображает селектор дат над полями ввода дат, но вы можете изменить его положение и поведение с помощью пользовательского кода и стилей.

Содержание

• Структура селектора дат для бронирования в WooCommerce
• CSS-решение для постоянного отображения селектора дат
• Реализация выбора нескольких дат с помощью JavaScript
• Альтернативные плагины для расширенной функциональности селектора дат
• Пошаговое руководство по реализации

Структура селектора дат для бронирования в WooCommerce

Система бронирования WooCommerce использует определенную структуру для функциональности селектора дат. По умолчанию всплывающее окно календаря появляется над полями ввода дат, что может вызывать проблемы отображения, особенно когда пользователи выбирают конечную дату. Понимание HTML-структуры необходимо для эффективной настройки.

Стандартная реализация обычно включает:

• Поля ввода начальной и конечной дат
• Контейнер календаря, который появляется при нажатии на поле даты
• Обработчики событий JavaScript для выбора и проверки дат

Согласно документации по элементам стиля CSS календаря бронирования WooCommerce, вы можете изменить внешний вид и положение календаря через CSS, нацеливаясь на определенные имена классов и ID, используемые системой бронирования.

CSS-решение для постоянного отображения селектора дат

Чтобы сохранить селектор дат под полем начальной даты даже после выбора конечной даты, вам потребуется изменить положение и поведение отображения с помощью CSS. Вот комплексный подход:

/* Сохраняем контейнер селектора дат под полями ввода дат */
.woocommerce-bookings-date-picker {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
}

/* Корректируем положение всплывающего окна календаря */
.woocommerce-bookings-calendar {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 10px !important;
    z-index: 9999 !important;
}

/* Убеждаемся, что календарь остается видимым после выбора даты */
.woocommerce-bookings-calendar.active {
    display: block !important;
}

/* Корректировки стиля для лучшего пользовательского опыта */
.woocommerce-bookings-date-picker .ui-datepicker {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    border: 1px solid #ddd;
}

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

Решение включает:

1. Переопределение стандартного положения с помощью объявлений !important
2. Установку календаря для отображения под полями ввода с помощью top: 100%
3. Обеспечение видимости календаря с помощью соответствующих z-index и свойств отображения
4. Добавление визуальных стилей для улучшения пользовательского опыта

Реализация выбора нескольких дат с помощью JavaScript

Для реализации настоящего мульти-селектора дат, позволяющего выбирать несколько дат (а не только диапазон), вам потребуется модификация JavaScript. Вот комплексное решение:

jQuery(document).ready(function($) {
    // Храним выбранные даты
    let selectedDates = [];
    
    // Переопределяем стандартное поведение бронирования WooCommerce
    $('.woocommerce-bookings-date-picker').each(function() {
        const $datePicker = $(this);
        const $input = $datePicker.find('input');
        
        // Предотвращаем стандартное поведение селектора дат
        $input.off('click');
        
        // Пользовательское отображение календаря
        $input.click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Показываем пользовательский календарь
            showCustomCalendar($datePicker, $input);
        });
    });
    
    function showCustomCalendar($container, $input) {
        // Создаем HTML пользовательского календаря
        const calendarHtml = `
            <div class="custom-multi-date-calendar">
                <div class="calendar-header">
                    <button class="prev-month">&lt;</button>
                    <span class="current-month"></span>
                    <button class="next-month">&gt;</button>
                </div>
                <div class="calendar-grid"></div>
                <div class="selected-dates">
                    <h4>Выбранные даты:</h4>
                    <ul class="date-list"></ul>
                </div>
            </div>
        `;
        
        $container.append(calendarHtml);
        
        // Инициализируем календарь
        initializeCustomCalendar($container);
    }
    
    function initializeCustomCalendar($container) {
        const $calendar = $container.find('.custom-multi-date-calendar');
        const $grid = $calendar.find('.calendar-grid');
        const $monthDisplay = $calendar.find('.current-month');
        
        let currentDate = new Date();
        
        // Отображаем календарь
        renderCalendar(currentDate, $grid, $monthDisplay);
        
        // Обработчики событий
        $calendar.find('.prev-month').click(function() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar(currentDate, $grid, $monthDisplay);
        });
        
        $calendar.find('.next-month').click(function() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar(currentDate, $grid, $monthDisplay);
        });
        
        // Закрываем календарь при клике вне его
        $(document).click(function(e) {
            if (!$calendar.is(e.target) && $calendar.has(e.target).length === 0) {
                $calendar.remove();
            }
        });
    }
    
    function renderCalendar(date, $grid, $monthDisplay) {
        const year = date.getFullYear();
        const month = date.getMonth();
        
        $monthDisplay.text(date.toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' }));
        
        // Очищаем предыдущий календарь
        $grid.empty();
        
        // Добавляем заголовки дней
        const dayHeaders = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
        dayHeaders.forEach(day => {
            $grid.append(`<div class="day-header">${day}</div>`);
        });
        
        // Получаем первый день месяца и количество дней
        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        
        // Добавляем пустые ячейки для дней до начала месяца
        for (let i = 0; i < firstDay; i++) {
            $grid.append(`<div class="calendar-day empty"></div>`);
        }
        
        // Добавляем дни месяца
        for (let day = 1; day <= daysInMonth; day++) {
            const dateObj = new Date(year, month, day);
            const dateString = dateObj.toISOString().split('T')[0];
            const isSelected = selectedDates.includes(dateString);
            const isBooked = isDateBooked(dateObj);
            
            const dayHtml = `
                <div class="calendar-day ${isSelected ? 'selected' : ''} ${isBooked ? 'booked' : ''}" 
                     data-date="${dateString}">
                    ${day}
                </div>
            `;
            $grid.append(dayHtml);
        }
        
        // Добавляем обработчики событий для выбора даты
        $grid.find('.calendar-day:not(.empty):not(.booked)').click(function() {
            const dateStr = $(this).data('date');
            const $day = $(this);
            
            if ($day.hasClass('selected')) {
                // Удаляем из выбора
                $day.removeClass('selected');
                selectedDates = selectedDates.filter(d => d !== dateStr);
            } else {
                // Добавляем в выбор
                $day.addClass('selected');
                selectedDates.push(dateStr);
            }
            
            updateSelectedDatesList($grid);
        });
    }
    
    function updateSelectedDatesList($grid) {
        const $list = $grid.closest('.custom-multi-date-calendar').find('.date-list');
        $list.empty();
        
        selectedDates.sort().forEach(dateStr => {
            const date = new Date(dateStr);
            const dateDisplay = date.toLocaleDateString('ru-RU', { 
                weekday: 'short', 
                month: 'short', 
                day: 'numeric' 
            });
            $list.append(`<li>${dateDisplay} <span class="remove-date" data-date="${dateStr}">&times;</span></li>`);
        });
        
        // Добавляем обработчики удаления
        $list.find('.remove-date').click(function() {
            const dateStr = $(this).data('date');
            selectedDates = selectedDates.filter(d => d !== dateStr);
            $(this).parent().remove();
            
            // Обновляем отображение календаря
            $grid.find(`[data-date="${dateStr}"]`).removeClass('selected');
        });
    }
    
    function isDateBooked(date) {
        // Реализуйте вашу логику проверки, забронирована ли дата
        // Это может быть вызов API или проверка против существующих бронирований
        return false; // Заглушка реализации
    }
});

Это JavaScript-решение создает пользовательский мульти-селектор дат, который:

1. Заменяет стандартный календарь WooCommerce на пользовательскую реализацию
2. Позволяет выбор нескольких дат (а не только начальных и конечных)
3. Поддерживает постоянное отображение под полями ввода
4. Предоставляет визуальную обратную связь для выбранных дат
5. Включает управление датами с функциями добавления/удаления

Как отмечено в обсуждении на StackOverflow о выборе даты с помощью jQuery, вам необходимо правильно обрабатывать распространение событий и предотвращать конфликты с собственным JavaScript WooCommerce.

Альтернативные плагины для расширенной функциональности селектора дат

Хотя пользовательский код обеспечивает гибкость, несколько специализированных плагинов могут улучшить вашу систему бронирования WooCommerce с расширенной функциональностью селектора дат:

1. Availability Search for WooCommerce Bookings

• Предоставляет полный вид календаря для выбора диапазона дат
• Позволяет клиентам искать доступные слоты
• Доступно на Puri.io

2. WooCommerce Product Options

• Добавляет поля календаря к любому товару или вариации
• Поддерживает выбор даты и времени
• Улучшает опыт бронирования с пользовательскими полями
• Функции описаны Barn2

3. Booster for WooCommerce Bookings

• Создает системы бронирования с опциями длительности
• Обрабатывает доступность нескольких товаров
• Документация плагина доступна

4. WP Swings Bookings for WooCommerce

• Специализируется на бронировании услуг
• Включает функции регулировки длительности
• Документация предоставлена

5. Tyche Softwares Booking & Appointment Plugin

• Поддерживает несколько дат и временных слотов
• Фиксированные даты и бронирование на основе диапазона
• Руководство по настройке доступно

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

Пошаговое руководство по реализации

Вариант 1: Только CSS-решение для постоянного отображения

1. Доступ к пользовательскому CSS вашей темы или установка плагина CSS
2. Добавьте CSS-код из раздела CSS-решения выше
3. Протестируйте изменения сначала в тестовой среде
4. Откорректируйте значения положения в соответствии с вашей конкретной темой
5. Очистите кэширование для применения изменений

Примечание: Как упоминается в обсуждении поддержки Kriesi.at, в некоторых темах может потребоваться переключение настроек сжатия файлов для работы CSS-изменений.

Вариант 2: Полная реализация мульти-селектора дат

1. Создайте пользовательский JavaScript-файл в вашей теме или дочерней теме
2. Добавьте JavaScript-код из раздела решения JavaScript выше
3. Правильно подключите скрипт в functions.php вашей темы:
   php

   function enqueue_custom_booking_script() {
       wp_enqueue_script('custom-multi-date-picker', get_template_directory_uri() . '/js/custom-date-picker.js', array('jquery'), '1.0', true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_custom_booking_script');
   

4. Создайте соответствующий CSS для стилизации пользовательского календаря
5. Тщательно протестируйте с различными сценариями
6. Обработайте проверку на стороне сервера для выбранных дат

Вариант 3: Реализация с помощью плагина

1. Изучите и выберите подходящий плагин из альтернатив выше
2. Установите и активируйте выбранный плагин
3. Настройте параметры плагина в соответствии с вашими требованиями к бронированию
4. Протестируйте фронтенд-функциональность с реальными сценариями бронирования
5. Настройте стили при необходимости с помощью параметров плагина или пользовательского CSS

Тестирование и валидация

Независимо от выбранного метода, тщательное тестирование необходимо:

1. Тестируйте на разных устройствах и размерах экрана
2. Проверьте точность выбора дат для различных сценариев
3. Проверьте интеграцию с WooCommerce процессами корзины и оформления заказа
4. Проверьте логику доступности для бронирования
5. Протестируйте обработку ошибок для недопустимых выборов дат
6. Убедитесь в соответствии требованиям доступности для скринридеров

Источники

1. Документация по элементам стиля CSS календаря бронирования WooCommerce
2. StackOverflow: Мульти-селектор дат на фронтенде бронирования WooCommerce
3. Поиск доступных дат для бронирования в WooCommerce - Puri.io
4. Пример использования WooCommerce Bookings: Пользовательская доступность с диапазоном даты и времени
5. Получение выбранной даты с помощью jQuery в календаре бронирования WooCommerce
6. Поддержка Kriesi.at: Календарь отображения бронирования WooCommerce по клику
7. Codeable: Расширение плагина бронирования WooCommerce - Выпадающий список доступных дат
8. StackOverflow: Изменение селектора дат бронирования WooCommerce на временную таблицу
9. Barn2: 11 лучших плагинов для бронирования и записи WooCommerce
10. Документация по бронированию для WooCommerce от WP Swings

Заключение

Реализация мульти-селектора дат на фронтенде бронирования WooCommerce требует тщательного учета ваших конкретных потребностей и технических ресурсов. Вот основные выводы:

1. Для простых корректировок положения, модификации CSS могут решить проблему постоянного отображения селектора дат без сложной разработки.

2. Для настоящей мульти-функциональности выбора дат, пользовательская реализация JavaScript обеспечивает наибольшую гибкость, но требует solid навыков разработки и тщательного тестирования.

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

4. Всегда тщательно тестируйте на разных устройствах и в различных сценариях для обеспечения плавного пользовательского опыта.

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

Лучший подход зависит от вашего технического опыта, бюджета и конкретных требований к бронированию. Начните с CSS-решения для проблем с положением, затем оцените, необходима ли вам расширенная функциональность пользовательского мульти-селектора дат или плагина для ваших бизнес-потребностей.