Автоматически исправляем ошибки в адресах 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...