Как сделать маску телефона в форме оформления заказа в магазине на uKit?

Для реализации данной инструкции на собственном сайте необходимо
приобрести премиум-пакет «Про».

Данное решение позволяет добавить в форму оформления заказа поле с маской для ввода телефона.

Шаг 1: добавление поля в форму

В режиме редактирования сайта, нажмите на значок корзины в панели инструментов:

Настройки магазина

В открывшемся окне перейдите на вкладку Форма заказа и добавьте поле Телефон к Вашей форме:

Вид добавленного поля телефона

После добавления поля, закройте окно и выйдите из редактора в панель управления сайтом.

Шаг 2: добавление библиотек и стилей

В панели управления сайтом нажмите в виджетах сайта на Свой код:

Свой код в панели управления сайтом

Далее, создайте новую вставку кода, назовите её, например, Библиотеки и добавьте в неё следующий код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
Вид добавленных библиотек в первой вставке кода

В настройках указываете в head и помещаете на страницу Оформление заказа:

Настройки первой вставки кода

Сохранитесь.

Затем создайте вторую вставку кода, и назовите её, например Скрипт маски телефона. Добавьте в неё следующий код:

<script> 
 jQuery(function($){ 
 $("input[type=tel]").mask("+7(999) 999-99-99"); 
 }); 
</script>
Вид добавленного скрипта во второй вставке кода

В настройках указываете в body и помещаете на страницу Оформление заказа:

Настройки второй вставки кода

Сохранитесь.

Опубликуйте сайт и перейдите на страницу Оформление заказа. Если Всё было сделано правильно, увидите примерно следующее:

Результат работы нестандартного решения
Понравился материал?
Вы можете воспользоваться услугами автора материала – исполнителя Divly!