SMS Верификация номера при заказе WooCommerce
Итак начнем:
1. В сервисе MainSMS создаем API для, в личном кабинете в меню переходим на вкладку API и нажимаем кнопку "добавить проект".
2. Заполняем имя проекта и выбираем отправителя. (1.png) получаем вот эти данные Project key, api key
3. Далее скачиваем
открытый класс PHP для взаимодействия с API mainSMS.
4. Копируем его в папку с вашей темой в корень.
Последний шаг подготовки
в footer.php вашей темы вставляем сл. код (c яндекса подключаем jQuery и jQuery Cookie)
Код:
<script src="http://yastatic.net/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js" type="text/javascript" ></script>
Далее в файл functions.php вашей темы ставим следующий код:
Код:
function phone_num_verification () {
ob_start(); // Смешиваем заголовки
setcookie('secret_key_value'); // Устанавливаем пустую куку
?>
<p class="form-row form-row-first veri-error" style = 'display:none'>
Вы ввели не верный код поддверждения
</p><br><br>
<p class="form-row form-row-first">
<input type="button" class="button send_key" name="send_key" id="billing_first_name" placeholder="" value="Выслать код подтверждения"></p>
<div class="test"></div>
<p class="form-row form-row-first validate-required key_field" style ='display:none'>
<label for="billing_first_name" class="">Код подтверждения <abbr class="required" title="обязательно">*</abbr></label>
<input type="text" class="input-text veri_cod" name="billing_first_name" placeholder="" value="">
<input type="button" class="button check_key" name="billing_first_name" id="billing_first_name" value="Подтвердить">
</p>
<?php
}
add_action('woocommerce_checkout_after_customer_details','phone_num_verification',10 ); // выводим код после полей заказа
Далее после того что мы добавили в footer.php пишем код на jQuery (постарался все комментировать)
Код:
<script type="text/javascript">
$(function($) {
$('#order_review').hide(); // Скрываем инфу о заказе, с кнопкой отправить заказ.
$('.send_key').click(function(event) {
$('.veri-error').hide();
// получим введенный номер
var phone = $('#billing_phone').val(); // получаем номер
// Проверяем не пустой ли номер (номер должен быть в формате +79994442478)
if(phone == '') {
alert('Вы не ввели номер');
return false; // если номер не ввели ниче не делаем дальше
}
$('.key_field').delay(1000).fadeIn(500); // Если ввели показываем поле для ввода кода подтвеждения
// генерируем случайное число
var number = 1 + Math.floor(Math.random() * 78786);
// так можно установить новые кукисы или переписать значения у уже существующих:
$.cookie('secret_key_value', number);
// получить значение существующих кукисов можно так:
var key = $.cookie('secret_key_value');
$('.test').html(key); // для проверки выводим содержимое куки в див с классом test. удалите строку.
// отправляем данные AJAX в файл sms_veri.php который создадим в сл. шаге.
$.ajax({
url: '<?php echo get_template_directory_uri(); ?>/sms_veri.php',
type: 'POST',
data: {send_key: number, veri_phone:phone},
})
.done(function(data) {
$('.send_key').fadeOut(500); // если запрос выполнен скрываем кнопку выслать код
$('.key_field').delay(500).fadeIn(500); // показываем поле для введения кода с кнопкой подтверждения
});
});
$('.check_key').click(function(event) { // когда нажали кнопку подтверждения
var input_check = $('.veri_cod').val(); // получаем код из поля
var key = $.cookie('secret_key_value'); // получаем ключ из кукисов
if(input_check == key) { // проверяем совпадают ли он
$('#order_review').show(); // если да то показываем форму оформления
$('.key_field').html('Спасибо, теперь вы можете оформить заказ');
} else { // если не совпадают
$('.veri-error').show(500); // показываем сообщение об ошибке
$('.key_field').hide(); // Скрываем поле для введения кода с кнопкой подтверждения
$('.send_key').attr('value','Выслать код поддверждения повторно'); // изменяем текст на кнопке
$('.send_key').fadeIn(500); // показываем кнопку
}
});
});
</script>
Ну и последний шаг.
В папке темы, !куда мы не забыли закинуть mainsms.class.php!, создаем файл sms_veri.php со следующим содержимым
Код:
<?php
$send_key = $_POST['send_key']; // полученный случайный код из кукисов
$phone = $_POST['veri_phone']; // полученный номер телефона
// если нужно производим над ними проверки всяческие.
require_once dirname(__FILE__).'/mainsms.class.php'; // подключаем класс MainSMS из текущей папки
$api = new MainSMS('Ваш Projectkey', 'Ваш API ключ', false, false); // Устанавливаем соединение
$api->sendSMS ( $phone , 'Код подтверждения: '.$send_key , 'Ваше имя отправителя' ); // Отправляем смс
Итак резюме нашего скрипта
Пользователь попадает на страницу, не может увидеть кнопку отправить заказ.
Вводит имя, всякую шляпу, главное номер телефона в формате +790580584754 (сделайте маску если нужно)
нажимает кнопку выслать код подтверждения. Получает СМС с номером.
Вводит его в поле. При ошибке заново отправляет новый код и вводит.
Если он вводит правильно то форма для оформления заказа ему показывается.