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

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

HIT

18.11.2017

2967

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, лишние поля закомментированы.

Тэги:

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

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

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

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

Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

/
Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

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

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?

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