Отсутствие маски ввода в поле Телефон на странице оформления заказа чревато ошибками при его заполнении, что в свою очередь может привести к потере заказов. К счастью, реализовать маску ввода номера телефона для 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
}
}Если вы сделали все правильно, то теперь при вводе номера телефона в соответствующее поле, вы должны наблюдать маску ввода номера:
Добавляем запрет на ввод 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.
