Встраивание формы поиска на собственный сайт [HTML, IFRAME]
Last updated
Last updated
На страницу Вашего сайта встраивается HTML+CSS+JS формы поиска. После заполнения формы открывается новая вкладка с результатами выдачи. Дальнейшие этапы бронирования происходят на проекте 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>Видеоинструкции по установке онлайн модуля для сайтов на 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
Скрипт для итеграции 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!