Поисковая форма

Поисковая форма

Форма-конструктор (для самостоятельной разработки)

Для создания собственной формы поиска и настройки её под дизайн вашего сайта воспользуйтесь специальным конструктором. Для этого войдите в Личный кабинет партнера и перейдите на вкладку «Поисковые формы». После этого нажмите кнопку «Создать новую форму» для создания и «Редактировать» для редактирования формы. В открывшемся окне настройте внешний вид и содержимое формы поиска.

Если вам требуется форма поиска фиксированной ширины, установите требуемое значение в поле «Ширина». Чтобы сделать форму поиска адаптивной (т. е. автоматически подстраивающейся под размер страницы), установите галку в чекбокс «Ширина 100%».

 

  • Цветовая схема — выбор схемы оформления формы.
  • Тип модуля — виды поиска в форме (только авиа, только отели, оба вида поиска).
  • Показать логотип — показать/скрыть логотип компании Aviasales.ru.
  • Радиус скругления, px — радиус скругления углов формы поиска.
  • Вкладка по умолчанию — какая вкладка (Авиабилеты или Отели) будет открыта в форме по умолчанию.
  • Включить блок «Лучшие предложения» — отображать/скрывать блок «Лучшие предложения» под формой поиска. По умолчанию в блоке отображаются все спец. предложения. Вы можете задать конкретные города или страны вылета и прилета для блока лучших предложений. Для этого введите их названия в блоке, который появится после установки галки в чекбокс «Лучшие предложения».

  • Имя формы — название формы, отображается в списке форм.
  • Город вылета по умолчанию — город вылета, который отображается в форме поиска при заходе пользователя на страницу с формой (влияет только на авиа форму).
  • Город прилёта по умолчанию — город прилета, который отображается в форме поиска при заходе пользователя на страницу с формой (влияет только на авиа форму).
  • Дата вылета (авиа) — дата, установленная по умолчанию в одноименное поле формы поиска авиабилетов.
  • Дата обратного вылета (авиа) — дата возвращения, установленная по умолчанию в одноименное поле формы поиска авиабилетов.
  • Город/Отель по умолчанию — город или отель, которые будут указаны в форме поиска отелей, при заходе пользователя на страницу с формой.
  • Дата прибытия (отели) — дата, установленная по умолчанию в одноименное поле формы поиска отелей.
  • Дата выезда (отели) — дата выселения из отеля, установленная по умолчанию в одноименное поле формы поиска отелей.
  • Язык — язык формы.
  • Валюта — валюта, в которой отображается стоимость билетов в результатах поиска.
  • Авиабилеты. Домен — домен, который используется для поиска авиабилетов.
  • Отели. Домен — домен, который используется для поиска отелей.
  • Дополнительный маркер — с помощью дополнительного маркера в статистике удобно разделять потоки посетителей из разных источников.
  • Открывать в — выбор способа открытия результатов поиска.
  • Включить чекбокс «Показать отели» — если включено, то пока идет поиск билетов, пользователю отображается окно с прогресс-баром поиска и дополнительной информацией об отелях и ссылкой на их поиск.

  • Код для размещения на сайте — код формы, который необходимо разместить на странице сайта.

В большинстве случаев достаточно настроек, приведенных на странице. Для более тонкой настройки доступно изменение значений полей формы поиска непосредственно в её коде. Подробнее об этом смотрите в статье «Редактирование кода поисковой формы».

Для того чтобы отслеживать соотношение прибыльных кликов к общему числу переходов при размещении форм на разных сайтах или страницах, добавьте уникальный «Дополнительный маркер» и он отобразится в Статистике в Личном кабинете.

Если вам требуется уникальная форма, сверстанная полностью в вашем дизайне, используйте HTML код. Для настройки требуются знания HTML и CSS. Информация о HTML коде формы поиска находится здесь

Что такое Дополнительный маркер?

Дополнительный маркер позволяет отслеживать продажи отдельно по каждому источнику трафика/промо-материалу.

Предположим, вы используете несколько различных промо-материалов в разных частях сайт(а)ов, например: поисковый модуль в сайдбаре, ссылки на поиск авиабилетов в статьях сайта, баннер в футере и т. д. Для того, чтобы получать отдельную статистику по каждому промо-материалу, используйте параметр «Дополнительный маркер».

Статистка по дополнительным маркерам находится в меню Отчёты — Отчёт по доходам. Информацию можно сгруппировать по маркерам.

Пример использования параметра «Дополнительный маркер» в ссылке: http://www.aviasales.ru/?marker=11111.sidebar, где sidebar — это дополнительный маркер.

В конструкторе форм дополнительный маркер задается при помощи специального поля. При этом в поле нужно писать только сам маркер, без дополнительных символов. В названии маркера могут быть использованы цифры, буквы латинского алфавита и символы _, -.

Максимальная длина дополнительного маркера — 128 символов.

Редактирование кода поисковой формы

Для того чтобы отредактировать поля поисковой формы, снимете галку «Компактный код для вставки».

Код формы примет вид:

<script charset="utf-8" type="text/javascript">
window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
  window.TP_FORM_SETTINGS["44825f175a9f72b532bb3a34f42ab26e"] = {
  "handle": "44825f175a9f72b532bb3a34f42ab26e",
  "widget_name": "Поисковая форма #3",
  "border_radius": "2",
  "additional_marker": null,
  "width": 620,
  "show_logo": true,
  "show_hotels": true,
  "form_type": "avia_hotel",
  "locale": "ru",
  "currency": "rub",
 "sizes": "default",
  "search_target": "_blank",
  "active_tab": "avia",
  "search_host": "hydra.aviasales.ru",
  "hotels_host": "hotellook.ru/search",
  "hotel": "",
  "hotel_alt": "",
  "avia_alt": "",
 "retargeting": true,
  "trip_class": "economy",
  "depart_date": null,
  "return_date": null,
  "check_in_date": null,
  "check_out_date": null,
  "id": 60066,
  "marker": 78606,
  "origin": {
    "name": ""
  },
  "destination": {
    "name": ""
  },
  "color_scheme": {
    "name": "white_blue",
    "icons": "icons_blue",
    "background": "#ffffff",
    "color": "#000000",
    "border_color": "#c1c1c1",
    "button": "#1b9ed9",
    "button_text_color": "#ffffff",
   "input_border": "#ffffff"
  },
  "hotels_type": "hotellook_host",
  "best_offer": {
    "locale": "ru",
    "currency": "rub",
    "marker": 78606,
    "search_host": "hydra.aviasales.ru",
    "offers_switch": true,
    "api_url": "//www.travelpayouts.com/minimal_prices/offers.json",
    "routes": [
      {
      "one_way": false,
        "origin": {
          "name": ""
        },
        "destination": {
          "name": ""
        }
      }
    ]
  },
  "hotel_logo_host": "hotellook.ru",
  "search_logo_host": "www.aviasales.ru",
  "hotel_marker_format": "marker=",
  "hotelscombined_marker": null,
  "responsive": false,
  "height": 305
};
</script>

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

  • handle — уникальный id формы (изменять нельзя!).
  • widget_name — название формы.
  • border_radius — радиус скругления границ.
  • additional_marker — дополнительный маркер.
  • width — ширина формы.
  • show_logo — отображать логотип компании Aviasales (если значение true).
  • show_hotels — отображать вкладку поиска отелей.
  • form_type — тип формы (только авиа, только отели, смешанная).
  • locale — язык формы.
  • currency — валюта, в которой выводится цена билетов.
  • sizes — отвечает за размер формы (широкий/компактный).
  • search_target — как открывать поиск (в новом окне, в новой вкладке, в этом же окне).
  • active_tab — имя вкладки активной по умолчанию.
  • search_host — служебный параметр.
  • hotels_host — служебный параметр.
  • hotel — информация об отеле, выбранном по умолчанию.
  • id — служебный параметр.
  • marker — партнерский маркер.
  • origin — город отправления (название и IATA код. IATA код указывается буквами верхнего регистра, например MOW).
  • destination — город назначения (название и IATA код. IATA код указывается буквами верхнего регистра, например MOW).
  • trip_class — класс перелета, по умолчанию economy - эконом, чтобы в форме по умолчанию был отмечен бизнес-класс, заменить на business.
  • color_scheme — цветовое оформление формы.
  • hotels_type — служебный параметр.
  • best_offer — настройки блока «Лучшее предложение».
  • hotel_logo_host — служебный параметр.
  • search_logo_host — служебный параметр.
  • hotel_marker_format — служебный параметр.
  • hotelscombined_marker — служебный параметр.

Обратите внимание! При работе с полным кодом формы, все изменения необходимо вносить непосредственно в том месте, где данный код встроен. В случае с компактным кодом, достаточно один раз встроить код формы на страницу. После чего все изменения, вносимые на сайте travelpayouts.com, будут автоматически отображаться в форме поиска.

Автоматическое определение IATA кода города из поисковой фразы

Описание

Для облегчения и автоматизации работы партнеров мы создали специальный скрипт, который позволяет определить IATA коды городов вылета и назначения из поисковой фразы вида «Из Москвы в Лондон». Где вместо «Москвы» может стоять любой город вылета, а вместо «Лондон» любой город назначения.

Фраза передается на адрес:

https://www.travelpayouts.com/widgets_suggest_params?q=search

где параметр search — это требуемая поисковая фраза.

Например:

https://www.travelpayouts.com/widgets_suggest_params?q=Из%20Москвы%20в%20Лондон

В ответ на запрос приходит следующая информация:

{
"origin":{
"iata":"MOW",
"name":"Moscow"
},
"destination":{
"iata":"LON",
"name":"London"
}}
  • origin
    • iata — ИАТА код города отправления;
    • name — название города отправления.
  • destination
    • iata — ИАТА код города назначения;
    • name — название города назначения.

Кроме обращения по адресу https://www.travelpayouts.com/widgets_suggest_params?q= существует возможность встроить php код к себе на сайт и определять IATA при загрузки определенной страницы или выполнении заданных условий.

Php код выглядит следующим образом:

<?php
class TravelpayoutsParamsSuggester
{
static $url = 'https://www.travelpayouts.com/widgets_suggest_params?q=';
public function suggest($query) {
$url = self::$url . urlencode($query);
return self::get_json($url);
}
private function get_json($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
$answer = curl_exec($ch);
curl_close($ch);
return json_decode($answer);
}
}
$example_result = TravelpayoutsParamsSuggester::suggest("Из Москвы в Цюрих");
?> 

Где используется

Установите на странице сайта расширенную поисковую форму. Не указывайте в ней IATA коды городов отправления и назначения. На их месте укажите две переменные. Передайте в эти переменные значения IATA кодов, полученные при помощи данного скрипта. В итоге на странице отобразится поисковая форма с заполненными городами вылета и назначения, совпадающими с поисковой фразой.

Основное направление для использования подобного подхода — это контекстная реклама Google Adwords и Яндекс Директ. Создавая множество объявлений вида «Дешевый билеты из Москвы в Симферополь», «Как быстрее долететь из Владивостока в Санкт-Петербург» и им подобным, передавайте часть рекламной фразы «… из Москвы в Симферополь» данному скрипту. В результате пользователь будет попадать на страницу с поиском билетов из Москвы в Симферополь. Согласитесь, это очень удобно и полезно при поиске билетов.

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

Код страницы с виджетом определения iata кодов и формой поиска (с размещенными в ней полученными параметрами) выглядит следующим образом:

<?php
class TravelpayoutsParamsSuggester
{
static $url = 'https://www.travelpayouts.com/widgets_suggest_params?q=';
public function suggest($query) {
$url = self::$url . urlencode($query);
return self::get_json($url);
}
private function get_json($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);
$answer = curl_exec($ch);
curl_close($ch);
return json_decode($answer);
}
}
$widget_params = TravelpayoutsParamsSuggester::suggest("Из Москвы в Цюрих");
?>
<script charset="UTF-8" type="text/javascript">
window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
window.TP_FORM_SETTINGS["4677677a69f7a4291f985e1c4ce13cb7"] = {
"handle": "4677677a69f7a4291f985e1c4ce13cb7",
"widget_name": "Поисковая форма #10",
"border_radius": "2",
"additional_marker": null,
"width": 620,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "ru",
"currency": "rub",
"sizes": "default",
"search_target": "_blank",
"active_tab": "avia",
"search_host": "engine.aviasales.ru",
"hotels_host": "hotellook.ru/search",
"hotel": "",
"hotel_alt": "",
"avia_alt": "",
"id": 29551,
"marker": 16886,
"origin": {
"name": "<?php echo $widget_params["origin"]["name"] ?>",
"iata": "<?php echo $widget_params["origin"]["iata"] ?>"
},
"destination": {
"name": "<?php echo $widget_params["destination"]["name"] ?>",
"iata": "<?php echo $widget_params["destination"]["iata"] ?>"
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#c1c1c1",
"button": "#1b9ed9",
"button_text_color": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "ru",
"currency": "rub",
"marker": 16886,
"search_host": "engine.aviasales.ru",
"offers_switch": true,
"api_url": "//www.travelpayouts.com/minimal_prices/offers.json",
"routes": [
{
"one_way": false,
"origin": {
"name": ""
},
"destination": {
"name": ""
}
}]
},
"hotel_logo_host": "hotellook.ru",
"search_logo_host": "www.aviasales.ru",
"hotel_marker_format": "marker=",
"hotelscombined_marker": null,
"height": 361
};
</script>
<script charset="UTF-8" src="//www.travelpayouts.com/widgets/4677677a69f7a4291f985e1c4ce13cb7.js?v=270"></script>

Ограничения

Скрипт имеет ряд ограничений, о которых необходимо помнить:

  • скрипт не понимает опечатки;
  • поддерживается только русский язык для поисковых фраз;
  • скрипт не содержит вариантов из автокомплита.

Как встроить форму поиска в Livejournal блог

Как разместить форму поиска

  1. Создайте форму поиска в личном кабинете партнера.
  2. Скопируйте уникальный id формы из кода для размещения на сайте:formid.jpg
  3. Вставьте id формы в код:
    <lj-template name="shop" shop="aviasales_flights_hotels" api="ID_формы" width="342" height="293" />
  4. При необходимости отредактируйте ширину (параметр width) и высоту (height) формы. Максимальная ширина 940 px.
  5. Разместите данный код у себя в блоге.
  6. Не удаляйте форму поиска в личном кабинете, иначе она перестанет отображаться у вас в блоге.

Пример

Например, id нашей формы поиска 51226f99649ab833e300000a. В этом случае код для размещения в Livejournal будет выглядеть следующим образом:

<lj-template name="shop" shop="aviasales_flights_hotels" api="51226f99649ab833e300000a" width="342" height="293" />

Как вставить поисковую форму на сайт на платформе jimdo

В первую очередь войдите в настройки «Шапки» и поместите туда первую часть кода формы. На рисунке показано как войти в настройку «Шапки» сайта.

jimlla1.jpg

 

Вставьте туда следующий код:

<link rel="stylesheet" type="text/css" href="//www.travelpayouts.com/assets/widgets/partners/init.css?v=44">

После этого в самом редактировании поста, теле сайта, или любого другого блока, куда вы хотите вставить форму, необходимо переключиться в режим HTML и вставить вторую часть кода.

 

jimlla2.jpg

 

Вот пример этой формы из раздела «Партнерские инструменты» — «Поисковая форма»:

<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=102"></script>

Далее сохраните изменения, после чего форма будет отображаться.

Как встроить плагин и форму поиска на сайте с Wordpress

Подробнее о том как встроить форму поиска и виджеты в сайт под управлением Wordpress, читайте нашей инструкции.

Как встроить поисковую форму в Wix-сайт

В этой статье описывается как разместить код формы поиска на сайте, созданном на платформе Wix.

1. Создайте и настройте форму поиска в личном кабинете партнерской программы travelpayouts.com.

2. Войдите в редактор страницы сайта в Wix. В меню слева нажмите кнопку «Добавить». В открывшемся меню выберите пункт «More». Откроется меню, в котором необходимо выбрать вариант «HTML Code».

3. Откроется форма для добавления html-кода на страницу сайта. Чтобы добавить код формы поиска переключите режим на «Code».

4. В поле "Add your code here" добавьте следующий код:

<html> 
<body>
<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>
</body>
</html>

где вместо

<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>

вставьте код вашей поисковой формы из личного кабинета партнерской программы travelpayouts.com.

11.jpg

В результате «Настройки HTML» у вас будут выглядеть так:

Нажмите кнопку «Обновить». После этого поисковая форма отобразится на странице вашего сайта.

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

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