Контролы и шаблоны контролов
Администрирование и управление контентом 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] @Значение [/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 будет указано имя неизвестного тега).
К появлению такого сообщения может привести три случая:
- ошибка при написании части шаблона;
- часть шаблона устарела и заменена на новую;
- часть шаблона не поддерживается контролом.