Динамическая Кнопка «Список Желаний» в WordPress: AJAX Логика и Управление User Meta (Часть 2)

В первой части мы заложили архитектурную основу для функции «Список Желаний» (Wishlist), научившись сохранять ID объектов в User Meta текущего пользователя. Однако отличный функционал требует и безупречного пользовательского опыта. В этой статье мы сосредоточимся на фронтенде: как сделать кнопку динамической, обеспечить мгновенное добавление через AJAX и мгновенно обновить интерфейс без перезагрузки страницы.

1. Контроль состояния: Добавлен или Нет?

Главная задача на фронтенде — показать пользователю актуальное состояние: должна ли кнопка предлагать добавить объект, или объект уже находится в его списке желаний?

Интеграция PHP-проверки в шаблон

Эта логика должна быть реализована внутри цикла WordPress (например, в файле content-property.php), который выводит карточки объектов:

1. Получение ID: В начале цикла получаем ID текущего объекта (get_the_ID()) и ID авторизованного пользователя (get_current_user_id()).
2. Вызов метода: Создаем экземпляр нашего класса Property_Wishlist и вызываем метод is_property_in_wishlist($user_id, $property_id).
3. Условный вывод: Используя оператор if, мы проверяем результат.
   • Если метод возвращает true (объект добавлен), выводим простой статус, например, <span class="added-status">Уже в списке</span>.
   • Если false, выводим активную кнопку «Добавить в Список Желаний» вместе с формой для AJAX-запроса.

Таким образом, мы гарантируем, что при первом отображении страницы статус объекта для каждого пользователя будет корректным.

2. Формирование HTML для AJAX-запроса

Для надежной передачи данных в наш PHP-метод через AJAX мы используем стандартную HTML-форму с методом POST.

Структура формы и скрытые поля

Кнопка «Добавить в Wishlist» должна инициировать отправку формы. Сама форма должна быть скрыта и содержать все необходимые для сервера данные:

1. Action URL: Атрибут action формы должен указывать на центральный обработчик AJAX в WordPress: <?php echo admin_url('admin-ajax.php'); ?>.
2. Скрытые поля (Hidden Fields): Это ключевой элемент, передающий нужную информацию:
   • name="user_id" и value="...": ID пользователя, полученный через get_current_user_id().
   • name="property_id" и value="...": ID объекта, полученный через get_the_ID().
   • name="action" и value="ali_property_add": Название PHP-хука, который должен обработать запрос.

<form method="POST" action="[admin-ajax.php URL]" id="ali-property-wishlist-form-[ID]">
    <input type="hidden" name="user_id" value="[USER_ID]">
    <input type="hidden" name="property_id" value="[PROPERTY_ID]">
    <input type="hidden" name="action" value="ali_property_add">
    <a href="#" class="add-to-wishlist-button">Добавить в Wishlist</a>
</form>

3. jQuery: Запуск механизма и обновление UI

Финальный и самый динамичный этап — написание JavaScript-логики, которая перехватит клик и выполнит AJAX-запрос.

Подключение jQuery Form Plugin

Для эффективной работы с формой рекомендуется использовать плагин jQuery Form, который уже встроен в WordPress (его можно подключить через wp_enqueue_script('jquery-form')). Этот плагин позволяет одной командой ajaxSubmit() отправить всю форму целиком, включая все скрытые поля, что упрощает код.

AJAX-обработчик

Логика в scripts.js должна выглядеть следующим образом:

1. Перехват клика: Назначаем обработчик на клик по нашей кнопке (или, что надежнее, на событие submit формы).
2. event.preventDefault(): Отменяем стандартное действие браузера (перезагрузку страницы), чтобы запрос выполнился асинхронно.
3. Отправка: Используем $(this).ajaxSubmit(...) для отправки формы.
4. Обработка успеха (success): После получения ответа от сервера (который возвращает код успеха, например, 3), выполняем следующие действия на фронтенде:
   • Скрываем элемент, который запустил процесс (кнопку/форму).
   • Находим заранее подготовленный скрытый элемент статуса (.added-status) и делаем его видимым, подтверждая, что объект успешно добавлен в Wishlist.

Такой подход обеспечивает мгновенный отклик: пользователь нажимает кнопку, она исчезает, а на ее месте появляется подтверждение – все это происходит за доли секунды, даря ощущение скорости и надежности.

Что дальше?

С логикой сохранения данных в User Meta и динамическим AJAX-добавлением мы справились. Теперь, когда объекты успешно сохраняются, нам необходима страница, где пользователь сможет увидеть свой полный список желаний и, самое главное, удалить объекты из него.

В следующей части мы рассмотрим создание специального шаблона (Template) для Wishlist и разработаем функцию AJAX-удаления.

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.