## Установка виджета Добавьте указанный ниже код на HTML страницу между тегами ``. ```html

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