В этом видео я расскажу как для поля Телефон на странице Оформления заказа WooCommerce сделать Маску ввода телефона.
Такая маска ввода телефона поможет пользователям не ошибиться при вводе своего телефона, а владелец магазина не будет терять свои заказы.
Советы в этом видео подойдут для Интернет-магазина, который работает под управлением WordPress и на плагине WooCommerce.
Скриншот
Алгоритм действий
- Скачиваем скрипт jquery.maskedinput.js и загружаем его на сайт (через FTP или с помощью файлового менеджера).
- Подключаем скрипт на сайте с помощью специальной функции.
- Наслаждаемся результатом 😉
Смотреть видео
➤ Підпишіться на Youtube-канал InwebPress, щоб дізнатися більше про створення та налаштування сайтів!
Текстовая инструкция
1.Скачать скрипт jquery.maskedinput.js. Скачайте весь архив (жмите на зеленую кнопку справа Code – Download ZIP). Распакуйте архив.
В скачанном архиве нужный файл находится в папке: /jquery.maskedinput-master/dist/
2.Функция подключения скрипта и вывода маски телефона:
Для вставки кода функции вы можете использовать дочернюю тему. Вставьте код в файл functions.php. Путь:
/wp-content/themes/child-theme/functions.php
Пример кода для маски ввода российского номера телефона:
add_action('wp_enqueue_scripts', 'my_maskedinput');
function my_maskedinput() {
if (is_checkout()) {
wp_enqueue_script('maskedinput', '/wp-content/themes/woodmart-child/js/jquery.maskedinput.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
}
}
Пример кода для маски ввода украинского номера телефона + плейсхолдер:
add_action('wp_enqueue_scripts', 'my_maskedinput');
function my_maskedinput() {
if (is_checkout()) {
wp_enqueue_script('maskedinput', '/wp-content/themes/woodmart-child/js/jquery.maskedinput.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("+38(999) 999-99-99",{placeholder:"+38(___) ___-__-__"});
});
</script>
<?php
}
}
Прейсхолдер информирует пользователя о правильном способе ввода номера телефона и отображается если поле пустое. Я в примере указал символы в виде нижнего подчеркивания, но вы можете использовать любые символы (например, 123).
Обратите внимание на путь в коде:
/wp-content/themes/woodmart-child/js/jquery.maskedinput.js
У вас путь к JS-файлу может быть другим. Файл можно разместить в любой папке на своем сайте. Главное, указать правильный путь. Я использую папку с дочерней темой, чтобы все мои кастомные файлы были в папке, в которой я вношу свои произвольные изменения. Читайте статью Что такое дочерняя тема?
Для подключения скрипта можно воспользоваться специальными плагинами. Или, этим плагином Code Snippets
Примечание
Если в вашем магазине покупатели будут указывать различные коды стран, то лучше в маске телефона указывать так: +9(999)999-99-99
В этом случае, не будет конфликта между телефоном указанным сначала в “Мой профиль – Адреса” и телефоном, который отобразится на странице “Оформление”. Ведь, пользователь может сначала завести Аккаунт, а потом заказать товар и его оформить.
Для Украины можно указать так: +38(999)999-99-99