/ Сайтостроение / Scripts & jquery / Подключаем КЛАДР

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

18.11.2017

998

7

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

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

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

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

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, если от нужен, то придется создать для него поле.

Тэги:

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

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

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

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности. Select <select name="menu-477" class="textbox"> <option value="RedRoyal">RedRoyal</option> <option value="Sanremo">Sanremo</option> <option value="Anapa">Anapa</option> </select> Дата Стандартное поле не Читать далее »

Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы <?php echo do_shortcode( '[[contact-form-7 id="143" title="Контактная форма Читать далее »

/
Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/

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

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

  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. Яна

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

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