06 Ноя
После успешной настройки бэкенда для сохранения идентификаторов объектов в User Meta и реализации динамического добавления через AJAX (о чем мы говорили в предыдущих частях), перед нами стоит задача завершить функционал «Списка Желаний» (Wishlist). Пользователь должен иметь возможность просматривать свой список избранного на отдельной странице и, что не менее важно, удалять объекты из него.
Эта статья посвящена созданию специального шаблона (template), использованию WP_Query для выборки данных из User Meta и реализации AJAX-удаления для полного контроля над списком.
1. Создание Шаблона Страницы Wishlist
Для отображения списка избранного необходимо создать отдельный шаблон страницы в вашей теме или плагине.
Шаг 1: Регистрация шаблона
Вам потребуется создать файл, например, template-wishlist.php, и в начале файла указать его название для WordPress, чтобы он был доступен в выпадающем списке при создании страницы в админке:
/*
Template Name: Wishlist Template
*/
Шаг 2: Проверка авторизации и получение данных
Поскольку список желаний привязан к конкретному пользователю, первое, что нужно сделать в шаблоне — проверить, авторизован ли посетитель.
- Проверка: Используйте функцию
is_user_logged_in()для ограничения доступа. Если пользователь не авторизован, можно вывести сообщение о необходимости входа. - Получение User Meta: Если пользователь авторизован, получите его User ID с помощью
get_current_user_id(). Затем, используя функциюget_user_meta(), извлеките все ID объектов, которые были сохранены под вашим ключом метаданных (ali_property_wishlist). Эта функция вернет массив ID постов.
if ( is_user_logged_in() ) {
$user_id = get_current_user_id();
$wishlist_items = get_user_meta( $user_id, 'ali_property_wishlist', false );
// ... дальнейшая логика ...
} else {
echo '<p>Пожалуйста, войдите, чтобы просмотреть свой список желаний.</p>';
}
2. Вывод Объектов с Помощью WP_Query
После получения массива ID объектов ($wishlist_items) необходимо создать пользовательский запрос к базе данных WordPress, чтобы получить полную информацию об этих постах (заголовки, изображения, метаданные).
Для этого используется класс WP_Query с параметром post__in.
Настройка запроса
Мы создаем новый экземпляр WP_Query, передавая ему массив аргументов ($args):
post_type: Указываем, какие типы записей мы ищем (например,property).posts_per_page: Количество выводимых записей (например,-1, чтобы вывести все).post__in: Сюда передается массив ID, полученный из User Meta ($wishlist_items).
Ключевой момент: перед выполнением запроса необходимо проверить, что массив $wishlist_items не пуст. Если он пуст, WP_Query без post__in может вернуть все посты указанного типа, что является распространенной ошибкой.
if ( ! empty( $wishlist_items ) ) {
$args = array(
'post_type' => 'property',
'posts_per_page' => -1,
'post__in' => $wishlist_items,
'orderby' => 'post__in' // Сохранить порядок добавления
);
$wishlist_query = new WP_Query( $args );
// Запуск цикла WP:
if ( $wishlist_query->have_posts() ) {
while ( $wishlist_query->have_posts() ) {
$wishlist_query->the_post();
// Подключение файла шаблона для отображения карточки объекта
get_template_part( 'template-parts/content', 'property' );
}
}
} else {
echo '<p class="empty-wishlist">Нет объектов в списке желаний.</p>';
}
wp_reset_postdata(); // Обязательный сброс после WP_Query
3. Динамическое AJAX Удаление
На странице Wishlist кнопка рядом с каждым объектом должна выполнять не добавление, а удаление из списка. И, как и в случае добавления, это должно происходить без перезагрузки страницы.
Фронтенд: Изменение ссылки и данных
Внутри шаблона для карточки объекта (content-property.php) необходимо добавить условную логику, которая определяет, какую кнопку показать. Если мы находимся на странице Wishlist (используем функцию is_page_template('template-wishlist.php')), мы выводим кнопку «Удалить»:
- Создание ссылки: Элемент удаления должен содержать User ID и Property ID, а также имя AJAX-действия (
ali_property_remove), передаваемые через атрибутыdata-. - JS-логика: В JavaScript мы перехватываем клик по кнопке удаления.
Бэкенд: AJAX-обработчик для удаления
На стороне PHP мы уже создали метод, который обрабатывает запрос на удаление. Этот метод использует функцию delete_user_meta():
// PHP-метод в классе Property_Wishlist
function remove_property_from_wishlist() {
$property_id = intval( $_POST['property_id'] );
$user_id = intval( $_POST['user_id'] );
if ( $property_id > 0 && $user_id > 0 ) {
// Удаляем конкретную запись метаданных:
delete_user_meta( $user_id, 'ali_property_wishlist', $property_id );
// В случае успеха возвращаем код (например, 'success')
echo 1;
} else {
echo 0;
}
wp_die();
}
Мгновенное обновление интерфейса (JS)
После успешного AJAX-запроса на удаление, в функции success JavaScript-обработчика мы не просто выводим сообщение, а удаляем или скрываем всю родительскую карточку объекта со страницы.
Чтобы это работало надежно, каждой карточке объекта (<article>) должен быть присвоен уникальный идентификатор, например, id="post-[POST_ID]". В JavaScript мы используем ID удаленного поста, чтобы найти его родительский элемент и удалить его из DOM:
$('.remove-from-wishlist-button').on('click', function(e) {
e.preventDefault();
const postId = $(this).data('property-id');
// ... AJAX-запрос на удаление ...
// В случае успеха:
$('#post-' + postId).fadeOut(300, function() {
$(this).remove(); // Удаляем карточку с анимацией
});
});
Это завершает реализацию Wishlist: объекты добавляются, сохраняются, выводятся на отдельной странице, и могут быть динамически удалены, обеспечивая целостный и современный пользовательский опыт.
