Контролы и шаблоны контролов

Администрирование и управление контентом CMS Zeta Web выполняется в программе 1С: Предприятие.

Zeta Web 2.x

Основные инструменты доступны в панели управления сайтом, которую можно открыть из меню Zeta Web, кликнув на соответствующий пункт меню "Панель управления сайтом".

Zeta Web 3.x

Основные инструменты доступны по ссылке меню Инструменты Zeta Web Панель управления "Контент".

Контролы

Zeta Web 2.x

Для просмотра списка и редактирования шаблонов контролов, перейдите на вкладку Наполнение сайта, затем на вкладку Контролы:

Zeta Web 3.x

В списке слева - представлены, сгруппированные по смыслу, доступные к использованию контролы. В правом списке при выборе конкретного контрола отображаются доступные (сверстанные) шаблоны.

На форме контрола доступны следующие данные и настройки:

На вкладке Шапка:

  • Наименование - наименование;

  • Имя контрола - наименование модуля в CMS;

  • Повторяющиеся данные - контрол поддерживает вывод списков;

  • Многоколоночный - контрол поддерживает вывод списков в виде таблиц.

На вкладке Параметры приведен список всех параметров контрола (обязательные параметры отмечены флажком).

Параметры контрола задаются на этапе добавления контрола в html-контейнер.

Параметры контролов индивидуальны, но есть и общие, например:

  • Число элементов на странице - позволяет разбивать списки данных на страницы указанного размера, например, по 10 записей на странице;

  • Число колонок - позволяет указать количество повторений основного контента шаблона контрола (см. Вывод таблиц);

  • Распределение данных "по вертикали" - позволяет выводить данные в много колоночном контроле не слева-направо, а сверху-вниз (см. Вывод таблиц).

На вкладке Шаблоны и части шаблонов выведен список доступных к использованию в шаблоне частей шаблонов (левый список) и список доступных (сверстанных) шаблонов (правый список).

При выделении шаблона контрола (справа) - в левой части жирным шрифтом будут выделены использованные в шаблоне части.

На вкладке Роли настраиваются права доступа к контролу.

Для настройки прав, установите флажок напротив тех ролей, которым должен быть доступен контрол и нажмите кнопку Записать.

У каждого контрола для разграничений прав доступа есть два предопределенных параметра:

  • Скрывать от анонимного пользователя - контрол не будет добавлен в DOM-модель документа для анонимных посетителей сайта.

  • Скрывать от авторизованного пользователя - контрол не будет добавлен в DOM-модель документа для авторизованных посетителей сайта.

На вкладке Настройка сортировки настраивается сортировка списков по умолчанию.

Для добавления новой настройки сортировки, необходимо нажать на кнопку Добавить и задать наименование новой настройки. В списке полей сортировки нажать на кнопку Добавить, в открывшемся окне выбрать поле, по которому требуется сортировка данных контрола и нажать кнопку Выбрать. В списке полей указать направление сортировки. После добавления всех полей сортировки, нажмите на кнопку Записать.

Вы можете добавлять несколько полей в настройку сортировки. Сортировка будет применена последовательно.

Настройка сортировки на данный момент доступна ограниченному списку контролов.

Настройка сортировки задается в параметрах контрола при добавлении в html-контейнер.

Шаблоны контролов

Каждый контрол может представлять свои данные в произвольном виде, с использованием настраиваемых шаблонов.

В теле шаблона контрола используются части шаблона, которые в зависимости от своего типа отрисовываются в различные html-элементы, ссылки на внутренние страницы, изображения, а также любые доступные html-теги.

Для редактирования части шаблона, ссылки или изображения установите курсор мыши на нужном html-теге или части шаблона и нажмите на кнопку Редактировать.

Части шаблонов

Части шаблона в теле шаблона представлены служебными тегами, заключенными в квадратные скобки.

Если часть шаблона отвечает за вывод каких-либо данных, в теле тега располагается служебная переменная @Значение.

Все доступные к использованию в шаблоне части шаблона расположены в виде дерева, в правой части редактора шаблонов, и добавляются в поля шаблона перетаскиванием.

В открывшемся окне доступна настройка параметров добавляемой части шаблона.

<!-- пример части шаблона -->
[UserName]
    @Значение
[/UserName]

Если имя пользователя заполнено - в DOM-модель, вместо части шаблона, будет добавлено значение имени.

В противном случае, элемент будет исключен из DOM-модели.

<!-- пример части шаблона -->
[UserName]
    <span class="user-name">
        @Значение
    </span>
[/UserName]

В приведенном примере, тега span не будет добавлен в DOM-модель, если имя пользователя не заполнено.

Части шаблона можно вкладывать в друг друга, получая такие логические конструкции:

[UserName]
    [UserLastname]
        [UserName]
            @Значение
        [/UserName]
        [UserLastName]
            &nbsp;@Значение
        [/UserLastname]
    [/UserLastName]
[/UserName]

В приведенном выше примере, имя и фамилия пользователя будет добавлена в DOM-модель, только в том случае, если заданы значения у каждого из полей данных.

Части шаблона, отрисовываемые в html-элементы могут иметь дополнительные настройки, а также могут дополнены произвольными атрибутами.

[LinkTo data-my-atrribute="my-attribute value" target="_blank"]
    Перейти по ссылке
[/LinkTo]

Результат:

<a href="url-generated-by-cms" data-my-atrribute="my-attribute value" target="_blank">
    Перейти по ссылке
</a>

Части шаблона можно использовать в качестве атрибутов для html-тегов.

<span title="[ProductName]@Значение[/ProductName]">
    [ProductCode]
        @Значение
    {/ProductCode]
</span>

Результат:

<span title="Подушка двигателя в сборе">
    0000012345
</span>

Состав шаблона

Шаблон состоит из следующих полей:

  • Шапка (доступна только при выводе списков и таблиц);

  • Левая колонка (доступна только при выводе таблиц);

  • Основной контент;

  • Правая колонка (доступна только при выводе таблиц);

  • Подвал (доступен только при выводе списков и таблиц);

  • Отсутствие данных (доступен только при выводе списков и таблиц);

  • Анимация.

Шапка, Подвал - см. типы шаблонов Вывод списков и Вывод таблиц.

Левая колонка, Правая колона - см. тип шаблона Вывод таблиц.

Основной контент - см. типы шаблонов Статический, Вывод списков и Вывод таблиц.

Отсутствие данных - контент, который будет выведен внутри элемента div, отвечающего за вывод контрола, в случае отсутствия данных при отображение списков и таблиц.

Анимация - контент, который будет наложен на весь элемент div, отвечающий за вывод контрола, при выполнении каких-либо действий, требующих обновления контента контролов.

Типы шаблонов

В CMS Zeta Web выделяется три основных типа шаблонов:

1. Статический

Для контролов, выводящих статические данные или простую форму заполняется только поле Основной контент.

<!-- контент поля Основной контент-->
<div class="add-alphabet-letter-form">
    <div class="form-row">
        [AlphabetLetterLabel]
            Буква:
        [/AlphabetLetterLabel]
        [InputAlphabetLetter placeholder="Введите букву и нажмите Enter"]
            @Значение
        [/InputAlphabetLetter]
    </div>
</div>
<!-- конец контента поля Основной контент -->

Результат:

<div id="zw_addAlphabetLetter" cp_..."...">
   <div class="add-alphabet-letter-form">
        <div class="form-row">
            <label for="alphabetLetter">
                Буква:
            </label>
            <input name="alphabetLetter" type="input" placeholder="Введите букву и нажмите Enter" />
        </div>
    </div>
</div>

2. Вывод списков

Для контролов, выводящих списки данных заполняются поля Шапка, Основной контент и Подвал.

<!-- контент поля Шапка -->
<div>
<!-- конец контента поля Шапка -->
    <!-- контент поля Основной контент -->
    <div class="alphabet-row">        
        [AlphabetLetter]
            <span class="alphabet-letter">
                @Значение
            </span>
        [/AlphabetLetter]
    </div>
    <!-- конец контента поля Основной контент -->
<!-- контент поля Подвал-->
</div>
<!-- конец контента поля Подвал-->

Результат вывода алфавита:

<!-- контент поля Шапка -->
<div>
<!-- конец контента поля Шапка -->
    <!-- контент поля Основной контент -->
    <div class="alphabet-row">        
        <span class="alphabet-letter">
            А
        </span>
    </div>
    <div class="alphabet-row">        
        <span class="alphabet-letter">
            Б
        </span>
    </div>
    <!-- ... остальные буквы алфавита -->
    <div class="alphabet-row">        
        <span class="alphabet-letter">
            Ю
        </span>
    </div>
    <div class="alphabet-row">        
        <span class="alphabet-letter">
            я
        </span>
    </div>
    <!-- конец контента поля Основной контент -->
<!-- контент поля Подвал-->
</div>
<!-- конец контента поля Подвал-->

3. Вывод таблиц

Некоторые контролы можно выводить в виде таблиц:

<!-- контент поля Шапка -->
<table>
<!-- конец контента поля Шапка -->
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            [AlphabetLetter]
                <span class="alphabet-letter">
                    @Значение
                </span>
            [/AlphabetLetter]
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->    
<!-- контент поля Подвал-->
</table>
<!-- конец контента поля Подвал-->

Результат вывода алфавита (значение настройки Распределять данные по вертикали = Нет, значение настройки Количество колонок = 3):

<!-- контент поля Шапка -->
<table>
<!-- конец контента поля Шапка -->
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                А
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Б
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                В
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->        
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Г
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Д
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Е
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->    
    <!-- ... остальные буквы алфавита -->
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Э
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Ю
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Я
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->
<!-- контент поля Подвал-->
</table>
<!-- конец контента поля Подвал-->

Результат вывода алфавита (значение настройки Распределять данные по вертикали = Да, значение настройки Количество колонок = 3):

<!-- контент поля Шапка -->
<table>
<!-- конец контента поля Шапка -->
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                А
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                К
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Х
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->        
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Б
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Л
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Ц
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->    
    <!-- ... остальные буквы алфавита -->
    <!-- контент поля Левая колонка -->
    <tr class="alphabet-row">
    <!-- конец контента поля Левая колонка -->    
        <!-- контент поля Основной контент -->
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Й
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Ф
            </span>
        </td>
        <td class="alphabet-letter">        
            <span class="alphabet-letter">
                Я
            </span>
        </td>
        <!-- конец контента поля Основной контент -->
    <!-- контент поля Левая колонка -->
    </tr>
    <!-- конец контента поля Левая колонка -->
<!-- контент поля Подвал-->
</table>
<!-- конец контента поля Подвал-->

При форматировании текстов шаблона (кнопка Форматировать HTML) в панели сообщений можно увидеть следующий текст: Не определен тэг: UnknownTemplatePart (где вместо UnknownTemplatePart будет указано имя неизвестного тега).

К появлению такого сообщения может привести три случая: - ошибка при написании части шаблона; - часть шаблона устарела и заменена на новую; - часть шаблона не поддерживается контролом.

Last updated