Войти
Войти

Маска ввода номера телефона на странице оформления заказа WooCommerce

Маска ввода номера телефона на странице оформления заказа WooCommerce

Отсутствие маски ввода в поле Телефон на странице оформления заказа чревато ошибками при его заполнении, что в свою очередь может привести к потере заказов. К счастью, реализовать маску ввода номера телефона для WooCommerce можно с помощью готового скрипта всего за несколько шагов:

Шаг 1 - Качаем отсюда архив с нужным нам скриптом jquery.maskedinput.js (скрипт находится внутри папки dist - рекомендую использовать минифицированную версию скрипта jquery.maskedinput.min.js).

Шаг 2 - Помещаем скрипт на своем сайте при помощи FTP или файлового менеджера вашего хостинга. Например, для подключаемых скриптов можно создать папку js в папке wp-content. В таком случае файл скрипта будет располагаться по адресу:

/wp-content/js/jquery.maskedinput.min.js

Шаг 3 - Вставляем приведенный ниже код в файл function.php вашей темы (или, можно воспользоваться для этого плагином Code Snippets, создав php-снипет и поместив код в него):

// Маска ввода номера телефона на странице оформления заказа
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/js/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 
function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>

<script type="text/javascript">
    jQuery( function( $ ) {
        $("#billing_phone").mask("+7(999)999-99-99");
    });
</script>

<?php
    }
}

Если вы сделали все правильно, то теперь при вводе номера телефона в соответствующее поле, вы должны наблюдать маску ввода номера:

Маска ввода номера телефона на странице оформления заказа WooCommerce
Маска ввода номера телефона на странице заказа WooCommerce

Добавляем запрет на ввод 7 и 8 в качестве первой цифры в маске ввода

Бывают случаи, когда некоторые пользователи не обращают внимания на то, что в маске уже указано начало номера телефона +7, и начинают вводить свой номер телефона с цифры 8. Конечно, это может приводить к потере клиентов.

Как же запретить вводить в маске ввода номера телефона в качестве первой цифры 7 или 8? Для этого мы немного модернизируем наш код выше, и вместо этой маски ввода:

$("#billing_phone").mask("+7(999)999-99-99");

будем использовать такой код:

$.mask.definitions['h'] = "[0|1|2|3|4|5|6|9]";
$("#billing_phone").mask("+7 (h99)-999-99-99");

В этом примере мы разрешили вводить в качестве первого символа ввода любые цифры, кроме 7 и 8. Если же ваша маска ввода предназначена для мобильных номеров из России, то в $.mask.definitions['h'] следует оставить только цифру 9.

Маска ввода для тех случаев, когда в коде номера содержится цифра 9

Приведенный выше код отлично работает с теми масками ввода номера телефона, где код страны не содержит цифру "9". А что, если нужно сделать маску ввода номера телефона, например, для Узбекистана, где код страны 998, или для Кыргызстана, с их международным кодом 996? Наше решение не подходит для данных случаев.

В этой ситуации можно воспользоваться решением, которое предложил Александр Мальцев. Повторяем из первой части данного руководства Шаг 1 и Шаг 2, а на Шаге 3 мы размещаем в файле function.php вашей темы другой код:

// Маска ввода номера телефона на странице оформления заказа
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/js/jquery.maskedinput.min.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>
    <script>
  [].forEach.call(document.querySelectorAll('input[type="tel"]'), function (input) {
    let keyCode;
    function mask(event) {
      event.keyCode && (keyCode = event.keyCode);
      let pos = this.selectionStart;
      if (pos < 3) event.preventDefault();
      let matrix = '+998 ___-___-____', 
        i = 0,
        def = matrix.replace(/\D/g, ''),
        val = this.value.replace(/\D/g, ''),
        new_value = matrix.replace(/[_\d]/g, function (a) {
          return i < val.length ? val.charAt(i++) || def.charAt(i) : a
        });
      i = new_value.indexOf('_');
      if (i != -1) {
        i < 5 && (i = 3);
        new_value = new_value.slice(0, i)
      }
      var reg = matrix.substr(0, this.value.length).replace(/_+/g,
        function (a) {
          return '\\d{1,' + a.length + '}'
        }).replace(/[+()]/g, '\\$&');
      reg = new RegExp('^' + reg + '$');
      if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
      if (event.type == 'blur' && this.value.length < 5) this.value = ''
    }
    input.addEventListener('input', mask, false);
    input.addEventListener('focus', mask, false);
    input.addEventListener('blur', mask, false);
    input.addEventListener('keydown', mask, false);
  });
</script>

<?php
    }
}

Код страны и саму маску ввода номера телефона редактируем в строке 19.

Вывод

Хочу обратить внимание на то, что это универсальный способ добавления маски ввода номера телефона для плагина WooCommerce. Я специально предложил разместить js файл не в папке с темой, как это обычно делают, а в папке wp-content. Это позволяет применять данный способ для WordPress сайтов, которые вовсе не имеют темы. Такое возможно, например, при использовании конструктора Oxygen.

Поделиться:

6 комментариев

Подписаться
Уведомить о
guest
6 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Евгений
Евгений
9 месяцев назад

А как изменить формат маски? Например мне необходим такой 998--------- (соответственно черточки должны быть заполнены)

Евгений
Евгений
9 месяцев назад
Ответить на  Сергей Дугин

Спасибо огромное, все перерыскал не нашел! Все работает как часики)

Андрей
Андрей
4 месяцев назад

Сергей, спасибо за статью) Я поставил все как написано, но клиент пишет номер c 8ки и так далее. В результате последняя цифра теряется. Как сделать проверку, чтобы вторая цифра номера была не 8. Например чтобы нельзя было написать +7(892)111-11-11. Заранее спасибо за ответ))

Последний раз редактировалось 4 месяцев назад Андрей ем
Егор
Егор
2 месяцев назад

Добрый день! Спасибо за отличное решение и отличный блог! Но не могли бы Вы подсказать, как сделать так, чтобы формат телефона передавался без скобок и тире. Т.е. при оформление заказа была маска как в Вашем примере, а в итоговых данных (после оформления заказа), телефон передавался в админку в формате +79999999999 (без скобок и тире).

crossarrow-right