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

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

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

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

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

Описание

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

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

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

Требования

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

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

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

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

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

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

Быстрая настройка — медленная работа виджета

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

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

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

<!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>

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

<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>

Если для публикации используется авторизация, необходимо будет произвести ещё одну публикацию с уже введёнными данными для авторизации (Как опубликовать базу на веб-сервере), и в коде на сайте указать именно ссылку на эту публикацию. Ранее можно было видоизменить ссылку, подставив в неё логин-пароль, чтобы браузер их не запрашивал, но Chrome запрещает так делать с версии 59.

Если вариант с дополнительной публикацией без какой-либо авторизации не устраивает, можно прибегнуть к применению дополнительного 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);

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

Более сложная настройка — быстрая работа виджета

Этот вариант доступен начиная с релиза 20.05.09

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

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

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

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

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

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

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

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

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

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

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

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

  • Url фонового изображения: позволяет задать фоновое изображение виджета. Задается в виде ссылки на изображение.
  • Не бронировать заявки: заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
  • Подбор мест:
    • «По категориям» — результаты поиска будут отображаться в виде категорий номеров с выводом количества доступных для заезда номеров в каждой категории. Заявка будет создана в виде предварительной брони.
    • «По номерам» — результаты поиска будут отображаться в виде номеров гостиницы, заявка будет создана в виде подтвержденной брони.
  • Отправлять подтверждение на электронную почту: после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
  • Шаблон письма: позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
  • Url дополнительных стилей: позволяет задать ссылку на CSS-файл, который будет подгружаться вместе с стандартным. Может быть использовано для изменения цветовой палитры под оформление сайта.
  • Дополнительный макет: 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;
}
Источник — «http://wiki.kint.ru/index.php?title=Виджет_онлайн-бронирования_(КУС)&oldid=61416»