Создание плагина Добавление в Избранное. Урок 4

От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». По задумке клик пользователя по ссылке Добавить в Избранное должен обрабатываться плагином без перезагрузки страницы, т.е. асинхронно – с использованием AJAX’a. Соответственно, в этом уроке мы познакомимся с нюансами работы с AJAX’ом в WordPress.

Итак, для работы с запросами AJAX WordPress предлагает 2 хука: wp_ajax_{action} и wp_ajax_nopriv_{action}. В качестве {action} выступает динамическая часть хука, которая свяжет хук с запросом. Поскольку асинхронных запросов может быть сколь угодно много, то мы должны точно знать, какой запрос в какую функцию нужно перенаправить. Вот за это как раз и отвечает динамическая часть – {action}.

Что касается первой части хуков — wp_ajax_ и wp_ajax_nopriv_, — то они отвечают за работу с запросами от разных групп пользователей. Первый хук обрабатывает запросы от авторизованных пользователей, второй – от гостей. Поскольку у нас добавление в избранное предусмотрено только для авторизованных пользователей, следовательно, мы будем использовать хук wp_ajax_.

Итак, давайте для начала в файле wfm-favorites-scripts.js опишем сам запрос по клику:

jQuery(document).ready(function($) {
 
 $('.wfm-favorites-link a').click(function(e){
  $.ajax({
 type: 'POST',
 url: wfmFavorites.url, 
 data: {
 test: 'Тестовый запрос',
 action: 'wfm_test'
 },
 success: function(res){
 console.log(res);
 },
 error: function(){
 alert('Ошибка!');
 }
  });
  e.preventDefault();
 });

});

Теперь давайте прокомментируем ключевые строки запроса. Итак, в качестве параметра url мы указали свойство url объекта wfmFavorites: url: wfmFavorites.url. Этого объекта пока нет, но мы его чуть позже определим. В нем должен содержаться путь к файлу-обработчику, который находится по адресу /wp-admin/admin-ajax.php. Это стандартный файл WordPress, принимающий запросы AJAX.

Далее, в параметре data передаются на сервер некие данные, в частности, это переменная test с некой тестовой строкой и переменная action со значением wfm_test. Пока нас интересует переменная action. Это тот самый {action} в динамической части хука wp_ajax_{action}, который и свяжет запрос с необходимым хуком и функцией. Соответственно, хук будет называться wp_ajax_wfm_test.

Собственно, это пока весь запрос. Теперь пропишем в главном файле плагина — wfm-favorites.php – хук, принимающий этот запрос:

add_action( 'wp_ajax_wfm_test', 'wp_ajax_wfm_test' );

К хуку мы привязали одноименную функцию. Функцию можете назвать как угодно, я часто называю ее по названию хука. И опишем теперь функцию в файле functions.php:

function wp_ajax_wfm_test(){
 if( isset($_POST['test']) ){
  print_r($_POST);
 }
 wp_die('Запрос завершен');
}

Если мы нигде не ошиблись, то при клике по ссылке Добавить в Избранное, мы должны увидеть в консоли браузера распечатку массива POST и строку Запрос завершен. В следующем уроке мы добавим индикатор процесса запроса и немного модифицируем сам запрос.

На этом текущий урок завершен. Удачи и до новых встреч!

Комментарии Вконтакте:

Комментарии (2)

1. Тимур

   2017-05-08 в 09:04

   wp_localize_script( ‘wfm-favorites-scripts’, ‘wfmFavorites’, ['url' => admin_url('admin-ajax.php')] ); Пишет что здесь фатальная ошибка.

   Ответить
   • Андрей Кудлай

     2017-05-08 в 09:24

     Кроме этого, наверное, что-то еще пишет?.. Например, расшифровку фатальной ошибки.

     Ответить