Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Автоматически исправляем ошибки в адресах DaData.ru

Сергей    10.02.2016    13945    5.0 из 5.0 (16)

Оцените материал:

    О чем здесь?

    Автоматическое исправление ошибок в адресах доставки с помощью сервиса https://dadata.ru.

    Продукты DaData.ru помогают крупным компаниям привести в порядок клиентскую базу. В этой заметке мы рассмотрим, как привести в порядок адреса доставки.

    Как это работает?

    Мы подключим jQuery плагин для страницы оформления заказа, который будет следить за полем для ввода адреса доставки. В момент, когда пользователь начнет набирать в нем свой адрес, плагин выполнит запрос к API dadata.ru и предложит список адресов, который удовлетворяет запросу. При нажатии на один из адресов, он будет помещен в поле адреса доставки.

    Исправляем ошибки в адресах

    Т.е. на выходе мы имеем не только структурированный массив адресов для доставки, но и реальную помощь посетителям в оформлении заказа.

    Чтобы начать работать необходимо иметь API-ключ. Зарегистрируйтесь, например по этой ссылке:

    Исправляем ошибки в адресах

    После этого перейдите в личный кабинет и скопируйте API-ключ:

    Исправляем ошибки в адресах

    В дальнейшем, мы будем использовать этот ключ при подключении плагина подсказок.

    Настройка плагина для интернет магазина uCoz

    Описание плагина, который мы будем использовать вы можете найти здесь. Исходный вид:

    <input id="address" name="address" type="text" size="100"/>
    <link href="https://dadata.ru/static/css/lib/suggestions-15.12.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 10]>
    <script type="text/javascript" src="https://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/lib/jquery.suggestions-15.12.min.js"></script>
    <script type="text/javascript">
     $("#address").suggestions({
     serviceUrl: "https://dadata.ru/api/v2",
     token: "API-ключ",
     type: "ADDRESS",
     count: 5,
     /* Вызывается, когда пользователь выбирает одну из подсказок */
     onSelect: function(suggestion) {
     console.log(suggestion);
     }
     });
    </script>
    

    Приведенный код состоит из нескольких частей:

    1. <input ... /> — поле, в которое вводится адрес доставки и под которым появляются подсказки. У нас в качестве этого поля будут выступать поля заказа с id = "order-fld-N" (здесь N — номер поля)
    2. suggestions-15.12.css — стили оформления подсказок, если не включить эти стили, подсказки не будут видны
    3. jquery.min.js — jQuery версии 1.10.2. На сайтах uCoz jQuery подключается автоматически, а выбрать версию можно в общих настройках сайта
    4. jquery.xdomainrequest.min.js — плагин для кроссдоменных запросов IE младше 10-ой версии
    5. jquery.suggestions-15.12.min.js — плагин подсказок

    Если взглянуть на код подключения плагина для поля, то можно увидеть следующее:

    • #address — селектор поля, к которому подключаются подсказки
    • token: "API-ключ" — этот ключ вы получите после регистрации на dadata.ru в личном кабинете
    • type: "ADDRESS" — тип поисковых подсказок. Кроме адреса существуют подсказки для ФИО, организаций, банков и email
    • count — количество вариантов в подсказках
    • onSelect — функция, которая выполняется после выбора подсказки. При этом в функцию передается аргумент suggestion, в котором вы найдете подробную информацию о подсказке

    Я покдлючу плагин для поля под номером 3. Вот полный код, который нужно разместить на странице служебных форм после $ORDER_FIELDS$:

    <link href="https://dadata.ru/static/css/lib/suggestions-15.12.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 10]>
    <script type="text/javascript" src="https://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/lib/jquery.suggestions-15.12.min.js"></script>
    <script type="text/javascript">
     $("#order-fld-3").suggestions({
     serviceUrl: "https://dadata.ru/api/v2",
     token: "API-ключ",
     type: "ADDRESS",
     count: 5
     });
    </script>
    

    Еще можно после выбора подсказки пользователем запускать калькулятор стоимости доставки, который мы недавно реализовали в 68 уроке:

    <link href="https://dadata.ru/static/css/lib/suggestions-15.12.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 10]>
    <script type="text/javascript" src="https://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/lib/jquery.suggestions-15.12.min.js"></script>
    <script type="text/javascript">
     $("#order-fld-3").suggestions({
     serviceUrl: "https://dadata.ru/api/v2",
     token: "API-ключ",
     type: "ADDRESS",
     count: 5,
     /* Вызывается, когда пользователь выбирает одну из подсказок */
     onSelect: function(suggestion) {
     myCalculator(suggestion.data.city);
     }
     });
    </script>
    

    Демонстрация работы

    Здесь будет содержимое suggestion...
    

    Статьи по теме

    Обсуждение

    Всего комментариев: 14

    avatar
    1
    Хороший материал. Спасибо
    т
    2
    как добавить к почтовой форме? прописываю в $("#address") имя поля куда пишется адрес. ничего не получается
    avatar
    0
    3
    В шаблоне почтовой формы тогда нужно указать этот id для поля с адресом или использовать при инициализации id поля, который дает форма.
    avatar
    4
    Спасибо. Полезная штука.
    avatar
    5
    А если для 2х полей сразу, это 2 скрипта или в одном можно как то через запятую сделать?
    avatar
    0
    6
    Если одинаковые подсказки, то через запятую можно
    
    Код
    <script type="text/javascript"> $("#address1, #address2").suggestions({
      serviceUrl: "https://dadata.ru/api/v2",
      token: "API-ключ",
      type: "ADDRESS",
      count: 5,
      /* Вызывается, когда пользователь выбирает одну из подсказок */
      onSelect: function(suggestion) {
      console.log(suggestion);
      }
      });
    </script>
    M
    7
    По подсказке выводится адрес без почтового индекса - а можно его тоже как-нибудь отобразить или вывести в еще одну строку?
    avatar
    0
    8
    В документации нет возможности настроить вид подсказки. Но есть onSelect в котором можно попытаться поменять их вид.
    V
    9
    Вот здесь написано про ИНДЕКС. Работает, индекс подставляется. Но в подсказках его нет.
    http://dadata.userecho.com/topics/723-poisk-po-indeksu-v-podskazkah/
    avatar
    0
    10
    Индекс в ответе вот:
    Код
    suggestion.data.postal_code

    Но появляется он только тогда, когда адрес указан с точностью до дома
    a
    11
    Сергей, прикрутил данную штуку (заполняются поля NAME и ADDRESS) к интернет-магазину - всё работает! Сейчас на другом сайте пытаюсь сделать тоже самое с обычной почтовой формой $MFORM_1$ и те же поля - например для ФИО / NAME - указываю соответствующее поле f2  -  $("#f2"). Не работает(((((
    avatar
    0
    12
    в почтовых формах f2 это не id, а имя, т.е. надо $('[name="f2"]') и их там несколько на странице может быть, так что аккуратнее.
    a
    13
    Большое спасибо, Сергей, заработало!!!
    a
    14
    Вопрос снят: скопировал себе suggestions-15.12.css и изменил параметры, всё встало.
    Автоматически исправляем ошибки в адресах DaData.ru
    Автоматически исправляем ошибки в адресах DaData.ru