В ЛК присутствует возможность интеграции с внешними сервисами посредством встраивания iframe. Для этого используется виджет container.
Предварительно следует настроить $server_client в соответствии с инструкцией: Расширение стандартной функциональности для переопределения стандартных конфигурационных файлов.
Создание страницы с интегрированным сервисом
Создайте файл $server_client/widgets/container.yml со следующим содержанием:
container: online_shop: # ключ сервиса (произвольный) template: widgets/container/iframe src: "http://example.com" # URL для iframe css_class: full-size # растягивает фрейм на всю страницу weather: # можно указать несколько сервисов template: widgets/container/weather # используется пользовательский JST-шаблон custom_option: some value # произвольные опции, передаваемые в шаблон
Для шаблона widgets/container/iframe доступны следующие опции: src (URL фрейма), css_class (список css-классов), width (ширина), height (высота).
Интегрированный сервис будет доступен в ЛК по ссылке вида /external/ключ_сервиса, напр. /external/online_shop. Разместить эту ссылку можно, например, с помощью виджетов "баннер" или "Навигационные ссылки (NavigationLinks)".
Создание пользовательских шаблонов
Пользовательские шаблоны требуются в случае, если сервис встраивается не через iframe.
Допустим, требуется встроить информер погоды со стороннего сайта из примера в предыдущем разделе.
Получаем HTML-код информера, воспользовавшись генератором на этом сайте. Например, такой:
<link rel="stylesheet" type="text/css" href="http://www.gismeteo.ru/static/css/informer2/gs_informerClient.min.css"> <div id="gsInformerID-cI23Qt8v08esfK" class="gsInformer" style="width:239px;height:90px"> <div class="gsIContent"> <div id="cityLink"> <a href="http://www.gismeteo.ru/city/daily/4368/" target="_blank">Погода в Москве</a> </div> <div class="gsLinks"> <table> <tr> <td> <div class="leftCol"> <a href="http://www.gismeteo.ru" target="_blank"> <img alt="Gismeteo" title="Gismeteo" src="http://www.gismeteo.ru/static/images/informer2/logo-mini2.png" align="absmiddle" border="0" /> <span>Gismeteo</span> </a> </div> <div class="rightCol"> <a href="http://www.gismeteo.ru/city/weekly/4368/" target="_blank">Прогноз на 2 недели</a> </div> </td> </tr> </table> </div> </div> </div> <script src="http://www.gismeteo.ru/ajax/getInformer/?hash=cI23Qt8v08esfK" type="text/javascript"></script>
Затем требуется преобразовать его в формат HAML. Это можно сделать, например, с помощью онлайн-инструмента http://html2haml.heroku.com. Получаем такой результат:
%link{:href => "http://www.gismeteo.ru/static/css/informer2/gs_informerClient.min.css", :rel => "stylesheet", :type => "text/css"}/ #gsInformerID-cI23Qt8v08esfK.gsInformer{:style => "width:239px;height:90px"} .gsIContent #cityLink %a{:href => "http://www.gismeteo.ru/city/daily/4368/", :target => "_blank"} Погода в Москве .gsLinks %table %tr %td .leftCol %a{:href => "http://www.gismeteo.ru", :target => "_blank"} %img{:align => "absmiddle", :alt => "Gismeteo", :border => "0", :src => "http://www.gismeteo.ru/static/images/informer2/logo-mini2.png", :title => "Gismeteo"}/ %span Gismeteo .rightCol %a{:href => "http://www.gismeteo.ru/city/weekly/4368/", :target => "_blank"} Прогноз на 2 недели %script{:src => "http://www.gismeteo.ru/ajax/getInformer/?hash=cI23Qt8v08esfK", :type => "text/javascript"}
Помещаем этот код в файл $server_client/assets/tempaltes/widgets/container/weather.jst.hamlc.
Далее поместим этот виджет на стену (shortcuts_wall).
Интеграция в shortcut
Для интеграции сервисов в shorcut существует специальный shortcut - container. Он определяется в файле $server_client/widgets/shortcuts.yml так же, как и другие shortcut'ы:
shortcuts: ... container: weather: # ключ, соответствующий ключу сервиса в widgets.yml some_option: some value # опции shortcut'а
Затем shortcut добавляется на стену (shortcuts_wall) в любое подходящее место через файл $server_client/widgets/shortcuts_wall.yml:
shortcuts_wall: main: # идентификатор стены ... - row: 2 # строка col: 3 # столбец type: container key: weather
Использование переменных в пользовательских шаблонах
Шаблоны допускают использование языка CoffeeScript (см. описание шаблонизатора).
В контексте шаблона доступны следующие переменные:
- @options - опции виджета container;
- @account - текущий л/с пользователя;
- @baseSubject - базовый СУ пользователя (физлицо/юрлицо).