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

Материал из КинтВики
Перейти к: навигация, поиск
(→‎Демонстрационная версия)
(→‎Эквайринг)
 
(не показано 29 промежуточных версий 5 участников)
Строка 5: Строка 5:
 
== Описание ==
 
== Описание ==
 
Виджет предназначен для создания заявок на бронь в базе «Кинт: Управление санаторием» через форму, размещенную на веб-сайте санатория или отеля.
 
Виджет предназначен для создания заявок на бронь в базе «Кинт: Управление санаторием» через форму, размещенную на веб-сайте санатория или отеля.
−
Все созданные заявки отображаются в форме [[Интерфейс "Менеджер продаж" (КУС)|интерфейс «Менеджер продаж»]], «Шахматке гостиницы» и журнале «Заявки на бронь».
+
Все созданные заявки отображаются в [[Интерфейс "Менеджер продаж" (КУС)|интерфейсе «Менеджер продаж»]], шахматке гостиницы и журнале «Заявки на бронь».
 +
 
 +
== Демонстрационная версия ==
 +
Версия для ознакомления: [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-сертификат на основном веб-сервере, и веб-сервере с публикацией. Учтите, что самоподписанный сертификат не подходит.
  
 
== Добавление виджета на сайт ==
 
== Добавление виджета на сайт ==
  
−
=== Настройка сайта ===
+
=== Подготовка ИБ ===
−
==== Быстрая настройка ====
+
Перед тем, как выполнять встраивание виджета на сайт, сделайте следующее:
−
Этот метод не рекомендуется для использования на настоящей базе, т.к. при загрузке происходят обращения к базе 1С, что вызывает тормоза открытия страницы. Если он Вам действительно нужен - убедитесь, что база 1С опубликована с использованием веб-сервера IIS, а не Apache, т.к. у последнего большие проблемы с производительностью при работе с 1С.
+
* '''Произведите публикацию базы на веб-сервере''' — на форме публикации включите сервис KintAPI. Подробнее об этом прочитайте здесь: [[1С8:Публикация информационной базы 1С на веб-сервере]]. Также убедитесь, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к Интернету) страницей авторизации в базе по запросу к адресу.
 +
* В [[Интерфейс "Администратор системы" (КУС)#Публикация базы|интерфейсе "Администратора системы"]] заполните настройки публикации базы: логин, пароль любого пользователя, из-под которого будет осуществляться взаимодействие с API. При желании предоставьте пользователю минимальный набор прав, без возможности запускать клиенты. Заполните отдельно адрес публикации для онлайн-бронирования и включите при этом протокол веб-ресурса (пример: https://online.kint.ru/kus_demo/).
 +
 
 +
=== Публикация виджета на сайте ===
 +
* В настройках публикации выполните действие «Сформировать страницу». Итоговый файл сохранится локально на устройстве.
 +
* Полученный файл загрузите на веб-сервер в папку, доступную из сети Интернет. Название такой папки зависит целиком от используемого веб-сервера и хостинга. Как правило, это public_html или document_root.
 +
* Вставьте специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
  
−
На веб-сайте необходимо предварительно выбрать место, где будет размещена страница.
+
На месте размещения элемента поместите тег iframe со ссылкой на опубликованную страницу.
−
Это может быть как полностью отдельная изолированная от основного сайта страница, так и встроенная непосредственно в тело сайта. На месте размещения элемента помещается тег <code>iframe</code> со ссылкой, указывающей на API-метод, возвращающий страницу макета.
 
  
−
Пример отдельной страницы, на которой будет размещено онлайн-бронирование:
+
Пример отдельной страницы, на которой разместится онлайн-бронирование:
−
<pre>
+
<syntaxhighlight lang="html" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
 
     <head>
 
     <head>
−
         <script type="text/javascript" data-booking-url="http://online.kint.ru/kus_test" data-query-selector="body" data-append-api-path="1">
+
         <script type="text/javascript" data-booking-url="https://online.kint.ru/booking.html" data-query-selector="body">
 
             document.addEventListener('DOMContentLoaded', function() {
 
             document.addEventListener('DOMContentLoaded', function() {
−
                let iframe = document.createElement("iframe");
 
 
                 let dataset = document.querySelector("[data-booking-url]").dataset;
 
                 let dataset = document.querySelector("[data-booking-url]").dataset;
  
 
                 let bookingUrl = dataset.bookingUrl;
 
                 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.src = bookingUrl;
 +
                iframe.frameBorder = 0;
 +
                iframe.allowFullscreen = "true";
 +
 
                 document.querySelector(dataset.querySelector).appendChild(iframe);
 
                 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>
 
         </script>
Строка 55: Строка 94:
 
     <body></body>
 
     <body></body>
 
</html>
 
</html>
−
</pre>
+
</syntaxhighlight>
  
−
Пример для интеграции на веб-сайт на новой странице с использованием макета:
+
Пример для интеграции (CMS):
−
<pre>
+
<syntaxhighlight lang="html" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
−
<script type="text/javascript" data-booking-url="https://online.kint.ru/kus_test_booking" data-query-selector="#booking">
+
<script type="text/javascript" data-booking-url="https://online.kint.ru/booking.html" data-query-selector="#booking">
 
     document.addEventListener('DOMContentLoaded', function() {
 
     document.addEventListener('DOMContentLoaded', function() {
 
         let dataset = document.querySelector("[data-booking-url]").dataset;
 
         let dataset = document.querySelector("[data-booking-url]").dataset;
 +
 
         let bookingUrl = dataset.bookingUrl;
 
         let bookingUrl = dataset.bookingUrl;
−
        if (dataset.appendApiPath != 0)
 
−
        {
 
−
            bookingUrl += "/hs/KintAPI.hs/GetData?Method=Booking&raw";
 
−
        }
 
  
 
         let iframe = document.createElement("iframe");
 
         let iframe = document.createElement("iframe");
 
         iframe.src = bookingUrl;
 
         iframe.src = bookingUrl;
 
         iframe.frameBorder = 0;
 
         iframe.frameBorder = 0;
 +
        iframe.allowFullscreen = "true";
  
 
         document.querySelector(dataset.querySelector).appendChild(iframe);
 
         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)
 
         window.addEventListener('message', function(e)
 
         {
 
         {
 
             if (e.source != iframe.contentWindow) return;
 
             if (e.source != iframe.contentWindow) return;
−
 
+
           
 
             let data = JSON.parse(e.data);
 
             let data = JSON.parse(e.data);
−
             if (data.eventName != 'stateUpdate') return;
+
             if (eventHandlers[data.eventName])
−
             if (data.step == 'preloader') data.height += 250;
+
             {
−
 
+
                eventHandlers[data.eventName](data, iframe);
−
             iframe.style.height = (data.height + 25) + "px";
+
             }
 
         }, false);
 
         }, false);
 
     });
 
     });
Строка 94: Строка 141:
 
</style>
 
</style>
 
<div id="booking"></div>
 
<div id="booking"></div>
−
</pre>
+
</syntaxhighlight>
−
Если для публикации используется авторизация, необходимо будет произвести ещё одну публикацию с уже введёнными данными для авторизации ([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>), публиковать её беспарольно - не требуется.
+
Страница обновляется на сайте не мгновенно, а через какое-то время, так как браузер или веб-сервер кэшируют страницу. Чтобы вручную обновить страницу, добавьте произвольный GET-параметр в ссылку на страницу. Например, если адрес страницы https://online.kint.ru/booking.html, то в конце можно добавить ?_=2021-12-23. Получившаяся ссылка: https://online.kint.ru/booking.html?_=2021-12-23, где 2021-12-23 — абсолютно произвольное значение (в данном случае, дата, когда страница была обновлена). Браузер решит, что это другой ресурс, чем тот, который находится у него в кэше, и произведёт повторное обращение за ним на веб-сервер.
−
 
 
−
Код будет так же использоваться из "быстрой настройки", но значение атрибута <code>data-append-api-path</code> понадобится изменить на <code>0</code>.
 
−
 
 
−
* В настройках публикации выполняется действие "Сформировать страницу", итоговый файл сохраняется где-нибудь локально.
 
−
* Полученный файл загружается на веб-сервер в папку, доступную из сети Интернет.
 
−
* Вместо адреса публикации, в коде указывается ссылка на опубликованный файл.
 
−
 
 
−
После проведения всех действий, на странице должна почти моментально загружаться страница с онлайн-бронированием. Скорость зависит от Интернет-соединения, но в этом варианте максимально снижена нагрузка на базу 1С.
 
  
 
=== Настройка веб-сервера ===
 
=== Настройка веб-сервера ===
−
Если веб-сайт размещается на домене '''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 данной] статьей для первичной настройки. Вместо знака звёздочки, должен быть указан адрес публикации.
 
−
* Если основной веб-сайт использует 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 фонового изображения''': позволяет задать фоновое изображение виджета. Задается в виде ссылки на изображение.
−
* '''Не бронировать заявки''': заявки создаются в статусе «Черновик» и не изменяют состояние номеров гостиницы. Менеджер сам выполняет регистрацию заявки.
+
* '''Url дополнительных стилей''': позволяет задать ссылку на CSS-файл, который будет подключен в теге <code>head</code> сразу после стилей самого виджета. Может использовать для изменения цветовой палитры под оформление сайта.
−
* '''Подбор мест''':
+
* '''Дополнительный макет''': HTML-шаблон, подключаемый в самом конце страницы. Можно использовать для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть '''HTML''', владелец '''Интерфейсы'''.
−
** «По категориям» — результаты поиска будут отображаться в виде категорий номеров с выводом количества доступных для заезда номеров в каждой категории. Заявка будет создана в виде предварительной брони.
+
* '''Подтверждение по электронной почте''': после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
−
** «По номерам» — результаты поиска будут отображаться в виде номеров гостиницы, заявка будет создана в виде подтвержденной брони.
+
* '''Шаблон письма подтверждения''': позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
−
* '''Отправлять подтверждение на электронную почту''': после успешного создания заявки клиенту будет отправлено письмо с подтверждением бронирования и номером заявки для проверки ее состояния.
+
* '''Номенклатура (тарифы)''': ограничивает доступные тарифы из виджета онлайн-бронирования перечнем, который будет выбран здесь.
−
* '''Шаблон письма''': позволяет задать текст и заголовок письма. Если шаблон не указан, будет использован текст по умолчанию.
+
* '''Виды эквайринга''': позволяет предложить гостю оплатить часть бронирования одним из нескольких способов. Процент для оплаты берётся из настройки «Процент предоплаты».
−
* '''Url дополнительных стилей''': позволяет задать ссылку на CSS-файл, который будет подгружаться вместе с стандартным. Может быть использовано для изменения цветовой палитры под оформление сайта.
+
 
−
* '''Дополнительный макет''': HTML-шаблон, подключаемый в самом конце страницы. Может использоваться для подключения аналитики Яндекса или Гугл, подключения своих скриптов. Тип макета должен быть '''HTML''', владелец '''Интерфейсы'''.
+
=== Дополнительный макет ===
 +
Если при использовании дополнительного макета не будут использоваться особенности встроенного HTML-шаблонизатора, необходимо содержимое обернуть в тег <code>{plain}</code>.
  
−
При использовании дополнительного макета, если в нём не будут использоваться особенности шаблонизатора, необходимо всё содержимое обернуть в тег <code>{plain}</code>.
 
 
Пример:
 
Пример:
−
 
+
<syntaxhighlight lang="html">
−
<pre>
 
 
{plain}
 
{plain}
 
код аналитики яндекс/гугл
 
код аналитики яндекс/гугл
 
{/plain}
 
{/plain}
−
</pre>
+
</syntaxhighlight>
  
−
Стили позволяют переоформить внешний вид виджета, к примеру, покрасить кнопки под стиль сайта.
+
=== Дополнительные стили ===
−
<pre>
+
Стили позволяют переоформить внешний вид виджета. Например, покрасить кнопки под стиль сайта.
 +
<syntaxhighlight lang="css" class="toccolours mw-collapsible mw-collapsed" style="overflow: auto">
 
/**
 
/**
 
  * Кнопки.
 
  * Кнопки.
Строка 220: Строка 231:
 
     border-color: #0383c1;
 
     border-color: #0383c1;
 
}
 
}
−
</pre>
+
</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}}
−
Версия для ознакомления доступна по адресу: [http://www.kint.ru/kus/booking http://www.kint.ru/kus/booking].
+
 
 +
При внесении оплаты через QR-коды, в КУСе не производится автоматической отметки о наличии предоплаты. Виджет не может контролировать это. Автоконтроль платежа производится при оплате через Сбербанк: сразу после завершения оплаты, происходит создание счета на оплату, который связывается с путёвкой. При регистрации гостя менеджер может проверить наличие оплаты Интернет-эквайринга и принять платеж.
 +
 
 +
== Решение проблем ==
 +
При возникновении проблем в работе виджета, откройте Инструменты разработчика в браузере ('''CTRL + Shift + I'''), и посмотрите в консоль. Проверьте наличие ошибок. Проблемы в работе с API там отобразятся.
  
−
Работает с информационной базой [http://online.kint.ru/kus_demo/ru_RU/ «Кинт: Управление санаторием»].
+
Если при выгрузке страницы, платформа аварийно завершает работу (без отображения окон об ошибках), то, вероятнее всего, нормальному функционированию препятствует Защитник Windows.
 +
Добавьте исполняемые файлы платформы (1cv8.exe, 1cv8c.exe и 1cv8s.exe) в исключения в разделе Защита от вирусов и угроз.

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

  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»