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

Материал из КинтВики
Перейти к: навигация, поиск
(→‎Параметры работы)
(→‎Решение проблем)
Строка 242: Строка 242:
  
 
== Решение проблем ==
 
== Решение проблем ==
 +
При возникновении проблем в работе виджета, имеет смысл открывать Инструменты разработчика в браузере (CTRL + Shift + I), и смотреть в консоль на наличие каких-либо ошибок.

Версия 13:04, 1 февраля 2022

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

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

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

Описание

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

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

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

Требования

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

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

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

Перед тем, как выполнять встраивание виджета на сайт, нужно сделать следующее:

  • Произведите публикацию базы на веб-сервере — на форме публикации включите сервис KintAPI. Подробнее об этом можно прочитать здесь: 1С8:Публикация информационной базы 1С на веб-сервере. Так же необходимо убедиться, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к сети Интернет) страницей авторизации в базе по запросу к адресу.
  • В интерфейсе "Администратора системы" заполните настройки публикации базы: логин, пароль любого пользователя, из под которого будет осуществляться взаимодействие с API. Можно предоставить пользователю минимальный набор прав, без возможности запускать любые клиенты. Заполните отдельно адрес публикации для онлайн-бронирования и включайте при этом протокол веб-ресурса (пример: 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>
Обновление страницы

Страницу онлайн-бронирования нужно периодически обновлять в следующих случаях:

  • При обновлении конфигурации, если изменяется что-то связанное с макетом онлайн-бронирования: вводятся новые настройки/функционал или вносятся корректировки администратором.
  • При изменении настроек виджета в интерфейсе «Администратора системы».

Чтобы обновить страницу онлайн-бронирования, сделайте следующее:

  1. В интерфейсе «Администратора системы» на закладке Интернет-сервисы в разделе Онлайн-бронирование Кинт нажмите кнопку Сформировать страницу.
  2. Обновите страницу на веб-хостинге.

Страница обновляется на сайте не мгновенно, а через какое-то время, потому что браузер или веб-сервер обычно кэшируют страницу. Чтобы вручную обновить страницу, можно добавить произвольный GET-параметр в ссылку на страницу. Например, если адрес страницы https://online.kint.ru/booking.html, то в конце можно добавить ?_=2021-12-23, т.е. ссылка получится https://online.kint.ru/booking.html?_=2021-12-23, где 2021-12-23 — абсолютно произвольное значение (в данном случае, дата, когда страница была обновлена). Браузер решит, что это другой ресурс, чем тот, который находится у него в кэше, и произведёт повторное обращение за ним на веб-сервер.

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

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

Решение проблем

При возникновении проблем в работе виджета, имеет смысл открывать Инструменты разработчика в браузере (CTRL + Shift + I), и смотреть в консоль на наличие каких-либо ошибок.

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