Flights Search Widget

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

Для работы виджета необходимо любым удобным способом подключить на страницу файлы из папки dist:

• файл стилизации виджета: flights.search.widget.min.css
• файл с JavaScript-кодом виджета: flights.search.widget.min.js
• в той же папке, где будет расположен файл стилизации, следует разместить папку images, необходимую для корректного отображения изображений

Инициализация виджета на странице

При подключении файла flights.search.widget.min.js, на странице становится доступен JavaScript-объект FlightsSearchWidget с единственным методом init, запускающим инициализацию виджета:

<div id="root"></div>
<link rel="stylesheet" href="flights.search.widget.min.css">
<script src="flights.search.widget.min.js"></script>
<script>
    FlightsSearchWidget.init({
        webskyURL: 'http://demo.websky.aero/gru',
        nemoURL: 'http://sys.nemo.travel',
        rootElement: document.getElementById('root'),
        locale: 'ru'
    });
</script>

Также, пример инициализации виджета приведен в файле /dist/index.html.

Стилизация под внешний вид системы Nemo Travel

Для упрощения интеграции виджета с готовыми сайтами был добавлен файл /dist/nemo-flights.search.widget.min.css, подключив который, виджет принимает внешний вид системы Nemo Travel.

Конфигурация

В метод init передается объект конфигурации виджета. Возможные параметры конфигурации:

Название параметра	Обязательный параметр	Тип значения	Значение по умолчанию	Описание
nemoURL	да	string	-	URL системы бронирования Nemo.travel
rootElement	да	HTMLElement	-	DOM-элемент в который будет встраиваться виджет
webskyURL	да (в режиме WEBSKY)	string	-	URL системы бронирования Websky
aggregationOnly	-	bool	false	(Только для режима WEBSKY) Если у агрегирующего города есть только 1 аэропорт, то показывать в автокомплите только агрегирующий город. Пример, в случае Берлин (BER) и Тегель (TXL, относится к Берлину) в автокомплите будет отображаться только Берлин.
autoFocusArrivalAirport	-	boolean	false	Автоматически фокусироваться на поле выбора аэропорта прилета, после выбора аэропорта вылета.
autoFocusReturnDate	-	boolean	false	Автоматически фокусироваться на поле выбора обратной даты, после выбора даты вылета.
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	Искать только прямые рейсы
enableCoupon	-	boolean	false	Добавляет поле У меня есть купон на скидку (только для WEBSKY)
highlightAvailableDates	-	boolean	false	Активирует в календаре подсветку дат, на которые есть доступные рейсы (только для WEBSKY)
locale	-	string	"en"	Язык интерфейса. Поддерживаются языки: русский (ru), английский (en), немецкий (de), румынский (ro)
mode	-	string	"NEMO"	Название системы бронирования, с которой предстоит работать (NEMO или WEBSKY)
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)

Объект Airport

Название параметра	Обязательный параметр	Тип значения	Описание
IATA	да	string	Трехбуквенный IATA-код аэропорта или города
name	да	string	Название города или аэропорта
nameEn	да	string	Название города или аэропорта на английском языке
country	-	object	Объект Country
countryCode	-	string	Двухбуквенный код страны
isCity	-	bool	Является ли IATA объект городом

Объект Country

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

Команды для разработки

• npm run build — генерирует минифицированные CSS и JavaScript пакеты в папку /dist/
• npm run build-dev — генерирует полноразмерные CSS и JavaScript пакеты, и Webpack начинает отслеживать изменения в файлах (watch: true)
• npm run server — запускает Express-сервер в корне проекта и сразу же открывает браузер на http://localhost:5555
• npm run dev — использовать для разработки: запускает Express-сервер, открывает браузер и запускает Webpack в dev режиме (аналогично npm run server && npm run build-dev)