Быстрый ввод адреса доставки в форму заказа

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

Рассмотрим работу с подсказками для адресных полей API популярного российского сервиса КЛАДР. Для средненагруженного сайта сервис бесплатный (существует ограничение на количество бесплатных запросов в 100 000, что соответствует ~5000-10 000 подобранных адресов).

В качестве примера проведем включение автодополнения для полей адреса доставки компонента интернет-магазина Minishop2 движка MODX Revolution.

Файлы, необходимые для работы с сервисом можно скачать с официального источника по ссылке.

Нас интересуют файлы jquery.kladr.min.css и jquery.kladr.min.js, закачиваем их на наш сайт в соответствующие директории папки assets. Поскольку работаем с плагином jquery, вызов js файла на странице необходимо выполнить после загрузки, собственно, самого jquery.min.js, но раньше, чем вызов самого подключения (в нашем случае вызов функции производится из кастомного js файла minishop2).

Подключение файлов плагина API сервиса:

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

<script src="[[++assets_url]]js/jquery.kladr.min.js"></script>

<link href="[[++assets_url]]css/jquery.kladr.min.css" rel="stylesheet">

Активация работы подсказок для полей заказа:

Данный пример подключения взят из файла form.js папки examples и адаптирован под страницу заказа minishop2. Код добавляется в кастомный js файл компонента.

$(document).ready(function ($) {
        // Проверяем, что вызов производится на странице корзины заказа
        if ($('#msCart').length > 0) {
        (function () {
        var $container = $(document.getElementById('msOrder'));
        var $zip = $container.find('[name="index"]'),
            $region = $container.find('[name="region"]'),
            $district = $container.find('[name="district"]'),
            $city = $container.find('[name="city"]'),
            $street = $container.find('[name="street"]'),
            $building = $container.find('[name="building"]');

        $()
            .add($region)
            .add($district)
            .add($city)
            .add($street)
            .add($building)
            .kladr({
                parentInput: $container.find('.js-form-address'),
                verify: true,
                select: function (obj) {
                    setLabel($(this), obj.type);
                    miniShop2.Message.close();
                },
                check: function (obj) {
                    var $input = $(this);

                    if (obj) {
                        setLabel($input, obj.type);
                        miniShop2.Message.close();
                    }
                    else {
                        showError('Введено неверно');
                    }
                },
                checkBefore: function () {
                    var $input = $(this);

                    if (!$.trim($input.val())) {
                        miniShop2.Message.close();
                        return false;
                    }
                }
            });

        $region.kladr('type', $.kladr.type.region);
        $district.kladr('type', $.kladr.type.district);
        $city.kladr('type', $.kladr.type.city);
        $street.kladr('type', $.kladr.type.street);
        $building.kladr('type', $.kladr.type.building);

        // Отключаем проверку введённых данных для строений
        $building.kladr('verify', false);

        // Подключаем плагин для почтового индекса
        $zip.kladrZip($container);
        function setLabel($input, text) {
            text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
            $input.parent().find('label').text(text);
        }
        // Переключаем вывод сообщения на minishop
        function showError(message) {
            miniShop2.Message.error(message);
        }
        // Если поле Город заполнено при загрузке, учитываем его значение для зависимых полей
        if ($city.val()) {
            $city.kladr('controller').setValue($city.val());
        }   
    })();
}
});