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

Материал из КинтВики
Перейти к: навигация, поиск
(Новая страница: «{| align="right" | __TOC__ |} == Описание == Виджет предназначен для создания заявок на бронь в базе «Ки…»)
 
(→‎Эквайринг)
 
(не показано 36 промежуточных версий 5 участников)
Строка 1: Строка 1:
 +
<noinclude>[[Категория:Онлайн-бронирование_(КУС)]]</noinclude>
 
{| align="right"
 
{| align="right"
 
| __TOC__
 
| __TOC__
Строка 4: Строка 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-сертификат на основном веб-сервере, и веб-сервере с публикацией. Учтите, что самоподписанный сертификат не подходит.
  
 
== Добавление виджета на сайт ==
 
== Добавление виджета на сайт ==
  
−
=== Настройка сайта ===
+
=== Подготовка ИБ ===
−
На веб-сайте необходимо предварительно выбрать место, где будет размещена страница.
+
Перед тем, как выполнять встраивание виджета на сайт, сделайте следующее:
−
Это может быть как полностью отдельная изолированная от основного сайта страница, так и встроенная непосредственно в тело сайта. На месте размещения элемента помещается тег <code>iframe</code> со ссылкой, указывающей на API-метод, возвращающий страницу макета.
+
* '''Произведите публикацию базы на веб-сервере''' — на форме публикации включите сервис KintAPI. Подробнее об этом прочитайте здесь: [[1С8:Публикация информационной базы 1С на веб-сервере]]. Также убедитесь, что веб-сервер отвечает из внешней сети (с другого устройства, подключенного другим способом к Интернету) страницей авторизации в базе по запросу к адресу.
 +
* В [[Интерфейс "Администратор системы" (КУС)#Публикация базы|интерфейсе "Администратора системы"]] заполните настройки публикации базы: логин, пароль любого пользователя, из-под которого будет осуществляться взаимодействие с API. При желании предоставьте пользователю минимальный набор прав, без возможности запускать клиенты. Заполните отдельно адрес публикации для онлайн-бронирования и включите при этом протокол веб-ресурса (пример: https://online.kint.ru/kus_demo/).
  
−
Пример отдельной страницы, на которой будет размещено онлайн-бронирование:
+
=== Публикация виджета на сайте ===
−
<pre>
+
* В настройках публикации выполните действие «Сформировать страницу». Итоговый файл сохранится локально на устройстве.
 +
* Полученный файл загрузите на веб-сервер в папку, доступную из сети Интернет. Название такой папки зависит целиком от используемого веб-сервера и хостинга. Как правило, это public_html или document_root.
 +
* Вставьте специальный код в заранее выбранном месте на сайте, который инициализирует отображение страницы и поддерживает её в рабочем виде.
 +
 
 +
На месте размещения элемента поместите тег iframe со ссылкой на опубликованную страницу.
 +
 
 +
Пример отдельной страницы, на которой разместится онлайн-бронирование:
 +
<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>
Строка 51: Строка 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);
 
     });
 
     });
Строка 90: Строка 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' => ''
 
−
);
 
  
−
// Скрипт
+
Страница обновляется на сайте не мгновенно, а через какое-то время, так как браузер или веб-сервер кэшируют страницу. Чтобы вручную обновить страницу, добавьте произвольный GET-параметр в ссылку на страницу. Например, если адрес страницы https://online.kint.ru/booking.html, то в конце можно добавить ?_=2021-12-23. Получившаяся ссылка: https://online.kint.ru/booking.html?_=2021-12-23, где 2021-12-23 — абсолютно произвольное значение (в данном случае, дата, когда страница была обновлена). Браузер решит, что это другой ресурс, чем тот, который находится у него в кэше, и произведёт повторное обращение за ним на веб-сервер.
−
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>.
 
  
 
=== Настройка веб-сервера ===
 
=== Настройка веб-сервера ===
−
Если веб-сайт размещается на домене '''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">
 
/**
 
/**
 
  * Кнопки.
 
  * Кнопки.
Строка 200: Строка 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}}
  
−
== Демонстрационная версия ==
+
При внесении оплаты через QR-коды, в КУСе не производится автоматической отметки о наличии предоплаты. Виджет не может контролировать это. Автоконтроль платежа производится при оплате через Сбербанк: сразу после завершения оплаты, происходит создание счета на оплату, который связывается с путёвкой. При регистрации гостя менеджер может проверить наличие оплаты Интернет-эквайринга и принять платеж.
−
Версия для ознакомления доступна по адресу: [http://www.kint.ru/kus/booking_demo kint.ru].
+
 
 +
== Решение проблем ==
 +
При возникновении проблем в работе виджета, откройте Инструменты разработчика в браузере ('''CTRL + Shift + I'''), и посмотрите в консоль. Проверьте наличие ошибок. Проблемы в работе с API там отобразятся.
  
−
Работает с информационной базой [http://online.kint.ru/kus_test/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»