Виджет онлайн-бронирования (КУС)

Материал из КинтВики
Перейти к: навигация, поиск

Описание

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

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

Версия для ознакомления: 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 администратор может активировать предоплату гостем на сайте. На выбор доступно три основных способа:

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

При необходимости к форме онлайн-бронирования Кинт можно привязать платежные системы. Рассмотрим, как это делается, на примере добавления кнопки оплаты Сбербанка:

  • В разделе Администрирование создайте новый HTML-виджет.
  • В строке Владелец выберите категорию "Интерфейсы".
  • Нажмите кнопку Изменить макет. В макете виджета вставьте следующий код:
	{plain}
    <script src="https://3dsec.sberbank.ru/payment/docsite/assets/js/ipay.js"></script>
    <script type="text/javascript">
        const apiDomEl = document.querySelector('meta[name=sberbank_api_key]');
        const apiToken = apiDomEl ? apiDomEl.content : 'YRF3C5RFICWISEWFR6GJ';

        window.ipay = new IPAY({api_token: apiToken});

        document.addEventListener('DOMContentLoaded', function()
        {
            Vue.component('sberbank-pay', {
                props: ['amount', 'currency', 'order_number', 'description', 'button_class', 'button_style'],
                template: '<a v-on:click.prevent="performPay" v-bind:class="button_class" v-bind:style="button_style"><slot></slot></a>',

                methods: {
                    performPay: function()
                    {
                        var order = {
                            currency: this.currency || 'RUB', // fallback to rubles
                        };

                        if (this.amount)
                        {
                            order.amount = typeof this.amount == 'number' ?
                                this.amount :
                                parseFloat(this.amount);
                        }

                        if (this.order_number)
                        {
                            order.order_number = this.order_number;
                        }

                        if (this.description)
                        {
                            order.description = this.description;
                        }

                        ipayCheckout(order, this.makeCallback('success'), this.makeCallback('failure'), this.makeCallback('error'));
                    },

                    makeCallback: function(name)
                    {
                        const component = this;
                        return function(data)
                        {
                            component.$emit(name, data);
                        }
                    }
                }
            });
        });
    </script>
{/plain}
  • Откройте Интерфейс «Администратор системы» — Интернет-сервисы — Онлайн-бронирование Кинт и в строке Дополнительный макет выберите созданный виджет.
  • Отредактируйте макет формы онлайн-бронирования Кинт. Для этого откройте форму виджета в справочнике «HTML виджеты» и нажмите кнопку Изменить макет:
    • Найдите строку кода: <meta charset="utf-8" /> и вставьте следующую строку: <meta name="sberbank_api_key" content="СЮДА - КЛЮЧ СБЕРБАНКА" />
    • Найдите место, где вы хотите вставить кнопку. Для примера, вставим нашу кнопку рядом с кнопкой "Вернуться на главную страницу".
    • Найдите следующую строку: <button type="button" class="btn btn-orange" v-on:click.prevent="openMain">Вернуться на главную страницу</button> и вставьте после нее строку: <sberbank-pay currency="RUB" :amount="calcTotalPrice()" button_class="btn btn-blue" button_style="color: white" :order_number="bookVerifier.id" :description="'Оплата бронирования номера ' + selectedCategory.RoomCategory.Наименование + ' (гостей: ' + order.guests.length + ', дней: ' + order.days + ')'">Оплатить сейчас (Шаблон:CalcTotalPrice() руб.)</sberbank-pay>
  • После внесения правок обязательно перевыгрузите виджет онлайн-бронирования Кинт. Для этого еще раз откройте Интерфейс «Администратор системы» — Интернет-сервисы — Онлайн-бронирование Кинт и нажмите кнопку Сформировать страницу.
  • Выгруженную страницу разместите на своем сервере.


Примечание: Текст кнопки, описание платежа, а также сумму можно исправлять. Там работают математические формулы. Например, если вы хотите, чтобы покупатель оплатил лишь 30% от стоимости путёвки, то во вставленном коде виджета онлайн-бронирования Кинт заменяем calcTotalPrice() на (calcTotalPrice() / 100) * 30

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

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

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

Если при выгрузке страницы, платформа аварийно завершает работу (без отображения окон об ошибках), то, вероятнее всего, нормальному функционированию препятствует Защитник Windows. Добавьте исполняемые файлы платформы (1cv8.exe, 1cv8c.exe и 1cv8s.exe) в исключения в разделе Защита от вирусов и угроз.

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