...
| Code Block | ||
|---|---|---|
| ||
container:
online_shop: # ключ сервиса (произвольный)
template: widgets/container/iframe
src: "http://example.com" # URL для iframe
css_class: full-size # растягивает фрейм на всю страницу
weather: # можно указать несколько сервисов
# здесь используется пользовательский JST-шаблон,
# который находится в $server_client/assets/tempaltes/ template: widgets/container/weather # используется пользовательский JST-шаблон
template: widgets/container/weather custom_option: some value # произвольные опции, передаваемые в шаблон |
...
Пользовательские шаблоны требуются в случае, если
Интеграция в shortcut
Также поддерживается интеграция виджетов container в shortcut'ы. Для этого если сервис встраивается не через iframe.
Допустим, требуется встроить информер погоды со стороннего сайта из примера в предыдущем разделе.
Получаем HTML-код информера, воспользовавшись генератором на этом сайте. Например, такой:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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. Получаем такой результат:
| Code Block | ||||
|---|---|---|---|---|
| ||||
%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'ы:
| Code Block | ||
|---|---|---|
| ||
shortcuts:
...
container:
weather: # ключ, соответствующий ключу сервиса в widgets.yml
some_option: some value # опции shortcut'а |
Затем shortcut добавляется на стену (shortcuts_wall) в любое подходящее место через файл $server_client/widgets/shortcuts_wall.yml:
| Code Block | ||
|---|---|---|
| ||
shortcuts_wall: main: # идентификатор стены ... - row: 2 # строка col: 3 # столбец type: container key: weather |
Использование переменных в пользовательских шаблонах
Шаблоны допускают использование языка CoffeeScript (см. описание шаблонизатора).
В контексте шаблона доступны следующие переменные:
- @options - опции виджета container;
- @account - текущий л/с пользователя;
- @baseSubject - базовый СУ пользователя (физлицо/юрлицо).