Если у вас на сайте используются блоки ACF для вывода мероприятий, то бывает необходимо добавить возможность фильтрации этих мероприятий по дате. Например, пользователь выбирает дату в календаре, и на странице отображаются только те мероприятия, которые запланированы на эту дату. В этой статье я покажу, как реализовать такую функциональность на сайте WordPress.
Что нужно для реализации:
- Advanced Custom Fields (ACF) — для создания блоков мероприятий с датами.
- JavaScript (или jQuery) — для обработки кликов по датам календаря и отправки AJAX-запросов.
- AJAX на стороне WordPress — для фильтрации и получения мероприятий на сервере.
Шаг 1. Создание ACF полей для мероприятий
Для начала нужно создать поля в ACF, которые будут хранить информацию о мероприятиях. Это могут быть такие поля:
- Дата мероприятия (тип поля: Date Picker).
- Название мероприятия (тип поля: Text).
- Описание мероприятия (тип поля: Textarea).
Пример структуры полей ACF:
event_name— Название мероприятия.event_description— Описание мероприятия.event_date— Дата мероприятия.
Шаг 2. Вывод мероприятий на странице
Далее нужно вывести эти мероприятия на странице. Для этого добавляем стандартный цикл, который перебирает все мероприятия и выводит их данные:
<?php
$events = new WP_Query([
'post_type' => 'event', // Тип поста "Мероприятия"
'posts_per_page' => -1,
]);
if ($events->have_posts()) :
while ($events->have_posts()) : $events->the_post();
$event_name = get_field('event_name');
$event_description = get_field('event_description');
$event_date = get_field('event_date');
?>
<div class="event-block" data-date="<?php echo esc_attr($event_date); ?>">
<h3><?php echo esc_html($event_name); ?></h3>
<p><?php echo esc_html($event_description); ?></p>
<p>Дата мероприятия: <?php echo esc_html($event_date); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
Каждое мероприятие будет обернуто в блок div с атрибутом data-date, который содержит дату мероприятия.
Шаг 3. Создание календаря для выбора даты
Создайте простой календарь на JavaScript. В примере ниже будем использовать стандартный JavaScript для работы с выбором даты:
<div id="calendarDates"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let currentMonth = new Date().getMonth();
let currentYear = new Date().getFullYear();
const calendarDates = document.getElementById("calendarDates");
function renderCalendar(month, year) {
calendarDates.innerHTML = "";
let daysInMonth = new Date(year, month + 1, 0).getDate();
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement("div");
const formattedDate = `${year}-${("0" + (month + 1)).slice(-2)}-${("0" + i).slice(-2)}`;
dayElement.textContent = i;
dayElement.addEventListener("click", function() {
filterEventsByDate(formattedDate);
});
calendarDates.appendChild(dayElement);
}
}
function filterEventsByDate(selectedDate) {
jQuery.ajax({
url: ajax_object.ajax_url,
type: 'POST',
data: {
action: 'filter_by_date',
date: selectedDate
},
success: function(response) {
document.getElementById("events-container").innerHTML = response.data || '<p>Нет мероприятий на выбранную дату.</p>';
},
error: function(xhr, status, error) {
console.error('AJAX Error: ' + status + ' ' + error);
}
});
}
renderCalendar(currentMonth, currentYear);
});
</script>
Этот код создает календарь, который позволяет пользователю выбрать дату. При выборе даты срабатывает функция filterEventsByDate, которая отправляет AJAX-запрос на сервер для фильтрации мероприятий по дате.
Шаг 4. Обработка AJAX-запроса в WordPress
Теперь нужно создать обработчик для AJAX-запроса на стороне WordPress, который будет фильтровать мероприятия по выбранной дате.
Добавьте следующий код в ваш файл functions.php:
add_action('wp_ajax_filter_by_date', 'filter_events_by_date');
add_action('wp_ajax_nopriv_filter_by_date', 'filter_events_by_date');
function filter_events_by_date() {
$selected_date = $_POST['date'];
$events = new WP_Query([
'post_type' => 'event',
'meta_query' => [
[
'key' => 'event_date',
'value' => $selected_date,
'compare' => '=',
]
]
]);
if ($events->have_posts()) {
ob_start();
while ($events->have_posts()) {
$events->the_post();
$event_name = get_field('event_name');
$event_description = get_field('event_description');
$event_date = get_field('event_date');
?>
<div class="event-block">
<h3><?php echo esc_html($event_name); ?></h3>
<p><?php echo esc_html($event_description); ?></p>
<p>Дата мероприятия: <?php echo esc_html($event_date); ?></p>
</div>
<?php
}
wp_reset_postdata();
$response = ob_get_clean();
} else {
$response = '<p>Нет мероприятий на выбранную дату.</p>';
}
wp_send_json_success($response);
}
Этот код создает AJAX-обработчик, который принимает выбранную дату и ищет мероприятия с этой датой в базе данных. Если мероприятия найдены, они возвращаются в формате HTML, который обновляет блок с мероприятиями на странице.
Шаг 5. Инициализация AJAX
Не забудьте инициализировать объект AJAX в WordPress, добавив в скрипт следующую строку:
<script>
var ajax_object = {
ajax_url: "<?php echo admin_url('admin-ajax.php'); ?>"
};
</script>
Итог
Теперь у вас есть фильтрация мероприятий по дате на сайте WordPress с использованием ACF. Пользователь выбирает дату в календаре, и AJAX-запрос отправляется на сервер, чтобы получить мероприятия, соответствующие выбранной дате. Эта функциональность удобна для сайтов с календарем мероприятий, выставок, встреч и других событий.
Советы
- Если ваши мероприятия привязаны к диапазону дат (например, начало и конец мероприятия), используйте сравнение диапазонов в
meta_query. - Для улучшения пользовательского интерфейса вы можете использовать готовые библиотеки для календарей, такие как FullCalendar или Datepicker.
Теперь ваш сайт готов фильтровать мероприятия по выбранным датам и предлагать удобный и интуитивный интерфейс для пользователей!
Написать комментарий