Автозаполнение адреса при оформлении заказа

Правила раздела: faq.php?mode=okay

sergeevizh
sergeevizh
Репутация: 5
Сообщения: 87
Зарегистрирован: 16.10.2016
С нами: 8 месяцев 6 дней

Сообщение #1 sergeevizh » 02.03.2017, 11:04

Всех приветствую!
Есть такой хак, в корзине при заполнении полей ФИО и Адрес происходит автозаполнение через сервис dadata.ru.
Ниже код, который я никак не могу заставить работать на OkayCMS. Многим я думаю он будет полез. Если кто-то может его сделать, будьте добры.

Код: Выделить всё

{literal}
<link href="https://dadata.ru/static/css/suggestions-4.3.css" type="text/css" rel="stylesheet" />
<!--[if lt IE 10]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.1/jquery.xdomainrequest.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://dadata.ru/static/js/jquery.suggestions-4.3.min.js"></script>
<script type="text/javascript">
    $(".cart_form input[name='name']").suggestions({
        serviceUrl: "https://dadata.ru/api/v2/suggest/fio",
        type: "NAME",
        token: "ваш API-ключ",
        /* Вызывается, когда пользователь выбирает одну из подсказок */
        onSelect: function(suggestion) {
            console.log(suggestion);
        }
    });
    $(".cart_form input[name='address']").suggestions({
    serviceUrl: "https://dadata.ru/api/v2/suggest/address",
    type: "ADDRESS",
    token: "ваш API-ключ",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
    onSelect: function(suggestion) {
        console.log(suggestion);
    }
    });
</script>
{/literal}

Есть Google только на город:
Спойлер

Код: Выделить всё

{literal}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script>
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
{/literal}

к input добавить id="searchTextField"
Вложения
simpla-suggestions.png

m1hasik M
Аватара
m1hasik M
Возраст: 25
Репутация: 26
Сообщения: 193
Зарегистрирован: 12.11.2015
С нами: 1 год 7 месяцев
Откуда: Днепр
Skype

Сообщение #2 m1hasik » 02.03.2017, 18:46

код, который вызывает автоподбор, нужно написать вот так:

Код: Выделить всё

 $(".cart_form input[name='address']").suggestions({
    serviceUrl: "https://dadata.ru/api/v2/suggest/address",
    type: "ADDRESS",
    token: "ваш API-ключ",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
    onSelect: function(suggestion) {
        $(this).val(suggestion.value)
       /*или так*/
       $(".cart_form input[name='address']").val(suggestion.value)

    }
    });

sergeevizh
sergeevizh
Репутация: 5
Сообщения: 87
Зарегистрирован: 16.10.2016
С нами: 8 месяцев 6 дней

Сообщение #3 sergeevizh » 02.03.2017, 19:23

m1hasik писал(а):код, который вызывает автоподбор, нужно написать вот так:

Код: Выделить всё

 $(".cart_form input[name='address']").suggestions({
    serviceUrl: "https://dadata.ru/api/v2/suggest/address",
    type: "ADDRESS",
    token: "ваш API-ключ",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
    onSelect: function(suggestion) {
        $(this).val(suggestion.value)
       /*или так*/
       $(".cart_form input[name='address']").val(suggestion.value)

    }
    });

Не работает

m1hasik M
Аватара
m1hasik M
Возраст: 25
Репутация: 26
Сообщения: 193
Зарегистрирован: 12.11.2015
С нами: 1 год 7 месяцев
Откуда: Днепр
Skype

Сообщение #4 m1hasik » 03.03.2017, 06:33

А вы api Ключ вставили?
И кстати, вы смотрели в консоль, нет ли там ошибок, иногда на сайтах бывают какие то библиотеки JQuery, которые конфликтуют.
Ну и еще сделайте все таки console.log(suggestion), возможно поле адреса и не в поле value (хотя на сайте в документации говорится что там)

sergeevizh
sergeevizh
Репутация: 5
Сообщения: 87
Зарегистрирован: 16.10.2016
С нами: 8 месяцев 6 дней

Сообщение #5 sergeevizh » 03.03.2017, 11:14

Кто заинтересован, вот готовый код:

1. Внизу файла cart.tpl добавляем:

Код: Выделить всё

{literal}
<link href="https://dadata.ru/static/css/lib/suggestions-16.1.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://dadata.ru/static/js/lib/jquery.suggestions-16.1.min.js"></script>
<script type="text/javascript">
    $(".cart_form input[name='name']").suggestions({
        serviceUrl: "https://dadata.ru/api/v2",
        token: "ВАШ API-КЛЮЧ",
        type: "NAME",
        params: {
            parts: ["NAME", "SURNAME"]
        }
    });
    $(".cart_form input[name='address']").suggestions({
        serviceUrl: "https://dadata.ru/api/v2",
        token: "ВАШ API-КЛЮЧ",
        type: "ADDRESS"
    });
</script>
{/literal}

2. Вместо «ВАШ API-КЛЮЧ» пишем свой ключ (получить можно на https://dadata.ru/suggestions, это бесплатно).

3. Все работает!


Вернуться в «Полезные решения для OkayCMS»