Как добавить автозаполнение поля адреса доставки в WooCommerce

Почему нужно автозаполнять поле адреса доставки

Автозаполнение адреса доставки ускоряет процесс оформления заказа, снижая количество ошибок и повышая конверсию. Пользователь видит подсказки сразу после начала ввода, что экономит время и сокращает число брошенных корзин.

Диагностика проблемы с автозаполнением

Если поле адреса не предлагает варианты или автозаполнение не работает, проверьте следующее:

• Подключен ли JavaScript, который отвечает за подсказки;
• Нет ли конфликтов с другими плагинами или темой;
• Корректно ли работает API сервиса автозаполнения (например, Google Places API);
• Правильно ли указаны идентификаторы полей оформления заказа.

Пошаговое решение: добавление автозаполнения адреса через Google Places API

1. Получаем ключ API Google Places

Зарегистрируйтесь в Google Cloud Console, включите API Places и создайте API-ключ с ограничениями по домену.

2. Подключаем скрипт Google Places в WooCommerce

add_action('wp_enqueue_scripts', 'enqueue_google_places_api');
function enqueue_google_places_api() {
    if (is_checkout()) {
        wp_enqueue_script('google-places', 'https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&libraries=places', array('jquery'), null, true);
        wp_enqueue_script('custom-address-autocomplete', get_stylesheet_directory_uri() . '/js/address-autocomplete.js', array('jquery', 'google-places'), null, true);
    }
}

3. Создаем JavaScript для автозаполнения

Файл address-autocomplete.js должен содержать код инициализации:

jQuery(document).ready(function($) {
    var input = document.getElementById('billing_address_1');
    if (input) {
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['address'], componentRestrictions: {country: 'ru'} });
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.address_components) return;

            var address = {};
            place.address_components.forEach(function(component) {
                var types = component.types;
                if (types.indexOf('street_number') > -1) {
                    address.street_number = component.long_name;
                }
                if (types.indexOf('route') > -1) {
                    address.route = component.long_name;
                }
                if (types.indexOf('locality') > -1) {
                    address.city = component.long_name;
                }
                if (types.indexOf('postal_code') > -1) {
                    address.postcode = component.long_name;
                }
                if (types.indexOf('country') > -1) {
                    address.country = component.long_name;
                }
            });

            // Заполнение полей
            if (address.route && address.street_number) {
                $('#billing_address_1').val(address.route + ', ' + address.street_number);
            }
            if (address.city) {
                $('#billing_city').val(address.city);
            }
            if (address.postcode) {
                $('#billing_postcode').val(address.postcode);
            }
            // страна обычно уже выбрана пользователем
        });
    }
});

Проверка результата после внедрения

• Перейдите на страницу оформления заказа;
• Начните вводить адрес в поле «Адрес доставки»;
• Должны появиться подсказки Google с адресами;
• При выборе адреса поля города и почтового индекса заполняются автоматически.

Частые ошибки и их исправление

• Не загружается скрипт Google Places: Проверьте правильность API-ключа и ограничения доступа по домену.
• Адрес не автозаполняется полностью: Убедитесь, что идентификаторы полей совпадают с используемыми в теме или плагинах оформления заказа.
• Конфликты с другими скриптами: Отключите сторонние плагины по очереди, чтобы выявить источник конфликта.

Практические советы по безопасности и производительности

• Ограничьте API-ключ по домену, чтобы избежать несанкционированного использования.
• Загружайте скрипт Google Places только на странице оформления заказа, чтобы не замедлять другие страницы.
• Сохраняйте минимальный объем JavaScript, используйте кеширование и минификацию.
• Регулярно проверяйте квоты API в Google Cloud Console, чтобы избежать блокировок.

Сравнение способов реализации автозаполнения адреса