Виджет онлайн-бронирования (КУС) — различия между версиями

Материал из КинтВики
Перейти к: навигация, поиск
(→‎Параметры работы)
(→‎Настройка сайта)
Строка 31: Строка 31:
 
=== Настройка сайта ===
 
=== Настройка сайта ===
 
* В настройках публикации выполняется действие "Сформировать страницу", итоговый файл сохраняется где-нибудь локально.
 
* В настройках публикации выполняется действие "Сформировать страницу", итоговый файл сохраняется где-нибудь локально.
−
* Полученный файл загружается на веб-сервер в папку, доступную из сети Интернет.
+
* Полученный файл загружается на веб-сервер в папку, доступную из сети Интернет. Название такой папки зависит целиком от используемого веб-сервера и хостинга, но как правило, это <code>public_html</code>, <code>document_root</code>.
 
* Вставляется специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
 
* Вставляется специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
  

Версия 10:38, 23 декабря 2021

Демонстрационная версия

Версия для ознакомления доступна по адресу https://www.kint.ru/products/kus/booking/.

Работает с информационной базой «Кинт: Управление санаторием».

Описание

Виджет предназначен для создания заявок на бронь в базе «Кинт: Управление санаторием» через форму, размещенную на веб-сайте санатория или отеля. Все созданные заявки отображаются в форме интерфейс «Менеджер продаж», «Шахматке гостиницы» и журнале «Заявки на бронь».

Номера, доступные для бронирования

На сайте онлайн-бронирования «Кинт» отображаются номера, добавленные в онлайн-квоту «Кинт API».

Требования

  • Выполненная внешняя публикация на веб-сервере, включая веб-сервис API.
  • Веб-сайт с любой CMS, позволяющей вставлять HTML-код в страницы.
  • (опционально) HTTPS-сертификат на основном веб-сервере, и веб-сервере с публикацией (самоподписанный не подходит!)

Добавление виджета на сайт

Подготовка ИБ

Перед тем, как выполнять встраивание виджета на сайт, необходимо сделать несколько несложных действий.

  • Произвести публикацию базы на веб-сервере, включив так же сервис KintAPI. Подробнее об этом можно прочитать здесь: 1С8:Публикация информационной базы 1С на веб-сервере. Так же необходимо убедиться, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к сети Интернет) страницей авторизации в базе по запросу к адресу.
  • В интерфейсе "Администратора системы" заполнить настройки публикации базы: логин, пароль любого пользователя (из под которого будет осуществляться взаимодействие с апи; можно предоставить пользователю минимальный набор прав, без возможности запускать любые клиенты), так же необходимо заполнить отдельно адрес публикации для онлайн-бронирования, включая протокол веб-ресурса (пример: https://online.kint.ru/kus_demo/).

Настройка сайта

  • В настройках публикации выполняется действие "Сформировать страницу", итоговый файл сохраняется где-нибудь локально.
  • Полученный файл загружается на веб-сервер в папку, доступную из сети Интернет. Название такой папки зависит целиком от используемого веб-сервера и хостинга, но как правило, это public_html, document_root.
  • Вставляется специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.

На месте размещения элемента помещается тег iframe со ссылкой на опубликованную страницу.

Пример отдельной страницы, на которой будет размещено онлайн-бронирование: 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" data-booking-url="https://online.kint.ru/booking.html" data-query-selector="body">
            document.addEventListener('DOMContentLoaded', function() {
                let dataset = document.querySelector("[data-booking-url]").dataset;

                let bookingUrl = dataset.bookingUrl;

                let iframe = document.createElement("iframe");
                iframe.src = bookingUrl;
                iframe.frameBorder = 0;
                iframe.allowFullscreen = "true";

                document.querySelector(dataset.querySelector).appendChild(iframe);

                let ignoreStateUpdate = false;
                let eventHandlers = {
                    stateUpdate: function(data, frame)
                    {
                        if (ignoreStateUpdate == true) return;
                        if (data.step == 'preloader') data.height += 250;
                        frame.style.height = (data.height + 250) + "px";
                    }
                };

                window.addEventListener('message', function(e)
                {
                    if (e.source != iframe.contentWindow) return;

                    let data = JSON.parse(e.data);
                    if (eventHandlers[data.eventName])
                    {
                        eventHandlers[data.eventName](data, iframe);
                    }
                }, false);
            });
        </script>
        <style>
            html {
                height: 100%;
            }
            
            body {
                margin: 0;
                height: 100%;
            }

            iframe {
                width: 99.6%;
                height: 99.6%;
            }
        </style>
    </head>

    <body></body>
</html>

Пример для интеграции (CMS): 

<script type="text/javascript" data-booking-url="https://online.kint.ru/booking.html" data-query-selector="#booking">
    document.addEventListener('DOMContentLoaded', function() {
        let dataset = document.querySelector("[data-booking-url]").dataset;

        let bookingUrl = dataset.bookingUrl;

        let iframe = document.createElement("iframe");
        iframe.src = bookingUrl;
        iframe.frameBorder = 0;
        iframe.allowFullscreen = "true";

        document.querySelector(dataset.querySelector).appendChild(iframe);

        let ignoreStateUpdate = false;
        let eventHandlers = {
            stateUpdate: function(data, frame)
            {
                if (ignoreStateUpdate == true) return;
                if (data.step == 'preloader') data.height += 250;
                frame.style.height = (data.height + 250) + "px";
            }
        };

        window.addEventListener('message', function(e)
        {
            if (e.source != iframe.contentWindow) return;
            
            let data = JSON.parse(e.data);
            if (eventHandlers[data.eventName])
            {
                eventHandlers[data.eventName](data, iframe);
            }
        }, false);
    });
</script>
<style>
    #booking iframe
    {
        width: 99.6%;
        height: 250px;
    }
</style>
<div id="booking"></div>

Настройка веб-сервера

Если веб-сайт размещается на домене example.com, а публикация - на data.example.com, потребуется внести некоторые дополнительные изменения в конфигурацию веб-сервера.

  • Настроить CORS таким образом, чтобы браузеру было разрешено общаться с поддоменом базы (на основном домене настраивается на http://data.example.com (включая протокол)), и наоборот. Можно воспользоваться данной статьей для первичной настройки. Вместо знака звёздочки, должен быть указан адрес публикации.
  • Если основной веб-сайт использует SSL/TLS-шифрование (HTTPS), аналогичную настройку необходимо произвести и на публикации, иначе браузер откажется делать выполнять запрос для получения страницы без запуска в специальном режиме, что неприемлемо в штатном режиме работы.

Отметим, что необходим полностью валидный сертификат, выданный проверенным удостоверяющим центром, который не придётся добавлять в исключения при открытии страницы.

  • Можем посоветовать рассмотреть вариант использования сертификата от Let's Encrypt. Они выдают бесплатные сертификаты сроком действия 3 месяца (потребуется настроить задачу в планировщике системы на автоматический перевыпуск сертификата). С инструкцией о выпуске сертификата (на английском языке) можно ознакомиться здесь.

Параметры работы

Настройка параметров выполняется в форме интерфейс «Администратор системы» на закладке Интернет-сервисы или по ссылке Настройка публикации базы в разделе АДМИНИСТРИРОВАНИЕ.

  • Не бронировать заявки: заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
  • Запретить изменение дней заезда: ручной ввод дней в поле отключается, остаётся возможность выбрать только из тех вариантов, которые предварительно заполнены Администратором системы в настройке «Период пребывания».
  • Url фонового изображения: позволяет задать фоновое изображение виджета. Задается в виде ссылки на изображение.
  • Url дополнительных стилей: позволяет задать ссылку на CSS-файл, который будет подключен в теге head сразу после всех стилей самого виджета. Может быть использовано для изменения цветовой палитры под оформление сайта.
  • Дополнительный макет: HTML-шаблон, подключаемый в самом конце страницы. Может использоваться для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть HTML, владелец Интерфейсы.
  • Подтверждение по электронной почте: после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
  • Шаблон письма подтверждения: позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
  • Номенклатура (тарифы): ограничивает доступные тарифы из виджета онлайн-бронирования тем перечнем, который будет выбран здесь.
  • Виды эквайринга: позволяет предложить гостю оплатить часть бронирования через один из нескольких способов. Процент для оплаты берётся из настройки «Процент предоплаты».

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

При использовании дополнительного макета, если в нём не будут использоваться особенности встроенного HTML-шаблонизатора, необходимо всё содержимое обернуть в тег {plain}. Пример: 

{plain}
код аналитики яндекс/гугл
{/plain}

Дополнительные стили

Стили позволяют переоформить внешний вид виджета, к примеру, покрасить кнопки под стиль сайта. 

/**
 * Кнопки.
 */
.btn.btn-orange {
    /**
     * Основной цвет.
     */
    background-color: #ebc449;

    /**
     * Градиент для кнопки.
     */
    background-image: -webkit-linear-gradient(top,#ebc449,#df9355);
    background-image: -moz-linear-gradient(top,#ebc449,#df9355);
    background-image: -o-linear-gradient(top,#ebc449,#df9355);
    background-image: -ms-linear-gradient(top,#ebc449,#df9355);
    background-image: linear-gradient(top,#ebc449,#df9355);

    /** 
     * Бордер.
     */
    border-color: #ebc449;
}

.btn.btn-blue {
    /**
     * Основной цвет.
     */
    background-color: #0383c1;

    /**
     * Градиент для кнопки.
     */
    background-image: -webkit-linear-gradient(top,#0383c1,#0c6197);
    background-image: -moz-linear-gradient(top,#0383c1,#0c6197);
    background-image: -o-linear-gradient(top,#0383c1,#0c6197);
    background-image: -ms-linear-gradient(top,#0383c1,#0c6197);
    background-image: linear-gradient(top,#0383c1,#0c6197);

    /**
     * Бордер.
     */
    border-color: #0383c1;
}

Эквайринг

Начиная с релиза 21.06, администратору предоставлена возможность активировать предоплату гостем на сайте. На выбор, доступно три основных способа:

  • QR код. QR-код стандартного формата, который можно отсканировать в любом банкомате, оснащённым специальным сканером, или в приложении банка. Для использования этого способа, требуется настроить только реквизиты организации.
  • QR код cистемы быстрых платежей. QR-код с ссылкой на форму оплаты системы быстрых платежей. Требуется настроить идентификатор и адрес сервиса.
  • Платежная кнопка СберБанка. Добавляет на страницу кнопку, при нажатии на которую открывается виджет СберБанка для оплаты через банковскую карту. Требуется настроить интеграцию со Сбербанком со способом авторизации «Токен».

При внесении оплаты через QR-коды, в КУСе не производится никакой автоматической отметки о наличии предоплаты, поскольку виджет не может контролировать это. Автоконтроль платежа производится при оплате через Сбербанк: сразу после завершения оплаты, происходит создание счета на оплату, который связывается с путёвкой. В дальнейшем, на регистрации гостя, менеджер может осуществить проверку наличия оплаты Интернет-эквайринга и создать приём платежей.

Источник — «http://wiki.kint.ru/index.php?title=Виджет_онлайн-бронирования_(КУС)&oldid=63803»