/ Scripts & jquery / Подключаем КЛАДР

Подключаем КЛАДР

HIT

18.11.2017

3351

9

Подключаем к сайту систему КЛАДР — это постоянно обновляемая база адресов России. КЛАДР нужен для того, чтобы при вводе первых букв он предлагал варианты заполнения. Причем сделано это довольно интеллектуально, если мы выбрали например какой-либо город, то при выборе улиц он будет искать только в этом городе.

Подключаем функционал КЛАДР

Необходимые скрипты и стили нужно скачать здесь. Примеры реализации КЛАДР.

Самое главное подключить основной скрипт и стиль:

wp_enqueue_style( 'kladr', get_template_directory_uri() . '/css/jquery.kladr.min.css' , array( ), '1.0' , 'screen' );
wp_enqueue_script( 'kladr', get_template_directory_uri() . '/js/jquery.kladr.min.js' , array( ), '1.0' , true );

Далее инициализируем скрипт и прописываем класс формы и name полей для воздействия на них. Я уже подставил названия стандартных полей woocommerce.

$(function () {
	var $zip = $('[name="shipping_postcode"]'),
	$region = $('[name="shipping_state"]'),
	//$district = $('[name="district"]'),
	$city = $('[name="shipping_city"]'),
	$street = $('[name="shipping_address_1"]'),
	$building = $('[name="shipping_address_2"]');

	var $tooltip = $('.tooltip');

	$.kladr.setDefault({
		parentInput: '.woocommerce-checkout',
		verify: true,
		select: function (obj) {
			setLabel($(this), obj.type);
			$tooltip.hide();
		},
		check: function (obj) {
			var $input = $(this);

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

			if (!$.trim($input.val())) {
				$tooltip.hide();
				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();

	function setLabel($input, text) {
		text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
		$input.parent().find('label').text(text);
	}

	function showError($input, message) {
		$tooltip.find('span').text(message);

		var inputOffset = $input.offset(),
		inputWidth = $input.outerWidth(),
		inputHeight = $input.outerHeight();

		var tooltipHeight = $tooltip.outerHeight();

		$tooltip.css({
			left: (inputOffset.left + inputWidth + 10) + 'px',
			top: (inputOffset.top + (inputHeight - tooltipHeight) / 2 - 1) + 'px'
		});

		$tooltip.show();
	}
});

В данном случае я отключил поле district (район), его стандартно нет в WC, если от нужен, то придется создать для него поле.

При заполнении полей с КЛАДР мешает автозаполнение браузер, но его можно отключить только в настройках браузера. Параметр autocomplete=»off» в полях и форме не помогает.

Новый скрипт — ФИАС

Появилась новая версия данного решения. Нужно подключить скрипты и стили:

wp_enqueue_script( 'fias', get_template_directory_uri() . '/js/jquery.fias.min.js' , array( ), '1.0' , true );
wp_enqueue_style( 'fias', get_template_directory_uri() . '/css/jquery.fias.min.css' , array( ), '1.0' , 'screen' );

Решение в котором при вводе адреса в поле индекс проставляется актуальный индекс:

// Form example
(function () {
    var $container = $(document.getElementsByClassName('woocommerce-billing-fields__field-wrapper'));

    var $tooltip = $('#tooltip');

    var $zip = $container.find('[name="billing_postcode"]'),
        //$region = $container.find('[name="region"]'),
        //$district = $container.find('[name="district"]'),
        $city = $container.find('[name="billing_city"]'),
        $street = $container.find('[name="billing_address_1"]'),
        $building = $container.find('[name="billing_address_2"]');
    $()
        //.add($region)
        //.add($district)
        .add($city)
        .add($street)
        .add($building)
        .fias({
            parentInput: $container,
            verify: true,
            select: function (obj) {
                if (obj.zip) $zip.val(obj.zip);//Обновляем поле zip
                setLabel($(this), obj.type);
                $tooltip.hide();
            },
            check: function (obj) {
                var $input = $(this);

                if (obj) {
                    setLabel($input, obj.type);
                    $tooltip.hide();
                }
                else {
                    showError($input, 'Ошибка');
                }
            },
            checkBefore: function () {
                var $input = $(this);

                if (!$.trim($input.val())) {
                    $tooltip.hide();
                    return false;
                }
            }
        });

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

    //$district.fias('withParents', true);
    $city.fias('withParents', true);
    $street.fias('withParents', true);

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

    // Подключаем плагин для почтового индекса
    $zip.fiasZip($container);

    function setLabel($input, text) {
        text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
        $input.parent().find('label').text(text);
    }

    function showError($input, message) {
        $tooltip.find('span').text(message);

        var inputOffset = $input.offset(),
            inputWidth = $input.outerWidth(),
            inputHeight = $input.outerHeight();

        var tooltipHeight = $tooltip.outerHeight();
        var tooltipWidth = $tooltip.outerWidth();

        $tooltip.css({
            left: (inputOffset.left + inputWidth - tooltipWidth) + 'px',
            top: (inputOffset.top + (inputHeight - tooltipHeight) / 2 - 1) + 'px'
        });

        $tooltip.fadeIn();
    }
})();

Скрипт адаптирован под woocommerce, лишние поля закомментированы.

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Взаимодействие форм и scripts

Взаимодействие форм и scripts

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать. Поле select $('#sort').change(function(){ //функция работает при изменении Читать далее »

Типовые поля форм

Типовые поля форм

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности. Input Классный эффект для любых форм на сайте. При нажатии на форму placeholder плавно исчезает. Читать далее »

Вложение файла при отправке формы

Вложение файла при отправке формы

Как настроить в WordPress вложение и отправку файла с формы без использования плагинов. Форма с нужным полем для вложения и указанием обработчика: Содержимое файла process_upload.php, на который мы переходим после Читать далее »

Добавить комментарий

9 комментариев

  1. Аватар
    Роман

    Перестает работать сайт. В чем может быть причина?

    1. Alexandr
      Alexandr

      После чего перестает работать — что Вы делаете?

  2. Аватар
    Роман

    Вставляю данный код в functions.php темы, предварительно подключив скрипт и стили.

    1. Alexandr
      Alexandr

      Код скрипта в functions вставлять не нужно! Его нужно также отдельным файлом подключать, как и jquery.kladr.min.js. Обычно к сайту подключается файл с пользовательскими скриптами — там его и прописать.

  3. Аватар
    Денис

    Здравствуйте! Подскажите куда в вордпрессе все это прописывать, можете подробно расписать? Заранее, спасибо!

    1. Alexandr
      Alexandr

      Подключить скрипты и стили необходимо в файле functions.php. Сами скрипты и стили должны быть в файлах темы, чтобы пути (/css/ /js/) соответствовали.
      Вот функция подключения:

      function addkladr() { 
      wp_enqueue_style( 'kladr', get_template_directory_uri() . '/css/jquery.kladr.min.css' , array( ), '1.0' , 'screen' );
      wp_enqueue_script( 'kladr', get_template_directory_uri() . '/js/jquery.kladr.min.js' , array( ), '1.0' , true );
      }  
      add_action( 'wp_footer', 'addkladr' );

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

  4. Аватар
    Яна

    Можно все таки подробнее, какие точно файлы должны быть подключены

  5. Аватар
    Леон

    За что отвечает *parent*?
    var $address = $(‘[name=»address»]’),
    $parent = $(‘[name=»parent»]’);
     

  6. Аватар
    Леон

    что подставить из woocommerce полеи вместо parent?

Подключаем КЛАДР
Добавление полей при оформлении заказа
Рекомендации для васДобавление полей при оформлении заказаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.