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

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

HIT

18.11.2017

1244

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

Тэги:

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

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

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

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности. 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="Контактная форма Читать далее »

/

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

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 минут.