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

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

Автор: Андрей Кудлай Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

Начнем с добавления анимации, которая даст понять пользователю, что его запрос обрабатывается. Этим мы достигнем сразу 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('Запрос завершен');
}

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

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