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

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

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

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

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

Поделиться в соц. сетях: