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