В ЛК присутствует возможность интеграции с внешними сервисами посредством встраивания 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 (см. описание шаблонизатора).

В контексте шаблона доступны следующие переменные: