Управление дизайном страниц

Содержание...

Каждое приложение может использовать собственную функциональность редактирования дизайна и свой шаблонизатор. Но, если используется шаблонизатор Smarty, то удобно использовать системный редактор дизайна, который предоставляет фреймворк Webasyst.

Темы дизайна

Если у приложения есть фронтенд (т. е. страницы приложения должны быть видны на сайте), то для того, чтобы пользователи приложения могли редактировать внешний вид страниц, рекомендуется использовать темы дизайна. Для этого в главном конфигурационном файле приложения wa-apps/[app_id]/lib/config/app.php нужно добвить добавить свойство 

'themes' => true,

Нужно также создать тему дизайна с идентификатором default, которая будет использоваться по умолчанию, в директории wa-apps/[app_id]/themes/default/.

Тема дизайна — это объединенные в одной директории HTML/Smarty-шаблоны, файлы JavaScript, CSS, изображения и файл-манифест theme.xml.

Обязательные параметры файла-манифеста theme.xml:

  • id: совпадает с названием директории для темы
  • app: идентификатор приложения (app_id), для которого создана тема
  • name: название темы — обязательно указать хотя бы на одном языке
  • files: список файлов, доступных для редактирования в приложении «Сайт»

Системные требования

Для темы дизайна можно указать требования к окружению, которые будут проверяться при установке темы с помощью «Инсталлера». Для этого в файл theme.xml нужно добавить элемент requirements, как показано в примере:

<requirements>
    <requirement property="php" value=">=7.2" strict="true">
        <name locale="ru_RU">Минимальная версия PHP</name>
        <name locale="en_US">Minimum PHP version</name>
    </requirement>
    <requirement property="app.shop" value="8" strict="true">
        <name locale="ru_RU">Минимальная версия приложения Shop-Script</name>
        <name locale="en_US">Minimum Shop-Script app version</name>
    </requirement>
    <requirement property="phpini.max_exection_time" value=">60">
        <name locale="ru_RU">Максимальное время исполнения PHP-скриптов</name>
        <name locale="en_US">Maximum PHP script execution time</name>
    </requirement>
</requirements>

Информация о разработчике

В файле theme.xml можно указать ссылку на инструкцию по использованию темы дизайна — с помощью XML-элемента instruction. Ссылка на инструкцию будет показана на странице настроек темы дизайна в бекенде приложения.

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

Пример
<instruction locale="en_US">https://support.webasyst.com/26761/design-theme-hypermarket/</instruction>
<instruction locale="ru_RU">https://support.webasyst.ru/26716/design-theme-hypermarket/</instruction>

Можно также указать ссылку на сайт, где вы окажете помощь пользователю, или email-адрес, на который можно написать, чтобы задать вам вопрос. Для этого используется элемент support — он также поддерживает атрибут locale.

Пример
<support locale="en_US">https://support.webasyst.com</support>
<support locale="ru_RU">https://support.webasyst.ru</support>

Пример файла theme.xml

Пример файла описания темы default для приложения «Сайт» (тема располагается в директории wa-apps/site/themes/default/):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE theme PUBLIC "wa-app-theme" "http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd" >
<theme id="default" system="1" vendor="webasyst" app="site" version="1.0.0">
  <name locale="en_US">Default theme</name>
  <name locale="ru_RU">Основная тема</name>
  <files>
    <file path="index.html">
      <description locale="en_US">Common layout</description>
      <description locale="ru_RU">Основной шаблон</description>
    </file>
    <file path="page.html">
      <description locale="en_US">Page content</description>
    </file>
    <file path="sidebar.html">
      <description locale="en_US">Page navigation</description>
    </file>
    <file path="error.html">
      <description locale="en_US">404 and other errors</description>
    </file>
    <file path="default.css">
      <description locale="en_US">CSS for common desktop and laptop computers</description>
    </file>
    <file path="mobile.css">
      <description locale="en_US">CSS for multi-touch mobile devices</description>
    </file>
  </files>
</theme>

Смотри также:

Для того чтобы в контроллерах и экшенах фронтенда приложения использовать файлы шаблонов из темы оформления, нужно в коде контроллера/экшена указать имя нужного файла:

$this->setThemeTemplate('page.html');
Этот метод доступен в экземплярах классов, являющихся потомками базовых классов waViewAction, waViewController, waViewActions, waLayout.

По умолчанию темы дизайна для приложения размещаются в директории wa-apps/[app_id]/themes/.

Когда пользователь редактирует и сохраняет тему дизайна с помощью встроенного редактора, создаётся копия темы в директории wa-data/public/[app_id]/themes/. Эта копия используется для оформления страниц сайта. При этом можно устанавливать новые версии приложения и темы дизайна, но ранее сохранённая копия темы дизайна продолжит использоваться на сайте. Чтобы вместо старой сохранённой копии темы дизайна начать использовать обновлённую версию темы дизайна, нужно восстановить тему дизайна до оригинального состояния — старая сохранённая копия при этом удаляется до очередного сохранения в редакторе дизайна.

Шпаргалка

В шаблонах дизайна приложения можно использовать почти все возможности шаблонизатора Smarty, в том числе системные переменные и методы фреймворка Webasyst. Например, доступны переменная {$wa_theme_url}, которая указывает путь к директории темы дизайна, и объект {$wa}, предоставляющий набор полезных методов.

Методы, доступные в контексте редактируемого шаблона, перечислены в шпаргалке редактора дизайна. Шпаргалка — это подсказка, созданная для удобства пользователя. Основной список элементов шпаргалки может быть расширен в конфигурационном файле приложения wa-apps/[app_id]/lib/config/site.php по этому примеру, в котором разные доступные переменные описаны для разных шаблонов дизайна.

<?php

return [
    'vars' => [
        'page.html' => [
            '$page.name' => _w('Page name'),
            '$page.title' => _w('Page title (<title>)'),
            '$page.content' => _w('Page content'),
            '$page.update_datetime' => _w('Page last update datetime'),
        ],
        'error.html' => [
            '$error_code' => _w('Error code (e.g. 404)'),
            '$error_message' => _w('Error message'),
        ]
    ]
];

Ключом основного массива должно быть имя файла, а значением — массив переменных. Если в приложении есть переменные, доступные во всех шаблонах, их можно описать в подмассиве с ключом all вместо названия файла.