/ Wordpress / Опросы на сайте без плагина

Опросы на сайте без плагина

HIT

12.12.2019

1766

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно.

Как создать функционал опросов с помощью плагинов описано здесь.

Создадим форму опроса для клиентов, например отеля. Технически выглядит это в виде планшета (на подставке) на ресепшн. И при выписке гостям предлагают таким образом выразить свое мнение.

Шаблон опроса

<div class="quest-block">

	<h1 id="title">Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h1>
	
	<div class="answers">
		<div><div class="yes" value="yes">Да <i class="fas fa-thumbs-up"></i></div></div>
		<div><div class="no" value="no">Нет <i class="fas fa-thumbs-down"></i></div></div>
	</div>
	
</div>

Сам шаблон опроса должен быть минималистичным, с крупными текстом и кнопками.

Скрипт отправки

$(".answers > div > div").on("click", function (event) {
	event.preventDefault();
	var BtnValue = $(this).attr( 'value' );
	
	$.ajax({
		url: "/wp-admin/admin-ajax.php",
		method: 'post',
		data: {
			action: 'ajax_order',
			BtnValue: BtnValue
		},
		success: function (response) {
			$('.quest-block').html(response);
			setTimeout(function () {  location.reload();  }, 3000);
		}
	});
});

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

Если нужно не перезагрузить страницу, а сделать редирект на другую, используем функцию: window.location.href = «https://site.ru/»;

Обработчик формы и запись значений в базу

function ajax_form(){
	
	$page_number = 1091;
	
	if($_POST['BtnValue'] == 'yes') {
		
		$count_key = 'visit_again_yes';
		$count = get_post_meta($page_number, $count_key, true);
		if($count==''){
			add_post_meta($page_number, $count_key, '1');
		}else{
			$count++;
			update_post_meta($page_number, $count_key, $count);
		}
		
	} else {
		
		$count_key = 'visit_again_no';
		$count = get_post_meta($page_number, $count_key, true);
		if($count==''){
			add_post_meta($page_number, $count_key, '1');
		}else{
			$count++;
			update_post_meta($page_number, $count_key, $count);
		}
		
	}
	
	$response = '<p>Спасибо за ваше мнение, Ваш отзыв очень важен для нас!<br> Будем рады снова видеть Вас в отелях сети Undersun!</p>';

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );

Метаполя привязываем к какой-либо конкретной странице, чтобы легко их находить. Для каждого значения нужно заводить отдельное метаполе.

Страница результатов в админке

Создадим в админке страницу в которой можно посмотреть результаты опроса, а также кнопку (и функцию) очистки значений.

add_action('admin_menu', function(){
	add_menu_page( 'Опросы', 'Опросы', 'manage_options', 'site-options', 'add_my_setting', '', 30 ); 
} );

// функция отвечает за вывод страницы настроек
function add_my_setting(){
	?>
	<div class="wrap">
		<h2><?php echo get_admin_page_title(); ?></h2>
		
		<h3>Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h3>

		<?php 
		$page_number = 1091;
		$visit_again_yes = get_post_meta($page_number, 'visit_again_yes', true);
		$visit_again_no = get_post_meta($page_number, 'visit_again_no', true);
		
		echo 'Ответов Да: <strong>';
		if (!empty ($visit_again_yes)) { echo $visit_again_yes; } else { echo '0'; }
		echo '</strong><br>';
		
		echo 'Ответов Нет: <strong>';
		if (!empty ($visit_again_no)) { echo $visit_again_no; } else { echo '0'; }
		echo '</strong><br>';
		?>
		
		<input type="submit" class="delete_button" name="delete_visit_again" value="Очистить значения" />
		<p class="quest-block"></p>

	</div>
	
	<script>
	jQuery(".delete_button").on("click", function (event) {
		event.preventDefault();
		
		jQuery.ajax({
			url: "/wp-admin/admin-ajax.php",
			method: 'post',
			data: {
				action: 'ajax_clear',
			},
			success: function (response) {
				jQuery('.quest-block').html(response);
				setTimeout(function () {  location.reload();  }, 1000);
			}
		});
	});
	</script>
	
	<?php
}

function clear_form(){
	
	$page_number = 1091;
	
	delete_post_meta($page_number, 'visit_again_yes');
	delete_post_meta($page_number, 'visit_again_no');
	
	$response = 'Данные очищены';

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_ajax_clear', 'clear_form' );

Метод конечно не универсальный, при изменений структуры ответов нужно будет дорабатывать скрипт и обработчик. Но при этом ничего лишнего — только необходимы функционал с минимальным использованием ресурсов.

Написать функцию ежемесячной отправки (на e-mail) значений с последующим обнулением результатов.

Несколько вопросов по порядку

Немного меняем верстку

<div class="quest-block">

	<div class="quest" id="quest-1">
	
		<h1 id="title">Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h1>
		
		<div class="answers" id="visit_again">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>
	
	<div class="quest" id="quest-2" style="display: none;">
	
		<h1 id="title">Понравилась ли Вам работа персонала?</h1>
		
		<div class="answers" id="personal">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>
	
	<div class="final-quest" id="quest-3" style="display: none;">
	
		<h1 id="title">Понравился ли Вам завтрак в отеле?</h1>
		
		<div class="answers" id="breakfest">
			<div><div class="yes" value="yes">Да</div></div>
			<div><div class="no" value="no">Нет</div></div>
		</div>
		
	</div>		
	
</div>

Меняем скрипты (добавился скрипт переключения вопросов и отметки выбранного ответа):

// Скрытие текущего вопроса и показ следующего, отметить выбор
jQuery('.answers > div > div').on('click', function () {
	jQuery(this).addClass('selected');
	jQuery(this).parents('.quest').hide();
	
	jQuery(this).parents('.quest').next().show();
});


// Отправка формы (нажатием на финальную кнопку)
$(".final-quest .answers > div > div").click(function(event) {
	event.preventDefault();
	var visit_again = $('#visit_again .selected').attr( 'value' );
	var personal = $('#personal .selected').attr( 'value' );
	var breakfest = $('#breakfest .selected').attr( 'value' );
	
	$.ajax({
		url: "/wp-admin/admin-ajax.php",
		method: 'post',
		data: {
			action: 'ajax_order',
			visit_again: visit_again,
			personal: personal,
			breakfest: breakfest			
		},
		success: function (response) {
			$('.quest-block').html(response);
			setTimeout(function () {  location.reload();  }, 3000);
		}
	});
});

В функциональной части просто добавляем новые мета-поля.

Индекс NPS

Данный опрос позволяет получить индекс клиентской лояльности (NPS). Верстка данного вопроса (внедряется в структуру и стили описанные выше):

<div class="answers" id="nps">
	<div><div class="nps_one" value="nps_one">1</div></div>
	<div><div class="nps_two" value="nps_two">2</div></div>
	<div><div class="nps_three" value="nps_three">3</div></div>
	<div><div class="nps_four" value="nps_four">4</div></div>
	<div><div class="nps_five" value="nps_five">5</div></div>
	<div><div class="nps_six" value="nps_six">6</div></div>
	<div><div class="nps_seven" value="nps_seven">7</div></div>
	<div><div class="nps_eight" value="nps_eight">8</div></div>
	<div><div class="nps_nine" value="nps_nine">9</div></div>
	<div><div class="nps_ten" value="nps_ten">10</div></div>			
</div>

Стили пунктов:

#nps.answers > div {width: 10%; padding: 0 7px;}	
#nps.answers > div > div {width: 60px; padding: 7px 0; font-size: 2.4rem; border-radius: 100px;}
	
.answers > div > .nps_one {background: #F44336;}
.answers > div > .nps_two {background: #ff6b1d;}
.answers > div > .nps_three {background: #ff8928;}
.answers > div > .nps_four {background: #ffa500;}
.answers > div > .nps_five {background: #f7c600;}
.answers > div > .nps_six {background: #a5d323;}
.answers > div > .nps_seven {background: #72de1b;}
.answers > div > .nps_seight {background: #5ccf3a;}
.answers > div > .nps_nine {background: #45c14c;}

Функция получения значения поля nps

$nps_count_key = $_POST['nps'];
$nps_count = get_post_meta($page_number, $nps_count_key, true);
if($nps_count=='') { 
	add_post_meta($page_number, $nps_count_key, '1'); 
} else { 
	$nps_count++; 
	update_post_meta($page_number, $nps_count_key, $nps_count); 
}
Индекс NPS рассчитывается по формуле:
NPS = % положительных значений от общего числа (9,10) — % отрицательных значений от общего числа (1,2,3,4,5,6). 7 и 8 считаются нейтральными, но по сути они участвуют в расчетах.

Вывод результатов:

<h3>Рекомендовали бы Вы наш отель своим знакомым или коллегам?</h3>

<?php $page_number = 1091; ?>

<?php
// критики
$nps_one = get_post_meta($page_number, 'nps_one', true);
$nps_two = get_post_meta($page_number, 'nps_two', true);
$nps_three = get_post_meta($page_number, 'nps_three', true);
$nps_four = get_post_meta($page_number, 'nps_four', true);
$nps_five = get_post_meta($page_number, 'nps_five', true);
$nps_six = get_post_meta($page_number, 'nps_six', true);

// нейтралы
$nps_seven = get_post_meta($page_number, 'nps_seven', true);
$nps_eight = get_post_meta($page_number, 'nps_eight', true);	

// промоутеры
$nps_nine = get_post_meta($page_number, 'nps_nine', true);
$nps_ten = get_post_meta($page_number, 'nps_ten', true);


$total_people = $nps_one + $nps_two + $nps_three + $nps_four + $nps_five + $nps_six + $nps_seven + $nps_eight + $nps_nine + $nps_ten;
$critics = $nps_one + $nps_two + $nps_three + $nps_four + $nps_five + $nps_six;
$promoters = $nps_nine + $nps_ten;

$critics_percent = 100 * $critics / $total_people;
$promoters_percent = 100 * $promoters / $total_people;

$critics_percent_round = round($critics_percent, 2);
$promoters_percent_round = round($promoters_percent, 2);

$nps = $promoters_percent_round - $critics_percent_round;

echo 'Общее количество людей: <strong>'.$total_people.'</strong><br>';
echo 'Количество критиков: <strong>'.$critics.'</strong><br>';
echo 'Количество промоутеров: <strong>'.$promoters.'</strong><br>';
echo '<br>';

echo 'Процент критиков от общего числа: <strong>'.$critics_percent_round.' %</strong><br>';
echo 'Процент промоутеров от общего числа: <strong>'.$promoters_percent_round.' %</strong><br>';
echo '<br>';	

echo 'Индекс NPS: <strong>'.$nps.'</strong>';	
?>

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/
Фильтр по меткам (изменение основного запроса)

Фильтр по меткам (изменение основного запроса)

Реализуем фильтрацию записей по меткам путем изменения основного запроса на лету (ajax). Находим все теги записей входящих в категорию Данный код можно вставить в боковую колонку в виде виджета. <?php Читать далее »

/ /
Избранное

Избранное

Реализуем функционал Избранное. Нам надо сделать кнопку добавить в Избранное в шаблоне самой записи и в цикле вывода записей категории. И отдельная страница Избранное где выводятся избранные записи. Плагин Favorites Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Опросы на сайте без плагина Опросы на сайте без плагина
Личный кабинет Woocommerce и все что с этим связано
Рекомендации для васЛичный кабинет Woocommerce и все что с этим связаноOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.