Новости туризма

25.03.2016
С 5 марта в «ассортимент», предлагаемый организованным российским туристам, вернулся китайский курортный остров Хайнань с прямыми перелетами.
23.03.2016
Круиз на теплоходе «И.А. Крылов» от компании Мостурфлот
21.03.2016
С 10 по 20 мая пройдет уникальный для российского рынка рейс. Впервые теплоход класса люкс «Александр Грин» совершит круиз по реке Ока.
все новости
Техническое описание

Поисковый модуль — техническое описание

см. также общую информацию

Мы предлагаем несколько способов встраивания поискового модуля на Ваш сайт:

  1. Javascript
  2. HTML форма
  3. HTML форма + результаты поиска на той же странице IFRAME
  4. XML-сервис
  5. HTML-форма + XML-сервис

1. Встраивание кода поисковой формы в виде ссылки на javascript

Этот способ самый простой, достаточно вставить на любую страницу Вашего сайта одну строчку. Смотрите примеры форм поиска:Минимальная Вертикальная Полная

Вам только надо подставить значение client_id, выданное Вам в отделе продаж.

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

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

2. Встраивание HTML-кода поисковой формы

Этот способ позволяет изменить дизайн поисковой формы - например, отказаться от некоторых элементов управления, сделать поисковую форму по определённой стране и т.п.

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

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

Подробно рассмотрим два примера формы. Сначала небольшая форма:

  

HTML-код формы:

<script src="/touronline/scripts/4/common.js" charset="windows-1251"></script> 
<form id="exat" method="post"> 
<select id="exatCountryCtrl" disabled="1"></select> 
<select id="exatResortCtrl" disabled="1"></select> 
<input type=button id="exatSubmitCtrl" value="Найти туры" disabled="1"> 
</form> 
<script> 
var esf = new ExatSearchForm('exat', 'персональный_client_id') 
esf.initForm(); 
</script>

А теперь полное описание всех возможных элементов формы, с комментариями после описания:

Вид всех элементов формы:

HTML-код элементов формы:

<script src="/touronline/scripts/4/common.js" charset="windows-1251"></script> 
<script> var esf = new ExatSearchForm('exat', 'персональный_client_id') </script> 

<form id="exat" method="post">
Пункт отправления 
<select id="exatDepartureCtrl" disabled="1"></select>
Тип тура 
<select id="exatTourTypeCtrl" multiple="1" size="3" disabled="1"></select>
Страна 
<select id="exatCountryCtrl" disabled="1"></select>
Курорт 
<select id="exatResortCtrl" multiple="1" size="4" disabled="1"></select>
  <input type="checkbox" id="exatResortFilterCtrl" disabled="1" />
  <input type="checkbox" id="exatTransportRequiredCtrl" checked="1" disabled="1" />

Дата начала тура

Элементы управления "дата начала тура" доступны в двух вариантах:

  • Выпадающее меню выбора даты.
  • Текстовая строка с выпадающем календарем.

В одной форме не могут сочетаться элементы разных вариантов.

Если в качества элемента управления "даты начала тура" выбрана текстовая строка с выпадающем календарем, то следует подключить дополнительные скрипты:

<link href="/extlib/jquery/datepicker/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="/extlib/jquery/datepicker/jquery.min.js"></script>
<script src="/extlib/jquery/datepicker/jquery-ui.min.js"></script>
<script src="/extlib/jquery/datepicker/jquery.ui.datepicker-ru.js"></script>

Подключение этих скриптов следует сделать до подключения скрипта

<script src="/touronline/scripts/4/common.js" charset="windows-1251"></script>

 

Дата начала тура 
с    по  
<select id="exatMinDateCtrl" disabled="1"></select>
<select id="exatMaxDateCtrl" disabled="1"></select>
Дата начала тура 
с    Выберите дату  
по  Выберите дату
<input type="text" id="exatMinDateCtrl" value="Все"/> <img id="calDisable1" src="/touronline/img/icons/calendarDisable.png" style=" width: 16px;height: 16px; padding-top: 4px;"/>
<input type="text" id="exatMaxDateCtrl" value="Все"/> <img id="calDisable2" src="/touronline/img/icons/calendarDisable.png" style=" width: 16px;height: 16px; padding-top: 4px;"/>
Количество ночей
от    до  
<select id="exatMinNightsDurationCtrl" disabled="1"></select> 
<select id="exatMaxNightsDurationCtrl" disabled="1"></select>
Категория 
<select id="exatCategoryCtrl" multiple="1" size="3" disabled="1"></select>
Питание 
<select id="exatFoodTypeCtrl" multiple="multiple" size="3" disabled="1"></select>
Отель 
<select id="exatHotelCtrl" multiple="1" size="5" disabled="1"></select>
Размещение 
<select id="exatAccommodationCtrl" disabled="1"></select>
Возраста детей 
<input type="text" id="exatAgeCtrl" disabled="1" />
Стоимость 
от    до   
<input type="text" id="exatMinAmountCtrl" disabled="1" /> 
<input type="text" id="exatMaxAmountCtrl" disabled="1" /> 

<select id="exatCurrencyCtrl" disabled="1"></select>
Услуги 
<select id="exatServiceCtrl" multiple="1" size="8" disabled="1"></select>
на странице:  <select id="exatLimitCtrl" disabled="1"></select>
  <input type="button" id="exatSubmitCtrl" value="Найти туры" disabled="1" /> 
<input type="button" id="exatResetCtrl" value="Очистить форму" disabled="1" />
</form> 
<script>esf.initForm()</script>

Комментарии к примеру:

Первая строка - обязательная ссылка на скрипт common.js для доступа к возможностям поисковой формы.

Вторая строка - создание объекта ExatSearchForm. Первые два аргумента - обязательны, это id тега form, с которым будет работать объект (на странице может быть несколько форм с разными id), и значение client_id, выдаваемое Вам в отделе продаж. Третий, необязательный параметр - хэш со значениями по умолчанию (см. комментарии в файле common.js).

После закрытия тега form нужно проинциализировать поисковую форму с помощью вызова метода initForm().

Ни один из элементов управления на поисковой форме не является обязательным. Например, Вы можете отказаться от элемента "пункт отправления", жёстко прописав код конкретной точки в конструкторе. В приведённом выше примере указан код Москвы, 64.

Если в форме встречаются элементы управления с одним из зарезервированных id c префиксом, совпадающим с id формы, то методы объекта ExatSearchForm будут соответствующим образом манипулировать их содержимым. В примере выше после выбора страны автоматически заполняется список курортов, т.к. id элемента управления со списком курортов - "exatResortCtrl", где "exat" - это id формы, а "ResortCtrl" - зарезервированный идентификатор.

Обращаем ваше внимание на то, что элементы управления "пункт отправления", "страна", "курорт", "дата отъезда" и "количество дней" взаимосвязаны. При выборе "пункта отправления" в списке стран остаются лишь те страны, в которые есть вылеты из выбранного пункта отправления. В свою очередь, при выборе страны, список курортов также обновляется, показываются только курорты, принадлежащие к выбранной стране и в которые есть вылеты из указанного пунка отправления. Есть и другие взаимосвязи. Поэтому, если Вы хотите сохранить удобство для Ваших клиентов, рекомендуем оставить элементы управления, близкие к стандартной форме, ссылка на которую указана в способе 1.

Дополнительные комментарии можно посмотреть в тексте самого скрипта common.js.

2.1. HTML форма + результаты поиска на той же странице IFRAME

Этот способ аналогичен предыдущему пункту 2. Отличается только выводом результатов поиска на той же странице.

Использовать iframe. Это бесплатно, но позволяет открывать в том же окне только результаты поиска. Описание туров/отелей будут открываться в новом окне.

Пример небольшой формы:

Найти туры

HTML-код формы:

<script src="/touronline/scripts/4/common.js" charset="windows-1251"></script> 
<form id="exat" method="post"> 
<select id="exatCountryCtrl" disabled="1"></select> 
<select id="exatResortCtrl" disabled="1"></select> 
<input type=button id="exatSubmitCtrl" value="Найти туры" disabled="1"> 
<p><iframe name="result" height="1000" width="1000" frameborder="0" seamless ></iframe></p> </form> 
<script> 
var esf = new ExatSearchForm('exat', 'персональный_client_id') 
esf.nextNewWindowName = 'result';
ExatSearchForm.prototype.generateNewWindowName = function()
{
return 'result';
}
ExatSearchForm.prototype.submitForm = function(openNewWindow, customAction)
{
if (!this.checkParameters()) {
return false; 

var isPost = this.isAppartTourTypeMask(); 
var holder=window.document.location.protocol+'//'+window.document.location.hostname+'/';
this.form.action = (customAction ? customAction : this.getSubmitPrefix()) 
+ this.getSubmitSuffix((isPost)?[]:this.getSubmitData())
+ (typeof(this.showTechInfoRequired) != 'undefined' && this.showTechInfoRequired ? '&show_tech_info=on' : '')
+'&holder='+str2code(holder) //escape(window.document.location)
+ ((this.params.last24)?'&last=24':'')
;
var params=getSearchParams();
// результаты поиска отображаются в том же окне при условии
if(this.defaults.useCurrentWindow){
openNewWindow=false;
}
if(openNewWindow) {
var wnd = window.open('', this.nextNewWindowName, this.params['newWindowParams']);
//wnd.document.write('Пожалуйста, подождите. Идет поиск туров...'); wnd.focus(); 
this.form.method='post';
this.form.target = this.nextNewWindowName;
this.nextNewWindowName = this.generateNewWindowName();
}
if (isPost) {
var submitData = this.getSubmitData();
var sumbitDataContainer = document.createElement('span');
this.form.appendChild(sumbitDataContainer);
for (var i in submitData) {
var e = document.createElement('input');
e.setAttribute('type', 'hidden');
e.setAttribute('name', submitData[i][0]);
e.setAttribute('value', submitData[i][1]);
sumbitDataContainer.appendChild(e);
}
}
this.form.submit();
if (isPost && sumbitDataContainer) {
this.form.removeChild(sumbitDataContainer);
}
}
esf.initForm(); 
</script>

Как видно из приведенного кода,был добавлен iframe <p><iframe name="result" height="1000" width="1000" frameborder="0" seamless ></iframe></p>

В теге iframe и выводятся результаты поиска на той же странице. Перед поиском в форме пустота после формы объясняется тем, что iframe занимает "физическое" пространство на странице.

В iframe есть параметры: width и height. Именно по этим параметрам задается ширина и высота тега iframe(По умолчанию указано 1000px).

3. Создание своего варианта поиска туров с помощью XML-сервисов

Если Вы хотите получить максимальный контроль над внешним видом поискового модуля и выводом результатов поиска, то можете подписаться на дополнительную услугу "XML-поиск туров", включающую несколько веб-сервисов - xml_tours, xml_refs и xml_tour_id. Подробное описание можно найти на странице XML-сервисов.


4. HTML-форма + результаты в виде XML

Задача создания своей поисковой формы не такая простая, как может показаться на первый взгляд. Поэтому Вам может подойти "смешанный" вариант. Вы можете встроить обычную HTML-поисковую форму, но самостоятельно вызывать метод submitForm, передавая url своего скрипта, который будет добавлять к запросу логин и пароль и посылать его уже на наш сайт. Полученный XML-ответ Вы можете обрабатывать, как Вам удобно. Для использования такого способа также необходимо подключить дополнительную услугу xml_tours. Подробное описание можно найти на странице XML-сервисов