Перейти к основному контенту

Встраивание на сайт

ОСтраница модуля онлайн-бщронирования

Ссылка на тестовую страницу модуля бронирования как пример интеграции: https://online-demo.resortshop.ru/new/. Используйте ссылку на ваш модуль, еслила он уже подключен, чтобы получить актуальные для вас данные.

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

КВнутри фажйла есть пути, включающие строку v_XXX, гдыйе XXX - версия модуля. При обновлении версия будет меняться, поэтому эти пути нужно будет обновлять на сайте.

Блоки для вставки на страницу

<!-- точка входа приложения -->
<div id="appONL4"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Внутри div можно расположить временное содержимое, которое будет отображаться до загрузки модуля.

Обязательные глобальные переменные

window.onlBaseURL = 'http://online-demo.resortshop.ru/';
window.onlAPIKey = '...'; // обязательно определить
window.onlDivision = '...'; // обязательно определить

При загрузке страницы для пользователя автоматически создается сессия. Сессия имеет ограниченный срок жизни: 30-60 минут в зависимости от действий пользователя.

Дополнительные переменные

  • window.onlExternalId - внешний идентификатор, сохраняется в брони как lead_id; обычно используется для связки с CRM.
  • window.onlPromoPage - ключ промо-страницы.

Переопределение основных цветов

window.onlTheme = {
  primary: "#007748",
  negative: "#c10015",
  warning: "#f2c037",
};

Значения поиска по умолчанию

window.onlDefaults = {
  dateSelectorOpen: true, // открытие окна выбора дат после загрузки модуля
  dateIn: "17.11.2024", // дата заезда по умолчанию
  dateInDays: 7, // смещение даты заезда на X дней от текущей даты
  days: 7, // дней проживания от dateIn или dateInDays
  rooms: [
    {
      adults: 1, // количество взрослых в номере
      children: [10], // возраст детей через запятую: [10, 6, 12]
    },
  ],
  autoSearch: true, // автоматический поиск номеров после загрузки модуля
  autoSelectSingleTariff: true, // автоматический выбор тарифа, если доступен только один тариф
};

Callback для действий пользователя

window.onlCallback позволяет задать функцию, которая вызывается при определенных действиях пользователя. Функция принимает три параметра: идентификатор сеанса, код действия и данные.

Функцию можно использовать для связи с системой сквозной аналитики, CRM и другими системами. Действия: search, addToCart, deleteFromCart, confirm.

window.onlCallback = (session, action, data) => {
  console.log("CallBack", {
    session: session,
    action: action,
    data: data,
  });
};

URL-параметры

  • dateIn - дата заезда в формате дд.мм.гггг.
  • dateOut - дата выезда в формате дд.мм.гггг.
  • dateSelectorOpen - открытие окна выбора дат после загрузки модуля: true или false.
  • autoSearch - автоматический поиск номеров после загрузки модуля: true или false.
http://online-demo.resortshop.ru/new/?dateIn=20.01.2024&dateOut=30.01.2024&autoSearch=true

URL-параметры имеют приоритет над глобальными переменными, описанными выше.

Страница оплаты счетов, выставленных вне онлайн-бронирования

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

Пример ссылки:

https://online-demo.resortshop.ru/bill/?bill=111&pin=111111

Модуль оплаты счетов должен располагаться на отдельной странице сайта:

    по
  • /new/аналогии —со остранлаицейн- бронирование;
    • я.
  • /bill/ —Для оплата счетов;
  • /registration/ — предварительная регистбрацжения.

Файлы модуля нужно доберутся авиз папки dist. В путях есть версия вида v_XXX. При обновлении модуля версия меняется, поэтому ссылки на cssпредоставляемые скрипты, CSS-стили и js на сайшрифте нужно обновить.

Гло

Обязательные переменные нужни блоки

определить н

На странице должны забыть опускределены window.onlDivision, window.onlBaseURL, window.onlAPIKey, а модуля.

Онлтайн-бронирование

Пример страницы: https://online-demo.resortshop.ru/new/

Подключениже файблов

ки:

<link!-- href="/new/v_1.5.6/css/app.css"точка rel="stylesheet"входа приложения -->
<script defer src="/new/v_1.5.6/chunk-vendors.js"></script>
<script defer src="/new/v_1.5.6/app.js"></script>

Блоки на странице

<div id="appONL4"appONL4Bill"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Обя

По умолчанию пользователью доступны все типы оплаты, у которых стоит галочка "Оплата внешних счетов", если для них не задано огреманиченныие

<script>
  window.onlBaseURL = "https://online-demo.resortshop.ru";
  window.onlAPIKey = "...";
  window.onlDivision = "...";
</script>

Дополнительные настройки

<script>
  window.onlExternalId = "'..."'; // внешний идентификатор, сохраняется в брони как lead_id

window.onlPromoPageonlBillPayments = [
  "...8a0cba65-e87a-4141-a54c-a5a8250c0a51",
  "a19ad18e-3be7-4f62-a0ef-27407cd4654f"
]; // использование определенных типов оплаты; ключ типра омо-сплатраницы берется из админки

window.onlThemeonlBillTheme = {
  primary: "#007748"#1976d2", // основной цвет
  background: "white", // цвет заднего фона
  negative: "#c10015", warning:// "#f2c037"
  };

  window.onlDefaults = {
    dateSelectorOpen: true,
    dateIn: "17.11.2024",
    dateInDays: 7,
    days: 7,
    rooms: [
      {
        adults: 1,
        children: [10]
      }
    ],
    autoSearch: true,
    autoSelectSingleTariff: true
  };

  window.onlCallback = function (session, action, data) {
    console.log("ONL callback", session, action, data);
  };
</script>

Доступныцве действия для onlCallback: search, addToCart, deleteFromCart, confirm.

URL-параметры

URL-параметры имеют приоедупритет нажд значениями из window.onlDefaults.

https://online-demo.resortshop.ru/new/?dateIn=20.01.2024&dateOut=30.01.2024&autoSearch=true};

ОплСтратница модуля предварительной регисчетоврации

Пример сСсылка на предвари:

тельную 
https://online-demo.resortshop.ru/bill/?bill=111&pin=111111
регистрацию

Псоздключается в Здравнице файлов

<link href="/bill/v_1.5.1/css/app.css" rel="stylesheet">

<script defer src="/bill/v_1.5.1/chunk-vendors.js"></script>
<script defer src="/bill/v_1.5.1/app.js"></script>

Блоки на странице заявки или может приходить автоматически на почту за несколько дней до заезда.

Модуль предварительной регистрации должен располагаться на отдельной странице сайта по аналогии со страницей бронирования. Для отображения модуля нужно добавить ссылки на предоставляемые скрипты, CSS-стили и шрифт.

Обязательная переменная и блоки

На странице должна быть определена переменная window.onlBaseURL, а также блоки:

<!-- точка входа приложения -->
<div id="appONL4Bill"appONL4Reg"></div>

<!-- всплывающие уведомления и диалоговые окна -->
<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Обязательные переменные

<script>
  window.onlBaseURL = "https://online-demo.resortshop.ru";
  window.onlAPIKey = "...";
  window.onlDivision = "...";
</script>

Дополнительные настройки

<script>
  window.onlExternalId = "...";

  window.onlBillPayments = [
    "8a0cba65-e87a-4141-a54c-a5a8250c0a51",
    "a19ad18e-3be7-4f62-a0ef-27407cd4654f"
  ];

  window.onlBillTheme = {
    primary: "#1976d2",
    background: "white",
    negative: "#c10015"
  };
</script>

Предварительная регистрация

Пример ссылки для предварительной регистрации:

https://online-demo.resortshop.ru/registration/?uId=0903b1d6-f820-465c-b066-4792d1c7bd4f

ПодключЦвента ие формайловт дат

<link href="/registration/v_1.7.2/css/chunk-vendors.css" rel="stylesheet">
<link href="/registration/v_1.7.2/css/app.css" rel="stylesheet">

<script defer src="/registration/v_1.7.2/chunk-vendors.js"></script>
<script defer src="/registration/v_1.7.2/app.js"></script>

Блоки на странице

<div id="appONL4Reg"></div>

<div id="onl4-wrapper">
  <div id="appONL4Modals"></div>
</div>

Обязательная переменная

<script>
  window.onlRegBaseURL = "https://online-demo.resortshop.ru";
</script>

Дополнительные настройки

<script>
  window.onlRegThemeColor = {
  primary: "#1976D2",
  secondary: "#ffffff",
  error: "#FF5252",
  warning: "#ff6e6e",
};

window.onlRegDateFormat = "lll";

  window.onlRegPreCheckHideFields = ["cure", "nutrition", "seat_extra"];
</script>

ФПоддерживаемые форматы дат описаны в документации Moment.js: https://momentjs.com/docs/#/displaying/format/.

Изображения, извлеченные из PDF

Изображение из PDF image-01-obj-46.png
image-01-obj-46.png · 131x63 · PNG
Изображение из PDF image-02-obj-59.jpg
image-02-obj-59.jpg · 1653x786 · JPEG
Изображение из PDF image-03-obj-60.png
image-03-obj-60.png · 947x111 · PNG
Изображение из PDF image-04-obj-65.jpg
image-04-obj-65.jpg · 1652x794 · JPEG
Наверх