• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

SMS verification

Image CMS

Danko

Новичок
#1
Необходимо, чтоб при оформлении заказа пользователь подтверждал свой номер телефона.
Есть идеи?
 

Grollem

Опытный
#2
однозначно для этого нужно регаться на смс агрегаторе, знаю хороший mainsms.ru, точнее говоря я под него написал уже много интеграций с вп, и вуу. зарегаетесь скажу как дальше двигаться
 

Danko

Новичок
#6
однозначно для этого нужно регаться на смс агрегаторе, знаю хороший mainsms.ru, точнее говоря я под него написал уже много интеграций с вп, и вуу. зарегаетесь скажу как дальше двигаться
Зарегался, что делать дальше?
 

Grollem

Опытный
#7
Набросал решение, сейчас напишу процесс. Для понимания как это работает понадобятся знания PHP, JS.
 

Grollem

Опытный
#8
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 (сделайте маску если нужно)
нажимает кнопку выслать код подтверждения. Получает СМС с номером.
Вводит его в поле. При ошибке заново отправляет новый код и вводит.
Если он вводит правильно то форма для оформления заказа ему показывается.
 

Вложения

  • 142 KB Просмотры: 23

Amaterino

Новичок
#10
по хорошему, нужно делать лимит, а то доброжелатели поразвлекаются, а вам потом счет оплачивать от СМС гейта.
 

Fenneco

Новичок
#11
Решение отличное, но вот бы сделать так, чтобы подтвержденный номер сохранялся в ЛК и повторное подтверждение не требовалось при следующих покупках у авторизованного пользователя.