@nemo.travel/search-widget

v2.5.63

Published

a year ago

Lightweight form for searching airtickets

Downloads

177

0High
0Medium
0Low

p.naumov

bookler96

evgenylitvinenko-nemo

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

Добавьте указанный ниже код на 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
        });
    });

Объект Airport

Объект Country

Объект ArrivalSuggestionItem

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme