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

По просьбам партнеров мы создали новый шаблон формы поиска авиабилетов (поиск от 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. Для каждого репозитория создана страница-пример. Вы можете изменять любые параметры и видеть результат этих изменений. Примеры форм поиска:

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

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

При использовании формы поиска может возникнуть следующая проблема: при переходе на Aviasales, Jetradar или White Label не будет автоматически запускаться поиск. Чтобы это исправить, нужно закомментировать код 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(); 
}