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

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

Общие правила подключения модулей

Каждый модуль размещается на отдельной странице сайта:

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

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

Глобальные переменные нужно определить на странице до запуска модуля.

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

Пример страницы: 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"></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.onlPromoPage = "...";  // ключ промо-страницы

  window.onlTheme = {
    primary: "#007748",
    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>

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

<div id="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 = "...";

  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/.

Наверх