Плагин «Нормальная маска телефона» для Shop-Script

Перед покупкой можно потестировать плагин на своем сайте, установив бесплатную ДЕМО версию!

* Функционал демо-версии урезан: вы сможете подключить маску телефона только в корзине сайта.

Плагин "Нормальная маска телефона" внедряет скрипты, которые обрабатывают поле "Телефон", приводя введенные данные к единому удобному формату вида "+7 (987) 654-32-10".

Важная информация! Если в вашем магазине после внедрения маски для номера телефона через какой-либо другой функционал стали приходить заявки с некорректным номером телефона (с лишней цифрой "8" в начале и с потерянной цифрой в конце) - знайте, что:

чаще всего это происходит из-за автоматической подстановки номеров телефонов, которые были сохранены либо ранее, либо на других страницах сайта, где маска не используется (скрипт, который вы используете на определенной странице, не обрабатывает автоматически подставленные номера телефонов перед внедрением маски, а сразу вставляет цифры в маску, отбрасывая при этом "лишнюю" цифру в конце);
в редких случаях это происходит из-за того, что некоторые покупатели не понимают, что в маске, начинающейся с "+7", вводить в начале цифру "8" не нужно и, заполняя ее, не замечают, что из-за этого последняя вводимая цифра не влезает в маску.

Посмотреть настройки плагина «Нормальная маска телефона»
(точь-в-точь как в админке)

В отличие от других подобных масок, добавляемых модулями других разработчиков, плагин «Нормальная маска телефона» решает несколько проблем, возникающих при внедрении маски.

Главные преимущества плагина:

Быстрое внедрение маски телефона

Плагин работает по принципу: "Установил, включил, забыл". Никаких сложных настроек. Привлекать к работе программиста не придется.

Динамическое удаление цифры "8" при вводе "+7 (89_) _--__"

Плагин проверяет первые 2 введенные цифры, и если введенные цифры "89", то принудительно удаляет "8" прямо во время заполнения номера телефона (аналогично удаляет цифру "7", если первые две цифры: "79"). Кстати, похожий функционал используют компании Ozon и DNS.

Приведение автоматически подставленного номера телефона к нужному формату

Если номер телефона подставился в корзине автоматически (из личного кабинета или с помощью какого-либо плагина), то перед внедрением маски плагин проверяет номер телефона и либо приводит его в нужный формат (по возможности), либо очищает поле для ввода номера телефона.

Отключение "браузерных" подсказок

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

Отключение возможности вставить номер телефона из буфера обмена

При попытке вставить номер телефона из буфера обмена через контекстное меню ("Правая кнопка мыши" --> "Вставить") или через горячую клавишу (Ctrl+V) плагин отменяет это действие и выводит покупателю сообщение с просьбой ввести номер телефона вручную.

Автоматическое перемещение курсора в начало поля

При клике на поле номера телефона курсор всегда будет вставать в нужно место: в начало поля, если поле еще пустое; справа от последней введенной цифры, если введена только часть цифр; в произвольное место поля, если все цифры заполнены. При использовании обычной маски курсор довольно часто может по ошибке вставать в середину или в конец поля, тем самым мешая нормально ввести номер телефона.

Подсветка границ поля при заполнении поля не до конца

При попытке снять фокус с поля номер телефона незаполненного до конца, границы поля станут красного цвета для привлечения внимания пользователя (при этом поле будет очищено).

Отдельная клавиатура с цифрами на мобильных устройствах

На некоторых мобильных устройствах в некоторых браузерах при вводе номера телефона теперь будет открываться клавиатура с цифрами, а не общая клавиатура со всеми символами.

Дополнительная опция: подсказка для поля (атрибут "placeholder")

Для пустого поля плагин выводит подсказку в корректном виде: "+7 (___) ___-__-__" при включении соответствующей опции в настройках плагина, а при ее отключении — удаляет подсказку вида "+7 (111) 222-33-44", добавляемую штатным функционалом "Shop Script" на некоторых версиях.

Дополнительная опция: красная граница при снятии фокуса с поля

Если пользователь не ввел до конца свой номер телефона и переключился на другой элемент страницы, то плагин подсветит поле красным цветом, чтобы привлечь к себе внимание. Можно включить данную опцию либо "Всегда", либо только для тех случаев, когда поле "Телефон" является обязательным для заполнения.

Где работает плагин?

Страница оформления заказа в корзине

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" в одностраничной корзине сайта (https://site.ru/order/).

Страница пошагового оформления заказа

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на странице оформления заказа в пошаговой корзине сайта (https://site.ru/checkout/).

Страница регистрации

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на странице регистрации на сайте (https://site.ru/signup/).

Страницы авторизации и восстановления пароля

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на странице авторизации (https://site.ru/login/) и на странице восстановления пароля (https://site.ru/forgotpassword/).

Страница личного кабинета покупателя

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" в личном кабинете покупателя во вкладке редактирования профиля (https://site.ru/my/profile/).

Форма плагина «Купить в 1 клик» (Bodysite)

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на форме быстрого заказа, выводимой плагином «Купить в 1 клик» (можно настроить на каких именно страницах выводить скрипты).

Форма плагина «Заказ в 1 шаг» (Bodysite)

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на форме оформления заказа, выводимой плагином «Заказ в 1 шаг» (https://site.ru/cart/).

Форма плагина «Заказ обратного звонка» (Bodysite)

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на форме заказа звонка, выводимой плагином «Заказ обратного звонка» (выводится на всех страницах сайта). Кроме того, плагин доработан под особенности дизайна и верстки данной формы.

Форма создания/редактирования товара (в бекенде)

Плагин добавляет скрипты для внедрения нормальной маски телефона для поля "Телефон" на форме создания/редактирования заказа в административной панели сайта (https://site.ru/webasyst/shop/?action=orders#/orders/new/).

Где угодно!

Начиная с версии 2.0.0 у плагина появился статический метод («хелпер»), предназначенный для разработчиков плагинов и тем дизайна. Теперь для любого поля для ввода номера телефона можно быстро подключить нормальную маску телефону, следуя инструкции. Подробная информация об интеграции плагина в тему дизайна и другие плагины представлена в документации.

Документация к плагину «Нормальная маска телефона»

Главные преимущества плагинов от Анатолия Чикурова:

Техническая поддержка 24/7

Среднее время реакции на запрос в техническую поддержку - 2 часа. Не общаемся отписками, а действительно помогаем разобраться с проблемами, даже если они не связаны с продуктом напрямую. Даем развернутые и понятные ответы. Отвечаем на все обращения, в т.ч. во внерабочее время (по возможности). Признаем и оперативно устраняем собственные ошибки, не игнорируя их и не сваливая на других разработчиков.

Дорожим репутацией!

Более 1500 установок всех плагинов из Маркета Webasyst. Рейтинг каждого продукта - 5 звёзд. Регулярные обновления. Ни одного негативного отзыва и ни одного недовольного клиента!

Уникальный модуль импорта настроек плагинов

В каждый плагин встроен модуль экспорта и импорта настроек. Переносить настройки плагина с одного проекта на другой или устанавливать рекомендуемые настройки из документации можно всего в несколько кликов!

Подробная документация и подсказки на странице настроек

Каждый плагин проработан до мелочей не только в плане своего функционала, но и в плане удобства настройки и тестирования. Мы прилагаем максимум усилий для того, чтобы каждый наш плагин мог настроить любой, даже самый неопытный пользователь, а опытные пользователи - потратили для этого минимум времени.

Хочешь быть в курсе новостей от Webasyst и SEO-отрасли, обсуждать новый функционал, обмениваться опытом с коллегами? Вступай и пиши в независимый Telegram чат: https://t.me/seo_flood.