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

kak-sozdat-formu-poiska-aviabiletov

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

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

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

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

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

  1. Images — папка с иконками, используемыми в форме поиска.
  2. Few_forms.html — файл-шаблон, в котором расположен код с примерами различных видов форм поиска.
  3. Jquery.js — файл, необходимый для работы шаблона.
  4. Jquery.twidget.js — файл с js кодом формы поиска. В этом же файле расположен пример кода для локализации полей формы поиска.
  5. Reset.css, style.css — файлы стилей.

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

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

jquery-form

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

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

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

  1. Locale — язык формы поиска, влияет так же на язык результата поиска.
  2. Marker — партнерский маркер.
  3. Default_origin — пункт отправления по умолчанию. Допустимо использовать как IATA код, так и название города. При этом может быть введено не полное название, функция автокомплита подставит требуемый город.
  4. Default_destination — пункт назначения по умолчанию. Допустимо использовать как IATA код, так и название города;
  5. Default_hotel_location — город по умолчанию в форме поиска отелей.
  6. Type — тип формы поиска:
    • Avia — только авиабилеты;
    • Hotel — только отели;
    • Avia_hotel — комбинированная форма (для переключения используются вкладки, значение по умолчанию).
  7. Open_in_new_tab — открывать результат поиска в новой вкладке (по умолчанию true).

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

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

Примеры форм поиска:

Скачать jquery.twidget.zip.

Автор поста
Yulia Domracheva