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

SMS verification

Danko

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

Grollem

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

Grollem

Опытный
классно, но я бы свой написал ) у меня сервис смс любимый есть
 

Danko

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

Зарегался, что делать дальше?
 

Grollem

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

Grollem

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

Вложения

  • 1.png
    1.png
    142 KB · Просмотры: 39

Amaterino

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

Fenneco

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