@nemo.travel/search-widget NPM

Установка виджета

Добавьте указанный ниже код на 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`	Расстояние от выбранного аэропорта до предлагаемого в км