Решено Друзья помогайте))) Маска ввода телефона

[Useer72]

Привет всем!
Суть разговора такая. Создал маску для ввода номера телефона вот этим скриптом:

//Маска для формы
add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');
function wpmidia_enqueue_masked_input(){
wp_enqueue_script('masked-input', get_template_directory_uri().'/js/jquery.maskedinput.min.js', array('jquery'));
}

add_action('wp_footer', 'wpmidia_activate_masked_input');
function wpmidia_activate_masked_input(){
?>
<script type="text/javascript">
jQuery( function($){
//$(".data").mask("99/99/9999");
$("#billing_phone").mask("+7 (999) 999-99-99"); //маска для checkout
$(".tel").mask("+7 (999) 999-99-99"); //маска для ContactForm7
//$(".cnpj").mask("99.999.999/9999-99");
});
</script>
<?php
}

 

[Useer72]

Чисто теоретически нужно привязать класс .tel к форме ввода номера на checkout
Но в каком файле это править подскажите, а то не могу найти

 

[Useer72]

Есть решение!!!!! Оказывается все элементарно: нужно не класс добавлять к строке ввода, а наоборот, ID строки ввода добавить в скрипт! Короче добавляем еще одну вот такую маску: $("#billing_phone").mask("+7 (999) 999-99-99"); и вуаля)))
Очень очень полезная вещичка!! А то юзеры как попало телефоны вводят всегда в разном формате, достало

 

[Andrik]

День Добрый! А можно по подробнее инструкцию что куда вставлять?))

 

[Distemper27]

День Добрый! А можно по подробнее инструкцию что куда вставлять?))

ну в форму контактов наврное в поля или же модифицировать плагин создавая какой-то пресет. А в форму заказа/оплаты "checkout" уже пусть сам автор ответит.

Да и к томуже наврное надо будет и css прописивать оформление полей кастомных и т.д.

 

[Useer72]

Я не знаю разрешено ли тут кидать ссылки на сторонние сайты, но это не рекламы ради а для дела. Вот тут
https://pageup.com.ua/maska-vvoda-telefona-dlya-plagina-contact-form-7/#comment-391
полностью все подробно описано. Там для формы обратной связи ContactForm7, но я смог реализовать этот скрипт и для формы ввода номера телефона checkout при оформлении заказа, добавлением одной единственной строки в скрипт. Она выше приведена. Дел на 5 минут.

 

[Distemper27]

Я не знаю разрешено ли тут кидать ссылки на сторонние сайты, но это не рекламы ради а для дела. Вот тут
https://pageup.com.ua/maska-vvoda-telefona-dlya-plagina-contact-form-7/#comment-391
полностью все подробно описано. Там для формы обратной связи ContactForm7, но я смог реализовать этот скрипт и для формы ввода номера телефона при оформлении заказа одной единственной строкой. Она выше.

В форме заказа пришлось что-то с ксс-стилями править или нет ?

 

[Useer72]

В форме заказа пришлось что-то с ксс-стилями править или нет ?

Вначале я пошел именно этим путем, и пытался "приклеить" к форме ввода номера в checkout класс .tel99 но это был тупиковый маневр!!!! Потратил несколько дней и не смог. И потом до меня дошло, надо идти совсем наоборот))) И я привязал форму к скрипту, а не скрипт к форме. Поэтому править ничего не нужно! Добавляем маску в сам скрипт и все:
$(“#billing_phone”).mask(“+7 (999) 999-99-99″);

По умолчанию в вукомерсе ID формы ввода номера billing_phone, вот ее и вписываем в скрипт

 

[Zek]

Я не знаю разрешено ли тут кидать ссылки на сторонние сайты, но это не рекламы ради а для дела. Вот тут
https://pageup.com.ua/maska-vvoda-telefona-dlya-plagina-contact-form-7/#comment-391
полностью все подробно описано. Там для формы обратной связи ContactForm7, но я смог реализовать этот скрипт и для формы ввода номера телефона checkout при оформлении заказа, добавлением одной единственной строки в скрипт. Она выше приведена. Дел на 5 минут.

Подскажите если не установлен ContactForm7, скрипт с маской ввода телефона будет работать? У меня ContactForm7 не установлен, я сделал все как указанно по этой ссылке, но маска не заработала. Куда еще нужно копать?

Что я сделал:
1. Скачал скрипт jquery.maskedinput.min.js и закинул его в папку к теме
2. Прописал в файле function.php своей темы это:
add_action('wp_enqueue_scripts', 'wpmidia_enqueue_masked_input');
function wpmidia_enqueue_masked_input(){
wp_enqueue_script('masked-input', get_template_directory_uri().'/assets/js/jquery.maskedinput.min.js', array('jquery'));
}
add_action('wp_footer', 'wpmidia_activate_masked_input');
function wpmidia_activate_masked_input(){
?>
<script type="text/javascript">
jQuery( function($){
$(“#billing_phone”).mask(“+7 (999) 999-99-99″);
});
</script>
<?php
}

 

[Distemper27]

где ты хочешь эту форму вставить ? В странице заказа/оплаты ?

 

[Zek]

где ты хочешь эту форму вставить ? В странице заказа/оплаты ?

На странице checkout

 

[Distemper27]

На странице checkout

ты не весь скрипт вроде добавил. как я понял нужно добавить эту строку к

<script type="text/javascript">
jQuery( function($){
$(".data").mask("99/99/9999");
$(".tel99").mask("(99) 9999-9999");
$(".cpf").mask("999.999.999-99");
$(".cnpj").mask("99.999.999/9999-99");
});
</script>
<?php
}

 

[Distemper27]

Вначале я пошел именно этим путем, и пытался "приклеить" к форме ввода номера в checkout класс .tel99 но это был тупиковый маневр!!!! Потратил несколько дней и не смог. И потом до меня дошло, надо идти совсем наоборот))) И я привязал форму к скрипту, а не скрипт к форме. Поэтому править ничего не нужно! Добавляем маску в сам скрипт и все:
$(“#billing_phone”).mask(“+7 (999) 999-99-99″);

По умолчанию в вукомерсе ID формы ввода номера billing_phone, вот ее и вписываем в скрипт

Кстати можешь кинуть ссылку на страницу как теперь выглядит ну или заскринить страницу ? интерестно как смотрится теперь

 

[Zek]

ты не весь скрипт вроде добавил. как я понял нужно добавить эту строку к

<script type="text/javascript">
jQuery( function($){
$(".data").mask("99/99/9999");
$(".tel99").mask("(99) 9999-9999");
$(".cpf").mask("999.999.999-99");
$(".cnpj").mask("99.999.999/9999-99");
});
</script>
<?php
}

Я делал и так, но не работает. Дождемся ответа ТС.

 

[Distemper27]

А вивод самих полей без плейсхолдера на странице заказа у тебя есть ? родные от Вуу ? Еще можно прописать в папке woo , часто в папке есть еще допольнительные файлы пхп или например в теме есть тоже папка woocommerce или если использушь дочерную тему то function.php надо в ней тоже создавать и уже там прописать дейсвия для добавльнеия скриптов

 

[Useer72]

Подскажите если не установлен ContactForm7, скрипт с маской ввода телефона будет работать? У меня ContactForm7 не установлен, я сделал все как указанно по этой ссылке, но маска не заработала. Куда еще нужно копать?

По идее должен, так как ContactForm7 это просто плагин. К скрипту никакого отношения не имеет. Щас подумаем что может быть.

Вот у меня смотрите все робит:
https://yagoda-tumen.ru/checkout/

 

[Useer72]

ты не весь скрипт вроде добавил. как я понял нужно добавить эту строку к

<script type="text/javascript">
jQuery( function($){
$(".data").mask("99/99/9999");
$(".tel99").mask("(99) 9999-9999");
$(".cpf").mask("999.999.999-99");
$(".cnpj").mask("99.999.999/9999-99");
});
</script>
<?php
}

Это не обязательно. Достаточно как сделал Zek. Смотри правильно ли прописан путь к файлу js. И да, у меня этот скрипт конфликтовал с другим.

 

[Distemper27]

По идее должен, так как ContactForm7 это просто плагин. К скрипту никакого отношения не имеет. Щас подумаем что может быть.

Вот у меня смотрите все робит:
https://yagoda-tumen.ru/checkout/

теоретически , да должно работать т.к он подключается через функции. (javascript) но все зависит от того есть ли папка в теме , поддерживает ли эго шабон Вуу , есть ли дочерняя тема и есть ли какие-то отдельно вывединние стилы/хуки вуу в папке с темой или она подтягивает стандартные стыли Вуу. Нюансы есть короче

 

[Useer72]

Нюансы есть короче

Это да! Надо смотреть конечно индивидуально для каждой темы. Щас вспомню с чем был конфликт у меня изначально.

 

[Distemper27]

Это да! Надо смотреть конечно индивидуально для каждой темы. Щас вспомню с чем был конфликт у меня изначально.

плагины кэширования если таковы были или плагины защиты часто дают конфликт. Также бывает еще плагины многоуровневого меню тоже иногда конфликтируют.