# Інтеграція форми пошуку на власний сайт \[HTML, IFRAME]

## 1. Html поисковая форма (рекомендуется)

На страницу Вашего сайта встраивается HTML+CSS+JS формы поиска. После заполнения формы открывается новая вкладка с результатами выдачи. Дальнейшие этапы бронирования происходят на проекте RezOn.

| <img src="https://827122301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGVHTd4I_c9f2PfJ3fE%2F-Lv5-EzvHQ_DAp46CWDa%2F-Lv5-PNeK2iDhZMw7AfJ%2Fscrin1.jpg?alt=media&#x26;token=2ff389e6-9092-46b5-a86b-cf4cc640fca2" alt="" data-size="original"> | ![](https://827122301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGVHTd4I_c9f2PfJ3fE%2F-Lv5-EzvHQ_DAp46CWDa%2F-Lv5-ZIGPSgJf1uAIlTY%2Fscrin2.jpg?alt=media\&token=7b80c51b-5855-49c7-92cc-9c444acc68b2) | ![](https://827122301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGVHTd4I_c9f2PfJ3fE%2F-Lv5-EzvHQ_DAp46CWDa%2F-Lv5-gDeY8Ju3MzcX_NY%2Fsc03.jpg?alt=media\&token=4a6703e1-d0d6-49bd-9197-fe5d76f2ce4b) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

## [>> Скачать последнюю версию RezOn формы <<](https://github.com/rezon-universal/form/tree/master)

При необходимости Вы можете изменять стили/скрипты/разметку формы.

* [Демо формы поиска авиа билетов](https://github.com/rezon-universal/form/blob/master/demo/air/demo.html)
* [Демо формы поиска ЖД билетов](https://github.com/rezon-universal/form/blob/master/demo/rail/demo.html)
* [Демо формы поиска автобусов](https://github.com/rezon-universal/form/blob/master/demo/bus/demo.html)
* [Демо формы поиска отелей](https://github.com/rezon-universal/form/blob/master/demo/hotels/demo.html)
* [Демо формы оформления страховки](https://github.com/rezon-universal/form/blob/master/demo/insurances/demo.html)

Для подключения формы необходимо произвести следующие действия:

Html разметку из файла с формой [`\src\html\air\form.html`](https://raw.githubusercontent.com/rezon-universal/form/master/src/html/air/form.html) необходимо скопировать (или подключить) в блок контейнера, размещенный на странице Вашего сайта.

Пример контейнера html кода:

```markup
<div id="rezon-forms">
    <div class="rez-forms container">
        <!-- Содержимое файла с разметкой *.html -->
    </div>
</div>
```

Странице, где размещается форма, необходимо подключить файлы стилей и скриптов:

```markup
<link href="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/css/rezon-form.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/typeahead.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/vuejs-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rezon-universal/form@latest/assets/js/rezon-form.min.js"></script>
```

*(обратите внимание, что если у вас на странице уже подключена какая-либо библиотека, например jQuery, то повторно её подключать не нужно )*

В собственный файл скриптов (или прямо на странице) добавьте скрипт инициализации формы

```javascript
$(document).ready(function(){
    $("#rezon-forms").rezOnForm({
        projectUrl: "https://YOUR_DOMAIN_FOR_REZON.COM/",
        defaultLang: "ru", // ua|ru|en
        formType: "avia", // avia|railway|buses|bus|hotel|insurances,
        formTarget: "_blank" // '_blank' - загружает поисковую выдачу в новое окно браузера., '_self' - в текущее окно.
    });
});
```

**Внимание!** Замените `YOUR_DOMAIN_FOR_REZON.COM` на url адрес вашего проекта RezOn!

Для авиа формы есть возможность предустановить поля формы

```javascript
$(document).ready(function () {
    $("#rezon-forms").rezOnForm({
        projectUrl: "https://YOUR_DOMAIN_FOR_REZON.COM/",
        defaultLang: "ru",
        formType: "avia",
        avia: {
            defaultRouteType: 'roundtrip', // [oneway/roundtrip/route]
            defaultAirportFrom: 'IEV',     // IATA код или строка поиска аэропорта отправления
            defaultAirportTo: 'TLV',       // IATA код или строка поиска аэропорта прибытия
            defaultDateThere: [new Date('2020-05-03')], //Дата вылета туда
            defaultDateBack: [new Date('2020-05-11')]  // Дата вылета обратно
        }
    });
});
```

&#x20;Пример кода полной страницы со всеми подключенными стилями и скриптами можно просмотреть [здесь](https://github.com/rezon-universal/form/blob/master/demo/air/demo.html).\
[![](https://827122301-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGVHTd4I_c9f2PfJ3fE%2F-LGVHXViphSNPSB8kh36%2F-LGVHYs3uYIGzizQKHLG%2F2018-02-23_13h55_03.png?generation=1530623857374459\&alt=media)](https://github.com/rezon/backoffice/tree/5787a746c919d08b36b4d0b1c53d0248227c7ef4/assets/2018-02-23_13h55_03.png)

При подключении html формы поиска страховок можно задать минимальную дату начала страховки и минимальный страховой период:

```
<script type="text/javascript">
    $(document).ready(function(){
        $("#rezon-forms").rezOnForm({
            projectUrl: "https://test.rezonuniversal.com/",
            defaultLang: "ru",
            formType: "insurances",
            formTarget: "_blank",
            insurances: {
                DaysShift: 10,     // минимальная дата начала
                MinimumPeriod: 5   // минимальный период
            }
        });
    });
</script>
```

## 2. iframe поисковой формы

Видеоинструкции по установке онлайн модуля для сайтов на [WordPress](https://www.youtube.com/watch?v=RNFwogpo3dI\&feature=youtu.be) и [Joomla](https://www.youtube.com/watch?v=ZUTouHRDL4I).

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

**Формирование URL**:\
`https://{ДОМЕН}/{ЯЗЫК}/IFrame?t={ТИП}` , где\
`ДОМЕН` — поддомен, на котором подключен проект RezOn `ЯЗЫК` — алиас языка, например ru, ua или en\
`ТИП` — **avia** - авиа форма,                                                                                                                                               **railway** - ЖД форма,                                                                                                                                             **aviaoffers** - модуль авиа спецпредложений,                                                                                                      **bus** -форма поиска автобусо&#x432;**,                                                                                                                         hotels** - форма поиска отелей,                                                                                                                                                     **insurances** - форма оформления страховки

**Примеры URL фрейма**\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=avia` — авиа форма\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=railway` — ЖД форма\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=bus` -форма поиска автобусов\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=hotels` — форма поиска отелей\
`https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=insurances` — форма поиска страховок

Для авиа формы есть возможность предустановить поля формы:

| Параметр         | Описание                                                                                     |
| ---------------- | -------------------------------------------------------------------------------------------- |
| tab              | \[oneway/roundtrip/route] - тип вкладки по-умолчанию                                         |
| from\_iata       | IATA код аэропорта вылета                                                                    |
| to\_iata         | IATA код аэропорта прибытия                                                                  |
| book\_from\_date | Дата вылета туда в формате dd.MM.yyyy                                                        |
| book\_to\_date   | Дата вылета обратно в формате dd.MM.yyyy                                                     |
| target           | \[\_blank/\_parent/\_self] - отображать результаты поиска в новом окне/текущем окне/в iframe |

<https://your_domain_for_rezon.com/ua/IFrame?t=avia&tab=oneway&from_iata=iev&to_iata=par&book_from_date=09.03.2024>

Скрипт для итеграции IFrame формы поиска, разместите этот код в удобном месте на Вашем сайте

```markup
<!-- Установите блок в удобном месте -->
<div id="galileoForm"></div>

<script type="text/javascript">
    //Ссылка на iframe, установите ссылку на свой проект RezOn!
    var galileoProject = "https://YOUR_DOMAIN_FOR_REZON.COM/ru/IFrame?t=avia"; 
    (function(d) {
        d.head.appendChild((function() {
            var s = d.createElement('script');
            s.src = 'https://bo.rezonuniversal.com/Scripts/iframe.js';
            s.defer = true;
            return s;
        })());
    })(document);
</script>
```

**Внимание!** Замените `YOUR_DOMAIN_FOR_REZON.COM` на url адрес вашего проекта RezOn!