Встраивание формы поиска на собственный сайт [HTML, IFRAME]

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

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

>> Скачать последнюю версию RezOn формы <<

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

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

Html разметку из файла с формой \src\html\air\form.html необходимо скопировать (или подключить) в блок контейнера, размещенный на странице Вашего сайта.

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

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

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

<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, то повторно её подключать не нужно )

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

$(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!

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

$(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')]  // Дата вылета обратно
        }
    });
});

Пример кода полной страницы со всеми подключенными стилями и скриптами можно просмотреть здесь.

При подключении 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 и Joomla.

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

Формирование URL: https://{ДОМЕН}/{ЯЗЫК}/IFrame?t={ТИП} , где ДОМЕН — поддомен, на котором подключен проект RezOn ЯЗЫК — алиас языка, например ru, ua или en ТИП — avia - авиа форма, railway - ЖД форма, aviaoffers - модуль авиа спецпредложений, bus -форма поиска автобусов, 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 формы поиска, разместите этот код в удобном месте на Вашем сайте

<!-- Установите блок в удобном месте -->
<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!

PreviousИнтеграция NextУстановка онлайн модуля на проекты субагентов

Last updated 2 years ago