Плагин «Маска телефона Телефона - Inputmask любой страны» для Shop-Script

Что такое Inputmask для телефонов и зачем он нужен

Inputmask для телефонов — плагин для Shop-Script на Webasyst: на витрине подключает библиотеку Inputmask и накладывает мягкую международную маску на поля ввода телефона. Удобно для корзины, оформления заказа и любых других форм, где посетитель вводит номер в международном виде.

Как подключается к теме — плагин выводит скрипты через стандартный хук витрины frontend_head. Если тема не выводит этот хук, предусмотрены запасные варианты: frontend_footer и frontend_page, чтобы маска всё равно попала на страницу.

Что умеет плагин
- Находить поля телефона по настраиваемым CSS-селекторам (по умолчанию — тип tel, имена, id, классы и placeholder со словами про телефон на русском и английском).
- Исключать отдельные поля по списку селекторов-исключений (скрытые поля, пароль, email, класс .js-inputmask-ignore, атрибут data-inputmask-ignore="1" и другое — всё настраивается).
- При необходимости подставлять «+» при фокусе в пустое поле и убирать одинокий «+» при уходе с поля — удобно для международного формата.
- Нормализовать ввод и вставку из буфера: оставляет цифры и ведущий плюс, опционально добавляет «+» перед цифрами.
- Пробовать телефонный каталог Inputmask (alias): сначала abstractphone, затем phone; если каталог недоступен — перейти на запасную маску вида «+» и до пятнадцати цифр.
- Ставить у полей autocomplete="tel" и inputmode="tel"; при типе number пытаться переключить на tel для корректной клавиатуры на телефонах.
- Подхватывать поля, появляющиеся в DOM позже: MutationObserver и при наличии jQuery — повторная инициализация после AJAX.
- Вести отладочные сообщения в консоль браузера с префиксом [shop-inputmask], если включён режим отладки.
Что вы получаете
- Более предсказуемый ввод телефона на витрине без правки шаблонов темы в каждом месте.
- Гибкость: свои селекторы под нестандартные формы и отдельный список исключений.
- Один раз настроили в админке — маска работает на подходящих полях автоматически.
Где настраивать — Магазин → Настройки → Плагины → Inputmask для телефонов (или аналогичный раздел плагинов Shop-Script в вашей установке): включение плагина, селекторы, исключения, плюс при фокусе, символ placeholder, использование телефонного каталога Inputmask, отладка.

Основные сценарии использования

Оформление заказа и корзина
- Посетитель вводит номер в едином формате, меньше «ломаных» номеров из-за произвольных символов.
- Маска не жёстко привязана к одной стране: сначала используется возможность библиотеки по телефонным alias, иначе — мягкая международная запасная маска.
Нестандартные поля в теме
- Если поле телефона называется иначе, чем в дефолтных селекторах, добавьте свой CSS-селектор в настройках плагина.
- Если маска попала на лишнее поле, добавьте для него исключение в блоке «Исключения» или пометьте поле классом js-inputmask-ignore / атрибутом data-inputmask-ignore="1".
Динамические формы и AJAX
- Новые блоки формы, попавшие на страницу после загрузки, обрабатываются наблюдателем за DOM.
- При использовании jQuery дополнительно выполняется переинициализация после завершения AJAX-запросов.

Технические детали (кратко)

На страницу выводятся минифицированные скрипты Inputmask, расширения для телефонов и файл с телефонными кодами, затем собственный скрипт плагина.
Конфигурация с админки передаётся в JavaScript через объект window.shopInputmaskPluginConfig.
Повторного подключения ассетов за один запрос страницы не происходит: плагин отслеживает, что скрипты уже вставлены.

Что можно настроить

Включение или выключение плагина целиком.
Строка CSS-селекторов полей телефона (несколько селекторов через запятую в формате, допустимом для querySelectorAll).
Селекторы исключений.
Автоподстановка «+» при фокусе.
Символ placeholder маски.
Включение или отключение попытки использовать телефонный каталог Inputmask (alias).
Режим отладки в консоли браузера.

Частые вопросы

Нужен ли jQuery? Нет. Плагин работает и без него; jQuery только помогает переинициализировать поля после некоторых AJAX-сценариев.
Почему маска «мягкая»? Потому что при недоступности телефонного каталога используется запасной шаблон «+» и набор цифр, без жёсткой привязки к одному национальному формату.
Можно ли отключить маску на витрине? Да, снимите галочку «Плагин включен» в настройках.
Куда смотреть, если что-то не срабатывает? Включите «Режим отладки» и откройте консоль разработчика в браузере; также проверьте, что тема выводит один из хуков frontend_head, frontend_footer или frontend_page.

Нужна помощь с настройкой под ваш магазин? Пишите на scc.lac@mail.ru или в Telegram @web_stu.

Маска телефона Телефона - Inputmask любой страны для Shop-Script

7 дней бесплатно

webictus