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

Текущая версия на 12:40, 14 сентября 2022

Содержание

1 Описание
2 Демонстрационная версия
3 Номера, доступные для бронирования
4 Требования
5 Добавление виджета на сайт
6 Параметры работы
7 Решение проблем

Описание

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

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

Версия для ознакомления: 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>

Обновление страницы

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

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

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

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

Страница обновляется на сайте не мгновенно, а через какое-то время, так как браузер или веб-сервер кэшируют страницу. Чтобы вручную обновить страницу, добавьте произвольный 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-код с ссылкой на форму оплаты системы быстрых платежей. Требуется настроить идентификатор и адрес сервиса.
Платежная кнопка СберБанка. Добавляет на страницу кнопку. При ее нажатии открывается виджет СберБанка для оплаты банковской картой. Требуется настроить интеграцию со Сбербанком со способом авторизации «Токен».

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

В разделе Администрирование создайте новый 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) в исключения в разделе Защита от вирусов и угроз.

@@ Строка 3: / Строка 3: @@
 | __TOC__
 |}
+== Описание ==
+Виджет предназначен для создания заявок на бронь в базе «Кинт: Управление санаторием» через форму, размещенную на веб-сайте санатория или отеля.
+Все созданные заявки отображаются в [[Интерфейс "Менеджер продаж" (КУС)|интерфейсе «Менеджер продаж»]], шахматке гостиницы и журнале «Заявки на бронь».
 == Демонстрационная версия ==
-Версия для ознакомления доступна по адресу [https://www.kint.ru/products/kus/booking/ https://www.kint.ru/products/kus/booking/].
+Версия для ознакомления: [https://www.kint.ru/products/kus/booking/ https://www.kint.ru/products/kus/booking/].
 <!-- Старые адреса http://www.kint.ru/kus/booking_demo и http://www.kint.ru/kus/booking. -->
 Работает с информационной базой [http://online.kint.ru/kus_demo/ru_RU/ «Кинт: Управление санаторием»].
-== Описание ==
-Виджет предназначен для создания заявок на бронь в базе «Кинт: Управление санаторием» через форму, размещенную на веб-сайте санатория или отеля.
-Все созданные заявки отображаются в форме [[Интерфейс "Менеджер продаж" (КУС)|интерфейс «Менеджер продаж»]], «Шахматке гостиницы» и журнале «Заявки на бронь».
 == Номера, доступные для бронирования ==
@@ Строка 19: / Строка 19: @@
 * Выполненная внешняя публикация на веб-сервере, включая веб-сервис [[API (Кинт)|API]].
 * Веб-сайт с любой CMS, позволяющей вставлять HTML-код в страницы.
-* ''(опционально)'' HTTPS-сертификат на основном веб-сервере, и веб-сервере с публикацией ('''самоподписанный не подходит!''')
+* ''(опционально)'' HTTPS-сертификат на основном веб-сервере, и веб-сервере с публикацией. Учтите, что самоподписанный сертификат не подходит.
 == Добавление виджета на сайт ==
 === Подготовка ИБ ===
-Перед тем, как выполнять встраивание виджета на сайт, необходимо сделать несколько несложных действий.
+Перед тем, как выполнять встраивание виджета на сайт, сделайте следующее:
+* '''Произведите публикацию базы на веб-сервере''' — на форме публикации включите сервис KintAPI. Подробнее об этом прочитайте здесь: [[1С8:Публикация информационной базы 1С на веб-сервере]]. Также убедитесь, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к Интернету) страницей авторизации в базе по запросу к адресу.
+* В [[Интерфейс "Администратор системы" (КУС)#Публикация базы|интерфейсе "Администратора системы"]] заполните настройки публикации базы: логин, пароль любого пользователя, из-под которого будет осуществляться взаимодействие с API. При желании предоставьте пользователю минимальный набор прав, без возможности запускать клиенты. Заполните отдельно адрес публикации для онлайн-бронирования и включите при этом протокол веб-ресурса (пример: https://online.kint.ru/kus_demo/).
-* '''Произвести публикацию базы на веб-сервере''', включив так же сервис KintAPI. Подробнее об этом можно прочитать здесь: [[1С8:Публикация информационной базы 1С на веб-сервере]]. Так же необходимо убедиться, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к сети Интернет) страницей авторизации в базе по запросу к адресу.
+=== Публикация виджета на сайте ===
-* В [[Интерфейс "Администратор системы" (КУС)#Публикация базы|интерфейсе "Администратора системы"]] заполнить настройки публикации базы: логин, пароль любого пользователя (из под которого будет осуществляться взаимодействие с апи; можно предоставить пользователю минимальный набор прав, без возможности запускать любые клиенты), так же необходимо заполнить отдельно адрес публикации для онлайн-бронирования, включая протокол веб-ресурса (пример: <code>https://online.kint.ru/kus_demo/</code>).
+* В настройках публикации выполните действие «Сформировать страницу». Итоговый файл сохранится локально на устройстве.
+* Полученный файл загрузите на веб-сервер в папку, доступную из сети Интернет. Название такой папки зависит целиком от используемого веб-сервера и хостинга. Как правило, это public_html или document_root.
+* Вставьте специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
-=== Настройка сайта ===
+На месте размещения элемента поместите тег iframe со ссылкой на опубликованную страницу.
-* В настройках публикации выполняется действие "Сформировать страницу", итоговый файл сохраняется где-нибудь локально.
-* Полученный файл загружается на веб-сервер в папку, доступную из сети Интернет.
-* Вставляется специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
-На месте размещения элемента помещается тег <code>iframe</code> со ссылкой на опубликованную страницу.
+Пример отдельной страницы, на которой разместится онлайн-бронирование:
+<syntaxhighlight lang="html" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
-Пример отдельной страницы, на которой будет размещено онлайн-бронирование:
-<syntaxhighlight lang="html">
 <!DOCTYPE html>
 <html>
@@ Строка 98: / Строка 97: @@
 Пример для интеграции (CMS):
-<syntaxhighlight lang="html">
+<syntaxhighlight lang="html" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
 <script type="text/javascript" data-booking-url="https://online.kint.ru/booking.html" data-query-selector="#booking">
      document.addEventListener('DOMContentLoaded', function() {
@@ Строка 143: / Строка 142: @@
 <div id="booking"></div>
 </syntaxhighlight>
+===== Обновление страницы =====
+Страницу онлайн-бронирования нужно периодически обновлять в следующих случаях:
+* Если при обновлении конфигурации изменяется макет онлайн-бронирования: вводятся новые настройки/функционал или вносятся корректировки администратором.
+* При изменении настроек виджета в интерфейсе «Администратора системы».
+Чтобы обновить страницу онлайн-бронирования, сделайте следующее:
+# Откройте интерфейс «Администратор системы» — закладка '''Интернет-сервисы''' — раздел '''Онлайн-бронирование Кинт''' и нажмите кнопку '''Сформировать страницу'''.
+# Обновите страницу на веб-хостинге.
+Страница обновляется на сайте не мгновенно, а через какое-то время, так как браузер или веб-сервер кэшируют страницу. Чтобы вручную обновить страницу, добавьте произвольный 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''', потребуется внести некоторые дополнительные изменения в конфигурацию веб-сервера.
+Если веб-сайт размещается на домене '''example.com''', а публикация — на '''data.example.com''', потребуется внести некоторые дополнительные изменения в конфигурацию веб-сервера.
+* Настройте CORS таким образом, чтобы браузеру было разрешено общаться с поддоменом базы (на основном домене настраивается на '''http://data.example.com''' , включая протокол), и наоборот. Можно воспользоваться [https://enable-cors.org/server_apache.html данной] статьей для первичной настройки. Вместо знака звёздочки, укажите адрес публикации.
+* Если основной веб-сайт использует SSL/TLS-шифрование (HTTPS), произведите аналогичную настройку на публикации, иначе браузер откажется делать выполнять запрос для получения страницы без запуска в специальном режиме, что неприемлемо в штатном режиме работы.
-* Настроить CORS таким образом, чтобы браузеру было разрешено общаться с поддоменом базы (на основном домене настраивается на '''http://data.example.com''' (включая протокол)), и наоборот. Можно воспользоваться [https://enable-cors.org/server_apache.html данной] статьей для первичной настройки. Вместо знака звёздочки, должен быть указан адрес публикации.
-* Если основной веб-сайт использует SSL/TLS-шифрование (HTTPS), аналогичную настройку необходимо произвести и на публикации, иначе браузер откажется делать выполнять запрос для получения страницы без запуска в специальном режиме, что неприемлемо в штатном режиме работы.
 Отметим, что необходим полностью валидный сертификат, выданный проверенным удостоверяющим центром, который не придётся добавлять в исключения при открытии страницы.
-* Можем посоветовать рассмотреть вариант использования сертификата от Let's Encrypt. Они выдают бесплатные сертификаты сроком действия 3 месяца (потребуется настроить задачу в планировщике системы на автоматический перевыпуск сертификата). С инструкцией о выпуске сертификата (на английском языке) можно ознакомиться [https://commaster.net/posts/how-setup-lets-encrypt-apache-windows/ здесь].
+* Советуем рассмотреть вариант использования сертификата от Let's Encrypt. Они выдают бесплатные сертификаты сроком действия 3 месяца. Для этого потребуется настроить задачу в планировщике системы на автоматический перевыпуск сертификата. Инструкция о выпуске сертификата на английском языке находится [https://commaster.net/posts/how-setup-lets-encrypt-apache-windows/ здесь].
 == Параметры работы ==
-Настройка параметров выполняется в форме [[Интерфейс "Администратор системы" (КУС)#Интернет-сервисы|интерфейс «Администратор системы»]] на закладке '''Интернет-сервисы''' или по ссылке '''Настройка публикации базы''' в разделе АДМИНИСТРИРОВАНИЕ.
+Настройка параметров выполняется в [[Интерфейс "Администратор системы" (КУС)#Интернет-сервисы|интерфейсе «Администратор системы»]] на закладке '''Интернет-сервисы''' или по ссылке '''Настройка публикации базы''' в разделе '''Администрирование'''.
+* '''Не бронировать заявки''': заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
+* '''Запретить изменение дней заезда''': ручной ввод дней в поле отключается. Остаётся возможность выбрать из тех вариантов, которые предварительно заполнены Администратором системы в настройке «Период пребывания».
 * '''Url фонового изображения''': позволяет задать фоновое изображение виджета. Задается в виде ссылки на изображение.
-* '''Не бронировать заявки''': заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
+* '''Url дополнительных стилей''': позволяет задать ссылку на CSS-файл, который будет подключен в теге <code>head</code> сразу после стилей самого виджета. Может использовать для изменения цветовой палитры под оформление сайта.
-* '''Подбор мест''':
+* '''Дополнительный макет''': HTML-шаблон, подключаемый в самом конце страницы. Можно использовать для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть '''HTML''', владелец '''Интерфейсы'''.
-** «По категориям» — результаты поиска будут отображаться в виде категорий номеров с выводом количества доступных для заезда номеров в каждой категории. Заявка будет создана в виде предварительной брони.
+* '''Подтверждение по электронной почте''': после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
-** «По номерам» — результаты поиска будут отображаться в виде номеров гостиницы, заявка будет создана в виде подтвержденной брони.
+* '''Шаблон письма подтверждения''': позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
-* '''Отправлять подтверждение на электронную почту''': после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
+* '''Номенклатура (тарифы)''': ограничивает доступные тарифы из виджета онлайн-бронирования перечнем, который будет выбран здесь.
-* '''Шаблон письма''': позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
+* '''Виды эквайринга''': позволяет предложить гостю оплатить часть бронирования одним из нескольких способов. Процент для оплаты берётся из настройки «Процент предоплаты».
-* '''Url дополнительных стилей''': позволяет задать ссылку на CSS-файл, который будет подгружаться вместе с стандартным. Может быть использовано для изменения цветовой палитры под оформление сайта.
-* '''Дополнительный макет''': HTML-шаблон, подключаемый в самом конце страницы. Может использоваться для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть '''HTML''', владелец '''Интерфейсы'''.
+=== Дополнительный макет ===
+Если при использовании дополнительного макета не будут использоваться особенности встроенного HTML-шаблонизатора, необходимо содержимое обернуть в тег <code>{plain}</code>.
-При использовании дополнительного макета, если в нём не будут использоваться особенности шаблонизатора, необходимо всё содержимое обернуть в тег <code>{plain}</code>.
 Пример:
 <syntaxhighlight lang="html">
 {plain}
@@ Строка 173: / Строка 184: @@
 </syntaxhighlight>
-Стили позволяют переоформить внешний вид виджета, к примеру, покрасить кнопки под стиль сайта.
+=== Дополнительные стили ===
-<syntaxhighlight lang="css">
+Стили позволяют переоформить внешний вид виджета. Например, покрасить кнопки под стиль сайта.
+<syntaxhighlight lang="css" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
 /**
   * Кнопки.
@@ Строка 220: / Строка 232: @@
 }
 </syntaxhighlight>
+=== Эквайринг ===
+Начиная с релиза 21.06 администратор может активировать предоплату гостем на сайте. На выбор доступно три основных способа:
+# '''QR код'''. QR-код стандартного формата. Можно отсканировать в любом банкомате, оснащённым специальным сканером, или в приложении банка. Для использования требуется настроить только реквизиты организации.
+# '''QR код cистемы быстрых платежей'''. QR-код с ссылкой на форму оплаты системы быстрых платежей. Требуется настроить идентификатор и адрес сервиса.
+# '''Платежная кнопка СберБанка'''. Добавляет на страницу кнопку. При ее нажатии открывается виджет СберБанка для оплаты банковской картой. Требуется настроить интеграцию со Сбербанком со способом авторизации «Токен».
+При необходимости к форме онлайн-бронирования Кинт можно привязать платежные системы. Рассмотрим, как это делается, на примере добавления кнопки оплаты Сбербанка:
+* В разделе '''Администрирование''' создайте новый HTML-виджет.
+* В строке '''Владелец''' выберите категорию "Интерфейсы".
+* Нажмите кнопку '''Изменить макет'''. В макете виджета вставьте следующий код:
+<syntaxhighlight lang="html" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
+	{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}
+</syntaxhighlight>
+<div style="clear:{{{1|both}}};"></div>
+* Откройте '''Интерфейс «Администратор системы»''' — '''Интернет-сервисы''' — '''Онлайн-бронирование Кинт''' и в строке '''Дополнительный макет''' выберите созданный виджет. <!-- Созданный макет указывается как "Дополнительный" в интерфейсе администратора, в настройке нашего виджета. -->
+* Отредактируйте макет формы онлайн-бронирования Кинт. Для этого откройте форму виджета в справочнике «HTML виджеты» и нажмите кнопку '''Изменить макет''':
+** Найдите строку кода: <code> <meta charset="utf-8" /> </code> и вставьте следующую строку: <code> <meta name="sberbank_api_key" content="СЮДА - КЛЮЧ СБЕРБАНКА" /> </code>
+** Найдите место, где вы хотите вставить кнопку. Для примера, вставим нашу кнопку рядом с кнопкой "Вернуться на главную страницу".
+** Найдите следующую строку: <code> <button type="button" class="btn btn-orange" v-on:click.prevent="openMain">Вернуться на главную страницу</button> </code> и вставьте после нее строку: <code> <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> </code>
+* После внесения правок обязательно перевыгрузите виджет онлайн-бронирования Кинт. Для этого еще раз откройте '''Интерфейс «Администратор системы»''' — '''Интернет-сервисы''' — '''Онлайн-бронирование Кинт''' и нажмите кнопку '''Сформировать страницу'''.
+* Выгруженную страницу разместите на своем сервере.
+{{notice|Примечание: Текст кнопки, описание платежа, а также сумму можно исправлять. Там работают математические формулы. Например, если вы хотите, чтобы покупатель оплатил лишь 30% от стоимости путёвки, то во вставленном коде виджета онлайн-бронирования Кинт заменяем calcTotalPrice() на (calcTotalPrice() / 100) * 30}}
+При внесении оплаты через QR-коды, в КУСе не производится автоматической отметки о наличии предоплаты. Виджет не может контролировать это. Автоконтроль платежа производится при оплате через Сбербанк: сразу после завершения оплаты, происходит создание счета на оплату, который связывается с путёвкой. При регистрации гостя менеджер может проверить наличие оплаты Интернет-эквайринга и принять платеж.
+== Решение проблем ==
+При возникновении проблем в работе виджета, откройте Инструменты разработчика в браузере ('''CTRL + Shift + I'''), и посмотрите в консоль. Проверьте наличие ошибок. Проблемы в работе с API там отобразятся.
+Если при выгрузке страницы, платформа аварийно завершает работу (без отображения окон об ошибках), то, вероятнее всего, нормальному функционированию препятствует Защитник Windows.
+Добавьте исполняемые файлы платформы (1cv8.exe, 1cv8c.exe и 1cv8s.exe) в исключения в разделе Защита от вирусов и угроз.

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

Текущая версия на 12:40, 14 сентября 2022

Содержание

Описание

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

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

Требования

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

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

Публикация виджета на сайте

Обновление страницы

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

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

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

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

Эквайринг

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

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Навигация

Продукты

Инструменты