Установка виджета
Добавьте указанный ниже код на HTML страницу между тегами <body></body>.
<div id="root"></div>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700&subset=cyrillic">
<link rel="stylesheet" href="https://cdn.nemo.travel/search-form/v2.5.22/flights.search.widget.min.css">
<script src="https://cdn.nemo.travel/search-form/v2.5.22/flights.search.widget.min.js"></script>
<script>
// Полный список параметров перечислен в разделе "Конфигурация".
FlightsSearchWidget.init({
webskyURL: 'http://demo.websky.aero/gru',
nemoURL: 'https://geodata.nemo.travel',
rootElement: document.getElementById('root'),
locale: 'ru'
});
</script>Пример инициализации виджета приведен в файлах /dist/websky.html и /dist/nemo.html.
P.S. Обратите внимание на номер версии виджета, указанный в ссылках на файлы: //cdn.nemo.travel/search-form/v2.5.22/flights.search.widget.min.css.
Рекомендуется подключать файлы виджета с указанием конкретной версии.
Полный список версий указан здесь.
Указав в ссылке в качестве версии слово .../latest/..., будут подключены файлы самой последней версии виджета.
Стилизация под внешний вид системы Nemo Travel
Для упрощения интеграции виджета с готовыми сайтами был разработан файл стилей https://cdn.nemo.travel/search-form/latest/nemo-flights.search.widget.min.css, подключив который, виджет принимает внешний вид системы Nemo Travel.
Сохранение данных в локальное хранилище браузера
По умолчанию, виджет автоматически сохраняет все данные формы поиска в локальное хранилище браузера. Это позволяет избежать потери данных при перезагрузке страницы.
Параметр disableCaching позволяет отключить сохранение данных. Чтобы включить работу с локальным хранилищем после инициализации виджета, необходимо вызвать глобальную функцию FlightsSearchWidget.enableCache().
Конфигурация
В метод init передается объект конфигурации виджета. Возможные параметры конфигурации:
| Название параметра | Обязательный параметр | Тип значения | Значение по умолчанию | Описание |
|---|---|---|---|---|
| nemoURL | да | string |
- | URL системы бронирования Nemo.travel
|
| rootElement | да | HTMLElement |
- | DOM-элемент в который будет встраиваться виджет |
| webskyURL |
да (в режиме WEBSKY) |
string |
- | URL системы бронирования Websky
|
| fallbackNemoURL | - | string |
- | Запасной URL системы бронирования Nemo.travel
|
| airportsBlackList | - | array |
null |
Позволяет убрать из автокомплита определенные аэропорты или города. Пример: [ 'MOW', 'LED' ]
|
| arrivalSuggestions | - | object |
{} |
Карта ближайших аэропортов, где ключ - строка в формате XXX-YYY (XXX и YYY соответственно IATA коды пункта вылета и пункта прилета), значение - объект [ArrivalSuggestionItem](#объект-arrivalsuggestionitem. Ближайший аэропорт указывается относительно пункта прилета YYY
|
| autoFocusArrivalAirport | - | boolean |
false |
Автоматически фокусироваться на поле выбора аэропорта прилета, после выбора аэропорта вылета. |
| autoFocusReturnDate | - | boolean |
false |
Автоматически фокусироваться на поле выбора обратной даты, после выбора даты вылета. |
| citiesOnly | - | bool |
false |
(Только для режима WEBSKY) Позволяет не отображать аэропорты внутри города |
| customAirportNames | - | object |
null |
Объект, позволяющий использовать свои собственные названия для определенных аэропортов. Пример объекта: { 'LHR': { 'ru': 'Лондон', 'en': 'London' } }. |
| customTranslations | - | object |
null |
Объект, позволяющий использовать свои собственные метки перевода. Пример объекта: { 'ru': { 'search': 'Запустить поиск' }, 'en': { 'search': 'Run search' } }. Исходные метки, используемые виджетом, находятся в JSON-файлах в папке src/i18n/.... |
| defaultArrivalAirport | - |
string или object
|
null |
Трехбуквенный IATA-код аэропорта или города, или объект Airport, который будет выбран по умолчанию в качестве аэропорта прилета. |
| defaultDepartureAirport | - |
string или object
|
null |
Трехбуквенный IATA-код аэропорта или города, или объект Airport, который будет выбран по умолчанию в качестве аэропорта вылета. |
| defaultDepartureDate | - | string |
null |
Дата вылета "туда" в строковом формате (YYYY-MM-DD). |
| defaultReturnDate | - | string |
null |
Дата вылета "обратно" в строковом формате (YYYY-MM-DD). |
| defaultPassengers | - | object |
{ ADT: 1 } |
Предуставленное кол-во пассажиров |
| defaultServiceClass | - | string |
Economy |
Класс обслуживания (Economy или Business) по-умолчанию |
| directOnly | - | bool |
false |
Искать только прямые рейсы |
| disableCaching | - | bool |
false |
Запрещает сохранение данных формы в локальное хранилище пользователя |
| disableUnavailableDates | - | bool |
false |
Запрещает на календаре выбор дат на которые отсутствуют доступные рейсы |
| enableCoupon | - | boolean |
false |
Добавляет поле У меня есть купон на скидку (только для WEBSKY) |
| highlightAvailableDates | - | boolean |
false |
Активирует в календаре подсветку дат, на которые есть доступные рейсы |
| isAWP | - | boolean |
false |
Активируйте этот параметр, если в вашем NEMO - проекте используется Avia Widget Pro |
| locale | - | string |
"en" |
Язык интерфейса. Поддерживаются языки: русский (ru), английский (en), немецкий (de), итальянский (it), нидерландский (nl), румынский (ro), казахский (kk), узбекский (uz), украинский (ua или uk) |
| maxPassengersCount | - | number |
6 |
Максимальное количество пассажиров доступное для выбора |
| mode | - | string |
"NEMO" |
Название системы бронирования, с которой предстоит работать (NEMO или WEBSKY) |
| openNewTab | - | boolean |
false |
Открывать страницу результатов поиска в новом окне |
| readOnlyAutocomplete | - | boolean |
false |
Запретить ввод текста в поля автокомплита аэропортов (только если указан параметр routingGrid, или включен режим Websky) |
| routingGrid | - | string |
null |
Двухбуквенный IATA-код авиакомпании. Если указан, автокомплит аэропортов переключается в режим поиска по маршрутной сетке авиакомпании. Также, при клике в поле автокомплита, отображаются все возможные пункты назначений авиакомпании |
| useNearestAirport | - | boolean |
false |
Выбирать в качестве пункта вылета ближайший аэропорт, полученный на основе IP-адреса пользователя (только если не указан параметр defaultDepartureAirport) |
| verticalForm | - | boolean |
false |
Отображать ли принудительно вертикальную форму поиска, вместо горизонтальной |
| vicinityDatesMode | - | bool |
false |
Искать перелеты в заданной границе дат |
| vicinityDays | - | integer |
3 |
Количество дней для "Искать ±3 дня" (только для NEMO при включенной настройке vicinityDatesMode) |
| utm | - | object |
{} |
Объект для передачи UTM-меток. Пример: { utm_source: 'some_source', utm_campaign: 'some_promo_campaign' } (только для NEMO) |
Веб-аналитика
Ниже приведена таблица событий, которые вызываются при каждом действии пользователя на форме поиска. Данный функционал можно использовать для аналитики действий пользователя с помощью инструментов Яндекс.Метрика или Google Analytics.
Подписаться на событие можно с помощью функции addEventListener:
document.addEventListener('analytics.searchForm.search.validationError', function(event) {
ga('send', {
hitType: 'event',
eventCategory: 'ПРОИЗВОЛЬНОЕ_НАЗВАНИЕ_КАТЕГОРИИ_X',
eventAction: 'ПРОИЗВОЛЬНОЕ_НАЗВАНИЕ_ДЕЙСТВИЯ_X',
eventLabel: event.detail
});
});| Название события | Параметры | Описание |
|---|---|---|
| analytics.searchForm.search | - | Запуск поиска (форма заполнена корректно) |
| analytics.searchForm.tripType.value |
detail: OW или RT или CR
|
Выбор типа маршрута |
| analytics.searchForm.directFlights.active |
detail: true или false
|
Опция "Прямые рейсы" |
| analytics.searchForm.serviceClass.value |
detail: Economy или Business
|
Класс обслуживания |
| analytics.searchForm.vicinityDates.active |
detail: true или false
|
Опция "+/- 3 дня" |
| analytics.searchForm.search.validationError |
detail: string
|
Попытка запуска поиска с некорректно заполненной формой. В параметре detail будет передан код ошибки |
Объект Airport
| Название параметра | Обязательный параметр | Тип значения | Описание |
|---|---|---|---|
| IATA | да | string |
Трехбуквенный IATA-код аэропорта или города |
| name | да | string |
Название города или аэропорта |
| nameEn | да | string |
Название города или аэропорта на английском языке |
| country | - | object |
Объект Country |
| countryCode | - | string |
Двухбуквенный код страны |
| isCity | - | bool |
Является ли IATA объект городом |
Объект Country
| Название параметра | Обязательный параметр | Тип значения | Описание |
|---|---|---|---|
| code | да | string |
Двухбуквенный код страны |
| name | да | string |
Название страны |
| nameEn | да | string |
Название страны на английском языке |
Объект ArrivalSuggestionItem
| Название параметра | Обязательный параметр | Тип значения | Описание |
|---|---|---|---|
| suggestion | да | string |
IATA код предлагаемого аэропорта |
| distance | да | number |
Расстояние от выбранного аэропорта до предлагаемого в км |