Центр документации
Карта сайта

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


Установка собственных гаджетов

В визуальном редакторе есть возможность вставки гаджетов , которые представляют из себя заготовки HTML кода со вставкой данных, введённых в форме добавления гаджета на страницу.


В системе есть 2 встроенных гаджета: YouTube и RuTube. При вставке достаточно указать параметры (URL ролика, ширина, высота) и на страницу будет вставлен полноценный код проигрываемого ролика.


Пользователи могут добавлять собственные заготовки, которые будут использоваться при вставке гаджетов. Для этого необходимо:

  1. Выбрать имя гаджета. Например, гаджет my_gadget, который выводит заданное изображение.
  2.   В файл _local/_admin/templates/lang/gadgets.lng добавить языковые переменные:


    %%my_gadget%en%%
    MyGadget
    %%my_gadget%ru%%
    MyGadget

    %%my_gadget_author%en%%
    Amiro
    %%my_gadget_author%ru%%
    Amiro

    %%my_gadget_url%en%%
    http://www.amiro.ru/
    %%my_gadget_url%ru%%
    http://www.amiro.ru/

    %%my_gadget_description%en%%
    Description of the current gadget at the popup window.
    %%my_gadget_description%ru%%
  3. Описание гаджета на вплывающем окне выбора гаджетов.

    В языковой файл _local/_admin/templates/lang/gadgets.lng добавляются не только переменные для отображения на всплывающем окне «Гаджеты», но также остальные языковые переменные используемые внутри текущего гаджета.

    Для примера смотрите встроенный гаджет Example, использование переменной %%example_disclaimer%% в файлах _local/_admin/templates/lang/gadgets.lng и _local/_admin/templates/gadgets/example_parameters.tpl.  

  4. Добавить 2 шаблона в путь (или папку на диске) _local/_admin/templates/gadgets/:
    1. {имя гаджета}.tpl. Например, my_gadget.tpl
      В этом шаблоне располагается HTML код гаджета, который в конечном счёте будет вставлен на страницу. Переменные данные, которые подставляются из вводимых пользователем параметров вводятся с помощью ##, как и в общем синтаксисе шаблона. Например:
      <img src=”##source##” width=”##width##” height=”##height##” alt=”##alt##”>
    2. {имя гаджета}_parameters.tpl. Например, my_gadget_parameters.tpl
      В шаблоне хранится форма, выводимая при вставке гаджета на страницу в менеджере сайта. Форма содержит параметры, запрашиваемые у пользователя для вставки в HTML код гаджета. Обрамлять тэгом <form> и добавлять кнопки сохранения форме нельзя – они добавятся автоматически.

      В шаблоне можно использовать JavaScript и языковые переменные из файла _local/_admin/templates/lang/gadgets.lng.

      При открытии на редактирование параметры, соответствующие именам полей будут вставлены автоматически, используя JavaScript функцию formSetValue, которая поставит для полей формы значения, соответствующие сохранённым ранее. Если необходимо использовать при вставке определённые замены или ещё более сложные опреации, то для поля необходимо поставить атрибут setter='myFieldSetter', где myFieldSetter – это определённая в этом же шаблоне JavaScript функция. myFieldSetter принимает на вход массив значений всех полей и самостоятельно выставляет полю необходимое значение.

      После внесения параметров при вставке гаджета JavaScript получает значение полей формы и вставляет их в HTML код гаджета. Если для какого-либо поля необходимо сделать разбор введённого параметра, нужно указать атрибут поля getter='myFieldGetter'. JavaScript функция myFieldGetter на вход принимает значение текущего поля и возвращает значение, которое необходимо сохранить. Если хотя бы одна подобная функция возвращает false, то форма сохранена не будет. Функция реализуется в этом же шаблоне.

      Пример шаблона запроса параметров гаджета:

       %%src%% <input type=”text” name=”source” value=”” setter=”setSource” id=”imageLink”><br>
      %%width%% <input type=”text” name=”width” value=”” getter=”getWidth”><br>
      %%height%% <input type=”text” name=”height” value=”” getter=”getHeight”><br>
      %%alt%% <input type=”text” name=” alt” value=””><br>

      <script type=”text/javascript”>
      function setSource(aData){
      var oField = document.getElementById('imageLink');
      oField.value = (aData[‘source’].indexOf(‘http://’) == 0 ? ‘’ : ‘http://’) +
      aData[‘source’];
      }

      function getWidth(value){
      if(value == ‘’){
      return false;
      }
      return parseInt(value);
      }

      function getHeight(value){
      if(value == ‘’){
      return false;
      }
      return parseInt(value);
      }
      </script>
  5. Чтобы гаджет в спиcке выбора был не ссылкой, а изображением, в папку _mod_files/ce_images/gadgets/ необходимо добавить изображение с названием gadget_{имя гаджета}.jpg 
  6. Открыть настройки системы и перейти к настройкам «Менеджер сайта : Визуальный редактор». После проведённых действий среди вариантов опции «Разрешённые гаджеты» появится так же пользовательский гаджет my_gadget. Выбрать необходимые для использования гаджеты и сохранить настройки.
  7. Перегрузить страницу с менеджером сайта. Гаджет появится в списке пользовательских и будет доступен для вставки на сайт.

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API)
 2000 – 2021 © Amiro.CMS Все права защищены.