@nemo.travel/search-widget

Lightweight form for searching airtickets

Stats

StarsIssuesVersionUpdatedCreatedSize
@nemo.travel/search-widget
522.5.61a year ago4 years agoMinified + gzip package size for @nemo.travel/search-widget in KB

Readme

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

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.