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

Andrey Novoselov Andrey Novoselov
Обновлено:
Время прочтения:  2  мин.
5152
30

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

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.

Собрали акции брендов, чтобы вы заработали на майских 👉