npm package: @nemo.travel/search-widget
Description: Lightweight form for searching airtickets
Author: Paul Naumov
Latest version: 2.5.64

<p align="center">
    <img width="200" src="http://demo.nemo.travel/templates/wurst/f2.0/img/nemo.travel.svg">
</p>

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

Добавьте указанный ниже код на HTML страницу между тегами `<body></body>`.

```html
<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*.
Рекомендуется подключать файлы виджета с указанием конкретной версии.
Полный список версий указан [здесь](https://gitlab.nemo.travel/frontend/flights.search.widget/tags).

Указав в ссылке в качестве версии слово `.../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](#Объект-airport), который будет выбран по умолчанию в качестве аэропорта прилета. |
| defaultDepartureAirport | - | `string` или `object` | `null` | Трехбуквенный IATA-код аэропорта или города, или объект [Airport](#Объект-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](http://support.nemo.travel/ru/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`:

```js
    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](#Объект-country) |
| countryCode | - | `string` | Двухбуквенный код страны |
| isCity | - | `bool` | Является ли IATA объект городом |

### Объект Country
| Название параметра | Обязательный параметр | Тип значения | Описание |
| :- | :- | :- | :- |
| **code** | **да** | `string` | Двухбуквенный код страны |
| **name** | **да** | `string` | Название страны |
| **nameEn** | **да** | `string` | Название страны на английском языке |

### Объект ArrivalSuggestionItem
| Название параметра | Обязательный параметр | Тип значения | Описание |
| :- | :- | :- | :- |
| **suggestion** | **да** | `string` | IATA код предлагаемого аэропорта |
| **distance** | **да** | `number` | Расстояние от выбранного аэропорта до предлагаемого в км |