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

По просьбам партнеров мы создали новый шаблон формы поиска авиабилетов (поиск от 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(); 
}

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос