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

От автора: в этом уроке мы продолжим создание плагина «Добавление в Избранное». В частности, мы доработаем AJAX-запрос, добавив проверку подлинности запроса, а также реализуем индикатор запроса в клиентской части сайта, добавив анимацию.

Начнем с добавления анимации, которая даст понять пользователю, что его запрос обрабатывается. Этим мы достигнем сразу 2 цели: во-первых, пользователь будет видеть, что его запрос обрабатывается, и во-вторых, это не даст нажать ему на ссылку повторно, поскольку вместо ссылки мы как раз и будем показывать анимацию.

Итак, в функции wfm_favorites_content() добавим вывод анимационной картинки рядом со ссылкой:

function wfm_favorites_content($content){
 if( !is_single() || !is_user_logged_in() ) return $content;
 $img_src = plugins_url( '/img/loader.gif', __FILE__ );
 return '<p class="wfm-favorites-link"><span class="wfm-favorites-hidden"><img src="' . $img_src . '" alt=""></span><a href="#">Добавить в Избранное</a></p>' . $content;
}

Теперь скроем эту картинку в wfm-favorites-style.css:

.wfm-favorites-hidden{
 display: none;
}

В запросе AJAX добавим опцию beforeSend, в которой опишем скрытие ссылки и показ анимации:

beforeSend: function(){
 $('.wfm-favorites-link a').fadeOut(300, function(){
  $('.wfm-favorites-hidden').fadeIn();
 });
},

Также изменим функцию в параметре success, скрывая анимацию и показывая результат запроса:

success: function(res){
 $('.wfm-favorites-hidden').fadeOut(300, function(){
  $('.wfm-favorites-link').html(res);
 });
},

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

Теперь добавим проверку безопасности к запросу. Для этого воспользуемся функцией WordPress wp_create_nonce() для генерирования проверочного кода и функцией wp_verify_nonce() для проверки кода.

В функции wfm_favorites_scripts() добавим генерирования кода, который будем использовать в параметрах запроса. Также сразу передадим ID поста, который будет добавляться в избранное — для этого обратимся к свойству ID объекта $post:

wp_localize_script( 'wfm-favorites-scripts', 'wfmFavorites', ['url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('wfm-favorites'), 'postId' => $post->ID] );

Теперь в объекте wfm-favorites доступно два новых свойства: nonce и postId. Передадим их в запросе. Итоговый вид запроса будет таким:

jQuery(document).ready(function($) {
 
 $('.wfm-favorites-link a').click(function(e){
  $.ajax({
 type: 'POST',
 url: wfmFavorites.url, 
 data: {
 security: wfmFavorites.nonce,
 action: 'wfm_test',
 postId: wfmFavorites.postId
 },
 beforeSend: function(){
 $('.wfm-favorites-link a').fadeOut(300, function(){
 $('.wfm-favorites-hidden').fadeIn();
 });
 },
 success: function(res){
 $('.wfm-favorites-hidden').fadeOut(300, function(){
 $('.wfm-favorites-link').html(res);
 });
 },
 error: function(){
 alert('Ошибка!');
 }
  });
  e.preventDefault();
 });

});

Осталось внести правки в функцию, принимающую запрос:

function wp_ajax_wfm_test(){
 if( !wp_verify_nonce( $_POST['security'], 'wfm-favorites' ) ){
  wp_die('Ошибка безопасности!');
 }
 echo $_POST['postId'];
 wp_die('Запрос завершен');
}

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

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