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

Сергей Дугин
06.02.2022
3 комментария

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

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

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

Шаг 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

Маска ввода для тех случаев, когда в коде номера содержится цифра 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.

Автор
Сергей Дугин
Более 5-ти лет на коммерческой основе делаю сайты, а также занимаюсь их технической поддержкой, ускорением, оптимизацией, доработкой. Еще провожу консультации и обучающие занятия по Вордпресс. Делюсь опытом на страницах своего блога.

3 комментария

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

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

Евгений
Евгений
23 дней назад
Ответить на  Сергей Дугин

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

cross