Просмотр исходного текста страницы Виджет онлайн-бронирования (КУС)

<noinclude>[[Категория:Онлайн-бронирование_(КУС)]]</noinclude>
{| align="right"
| __TOC__
|}
== Демонстрационная версия ==
Версия для ознакомления доступна по адресу [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/ «Кинт: Управление санаторием»].

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

== Номера, доступные для бронирования ==
На сайте онлайн-бронирования «Кинт» отображаются номера, добавленные в [[Справочник "Квоты" (КУС)|онлайн-квоту]] «Кинт API».

== Требования ==
* Выполненная внешняя публикация на веб-сервере, включая веб-сервис [[API (КУС)|API]].
* Веб-сайт с любой CMS, позволяющей вставлять HTML-код в страницы.
* ''(опционально)'' HTTPS-сертификат на основном веб-сервере, и веб-сервере с публикацией ('''самоподписанный не подходит!''')

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

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

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

=== Настройка сайта ===
==== Быстрая настройка — медленная работа виджета ====
Этот метод не рекомендуется для использования на настоящей базе, т.к. при загрузке происходят обращения к базе 1С, что вызывает тормоза открытия страницы. Если он Вам действительно нужен - убедитесь, что база 1С опубликована с использованием веб-сервера IIS, а не Apache, т.к. у последнего большие проблемы с производительностью при работе с 1С.

На веб-сайте необходимо предварительно выбрать место, где будет размещена страница.
Это может быть как полностью отдельная изолированная от основного сайта страница, так и встроенная непосредственно в тело сайта. На месте размещения элемента помещается тег <code>iframe</code> со ссылкой, указывающей на API-метод, возвращающий страницу макета.

Пример отдельной страницы, на которой будет размещено онлайн-бронирование:
<pre>
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" data-booking-url="http://online.kint.ru/kus_test" data-query-selector="body" data-append-api-path="1">
            document.addEventListener('DOMContentLoaded', function() {
                let dataset = document.querySelector("[data-booking-url]").dataset;

                let bookingUrl = dataset.bookingUrl;
                if (dataset.appendApiPath != 0)
                {
                    bookingUrl += "/hs/KintAPI.hs/GetData?Method=Booking&raw";
                }
            
                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>
</pre>

Пример для интеграции (CMS):
<pre>
<script type="text/javascript" data-booking-url="https://online.kint.ru/booking_new.html?_=upgrade6" data-append-api-path="0" data-query-selector="#booking">
    document.addEventListener('DOMContentLoaded', function() {
        let dataset = document.querySelector("[data-booking-url]").dataset;

        let bookingUrl = dataset.bookingUrl;
        if (dataset.appendApiPath != 0)
        {
            bookingUrl += "/hs/KintAPI.hs/GetData?Method=Booking&raw";
        }
            
        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>
</pre>
Если для публикации используется авторизация, необходимо будет произвести ещё одну публикацию с уже введёнными данными для авторизации ([https://its.1c.ru/db/metod81#content:6966:hdoc Как опубликовать базу на веб-сервере]), и в коде на сайте указать именно ссылку на эту публикацию. Ранее можно было видоизменить ссылку, подставив в неё логин-пароль, чтобы браузер их не запрашивал, но Chrome запрещает так делать с версии 59.

Если вариант с дополнительной публикацией без какой-либо авторизации не устраивает, можно прибегнуть к применению дополнительного PHP-скрипта, который сам производит авторизацию на удалённом сервере, и позволяет только получить макет.
<pre lang="php">
<?php

// Настройки подключения к ИБ
$config = array(
    'base_url'  => 'http://example.com/pub_url',
    'username'  => 'Пользователь',
    'password'  => ''
);

// Скрипт
if (!extension_loaded('curl'))
{
    header('Content-Type: text/plain; charset=utf8');
    die('Сначала установите расширение cURL для PHP.');
}

$ch = curl_init($config['base_url'] . '/hs/KintAPI.hs/GetData?Method=Booking&raw');
curl_setopt_array($ch, array(
    CURLOPT_USERPWD         => $config['username'] . ':' . $config['password'],
    CURLOPT_TIMEOUT         => 30,
    CURLOPT_HTTPAUTH        => CURLAUTH_BASIC
));

header('Content-Type: text/html; charset=utf8');
curl_exec($ch);
curl_close($ch);

</pre>
При применении такого метода, потребуется так же у элемента <code>script</code> установить значение атрибута <code>data-append-api-path</code> в значение <code>0</code>.

==== Более сложная настройка — быстрая работа виджета ====
''Этот вариант доступен начиная с релиза '''20.05.09'''''

Преимуществом данного подхода является то, что страница с виджетом (включая сам виджет) будет грузиться моментально, если никаких проблем с Интернет-соединением нет. Но он требует немного больше времени на первоначальную настройку, и при обновлении некоторых данных, используемых виджетом, пересохранения файла с последующим обновлением на веб-сервере.
Суть способа заключается в одноразовом формировании файла, который формирует база при запросах на метод апи. В таком варианте, все необходимые базовые данные помещаются в файл страницы, а потому для первоначального запуска, виджет не делает никаких запросов на базу повторно.

Так же, если файл будет размещён на одном логическом домене, что и опубликована база 1С (пример: файл размещён и доступен по адресу <code>https://example.com/booking/</code>, база опубликована на <code>https://example.com/kus/</code>), публиковать её беспарольно - не требуется.

Код будет так же использоваться из "быстрой настройки", но значение атрибута <code>data-append-api-path</code> понадобится изменить на <code>0</code>.

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

После проведения всех действий, на странице должна моментально загружаться страница с онлайн-бронированием. Скорость зависит от Интернет-соединения, но в этом варианте максимально снижена нагрузка на базу 1С.

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

* Настроить 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/ здесь].

== Параметры работы ==
Настройка параметров выполняется в форме [[Интерфейс "Администратор системы" (КУС)#Интернет-сервисы|интерфейс «Администратор системы»]] на закладке '''Интернет-сервисы''' или по ссылке '''Настройка публикации базы''' в разделе АДМИНИСТРИРОВАНИЕ.
* '''Url фонового изображения''': позволяет задать фоновое изображение виджета. Задается в виде ссылки на изображение.
* '''Не бронировать заявки''': заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
* '''Подбор мест''':
** «По категориям» — результаты поиска будут отображаться в виде категорий номеров с выводом количества доступных для заезда номеров в каждой категории. Заявка будет создана в виде предварительной брони.
** «По номерам» — результаты поиска будут отображаться в виде номеров гостиницы, заявка будет создана в виде подтвержденной брони.
* '''Отправлять подтверждение на электронную почту''': после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
* '''Шаблон письма''': позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
* '''Url дополнительных стилей''': позволяет задать ссылку на CSS-файл, который будет подгружаться вместе с стандартным. Может быть использовано для изменения цветовой палитры под оформление сайта.
* '''Дополнительный макет''': HTML-шаблон, подключаемый в самом конце страницы. Может использоваться для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть '''HTML''', владелец '''Интерфейсы'''.

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

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

Стили позволяют переоформить внешний вид виджета, к примеру, покрасить кнопки под стиль сайта.
<pre>
/**
 * Кнопки.
 */
.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;
}
</pre>