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

PreviousСортировка товаров на странице NextМеню, карты, ссылки

Last updated 2 years ago

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

Администрирование и управление контентом 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 будет указано имя неизвестного тега).

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

PreviousСортировка товаров на странице NextМеню, карты, ссылки

Last updated 2 years ago