Как создать форму поиска авиабилетов (новая версия)

По просьбам партнеров мы создали новый шаблон формы поиска авиабилетов (поиск от Aviasales) и отелей (поиск от Hotellook). Используя этот шаблон, можно создать полностью уникальную форму для своего сайта.

Данная форма поддерживает jquery 1.х и 2.х.

Важное замечание: шаблон отдается как есть, вся работа по его настройке производится силами партнера. Мы не оказываем услуги по настройке данного шаблона и не обучаем основам html, js и css. Воспользуйтесь, пожалуйста, услугами фрилансеров, если возникли трудности в настройке шаблона.

Скачать архив с шаблоном. 

Что входит в архив с шаблоном

• images - папка с иконками, используемыми в форме поиска;
• few_forms.html - файл-шаблон, в котором расположен код с примерами различных видов форм поиска;
• jquery.js - файл, необходимый для работы шаблона;
• jquery.twidget.js - файл с js кодом формы поиска. В этом же файле расположен пример кода для локализации полей формы поиска;
• reset.css, style.css - файлы стилей.

Вызов формы поиска в коде сайта

Чтобы разместить форму поиска на странице сайта, используется следующий код:

<div id="twidget" class="twidget-container"> </div>
<script>
$('#twidget').twidget({
locale: 'en',
marker: 1234,
default_origin: 'SVO',
default_destination: 'ekat',
default_hotel_location: 'rio'
});
</script>

где twidget - параметр вызова кода формы поиска.

Параметры настройки формы поиска

При создании формы поиска в неё могут быть переданы следующие параметры:

• locale - язык формы поиска, влияет так же на язык результата поиска;
• marker - партнерский маркер;
• default_origin - пункт отправления по умолчанию. Допустимо использовать как IATA код, так и название города. При этом может быть введено не полное название, функция автокомплита подставит требуемый город;
• default_destination - пункт назначения по умолчанию. Допустимо использовать как IATA код, так и название города;
• default_hotel_location - город по умолчанию в форме поиска отелей;
• type - тип формы поиска:
• avia - только авиабилеты;
• hotel - только отели;
• avia_hotel - комбинированная форма (для переключения используются вкладки, значение по умолчанию).
• open_in_new_tab - открывать результат поиска в новой вкладке (по умолчанию true).

Пример реализации формы поиска

На Github создан проект, в котором находятся примеры форм поиска: https://github.com/tp-search-form. Для каждого репозитория создана страница-пример. Вы можете изменять любые параметры и видеть результат этих изменений. Примеры форм поиска:

• поиск авиабилетов и отелей (английский язык);
• поиск авиабилетов и отелей (русский язык);
• поиск только авиабилетов (русский язык);
• поиск только отелей (английский язык).

Полезные советы

При использовании в форме поиска White Label может возникнуть следующая проблема: при переходе на WL не будет автоматически запускаться поиск. Чтобы это исправить, нужно закомментировать код container.find('input[name="with_request"]').remove();. Пример:

/* remove with_request input from jetradar form */ 
if(this.settings.locale == 'en') { 
/* container.find('input[name="with_request"]').remove();*/ 
container.find('input[name="oneway"]').remove(); 
}