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

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

12.12.2019

356

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

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

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

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

<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>';	
?>

Тэги:

Поделится информацией с друзьями

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

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

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

/ /
Юр. или физ. лицо при оформлении

Юр. или физ. лицо при оформлении

Расширим функционал Woocommerce выбором при оформлении заказа: юр. или физ. лицо. Естественно данный выбор будет влиять на множество аспектов самого процесса заказа и прочих функций WC. Создание переключателя и полей Читать далее »

/
Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

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

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

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