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

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

Данная форма поддерживает 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(); 
}