Настройки тем дизайна: обновлённый интерфейс и новые возможности

Дмитрий Елшин

Сегодня в ветке dev на GitHub опубликован предрелиз очередного обновления Фреймворка. В этой теме хотим рассказать и обсудить с вами изменения, которые коснулись тем дизайна.

Что нового?

  • Улучшено обновление темы
  • Многоуровневая группировка настроек
  • Поиск по настройкам
  • Импорт/экспорт настроек
  • Новые параметры и новый тип настройки
  • Требования темы к окружению установки

Интерфейс

Мы значительно изменили подход к настройкам темы дизайна конечным пользователем.

Раньше, когда пользователь открывал настройки темы — у него открывался полный список настроек. Существуют темы, в которых количество настроек переваливает за две сотни. Ориентироваться среди них было невозможно.

Чтобы упростить навигацию по настройкам темы — разработчикам даётся возможность группировать их (подробнее о группировке см. ниже). Пользователям доступен поиск по настройкам и группам настроек.

При открытии экрана с настройками все группы по умолчанию свёрнуты. Одновременно развёрнутой может быть только одна группа (за исключением поиска).

При желании можно развернуть или свернуть все группы. В развёрнутом режиме появятся якори-ссылки с названиями групп первого уровня. Клик по такой ссылке свернёт остальные группы и перенесёт пользователя к выбранной. Ссылки развёрнутых групп подсвечиваются.

Обновлённый экран настроек тем дизайна.


В обновлённом экране настроек тем дизайна появился живой поиск. Он ищет совпадение в названиях групп и названиях самих настроек. Поиск по настройкам типа paragraph (о них ниже) не осуществляется. Найденные совпадения подсвечиваются. Лишнее скрывается. У группы первого уровня при поиске появляется возможность показать всё её содержимое.


Ещё добавили кнопку "Наверх", а сохранение происходит без обновления страницы.

Новый тип и новые параметры

Чтобы вывести простой текст или более детальное описание какой-нибудь настройки, разработчикам приходилась хаками менять структуру отображения настроек. Теперь есть возможность добавить псевдонастройку, которая будет выводить простой текст. Такая настройка должна иметь тип paragraph. Пример:

<setting var="dislike" control_type="paragraph">
    <value></value>
    <name locale="en_US">We deserve all the dislikes.</name>
    <name locale="ru_RU">Мы заслужили все дизлайки.</name>
</setting>


Любую настройку можно сделать скрытой. Для этого у настройки надо добавить параметр invisible и установить значение true. Пример:

<setting var="color_links_hover" control_type="color" invisible="true">
    ...
</setting>

Если в теме дизайна есть скрытые настройки, то около поля поиска появится чекбокс, который позволит отобразить их. Скрытые настройки не будут выводиться в поиске, пока чекбокс не будет активен.


Каждой настройке или группе можно добавить подсказку. Она будет выводиться около названия и давать пояснение (или вводить в заблуждение). Пример:

<setting var="color_scheme" control_type="image_select">
    <value>img/backgrounds/themesettings/green.png</value>
    <name locale="ru_RU">Баннер</name>
    <name locale="en_US">Banner</name>
    <tooltip locale="ru_RU">Выбирай осторожно</tooltip>
    <tooltip locale="en_US">Choose carefully</tooltip>
    <options>
        <option value="img/backgrounds/themesettings/green.png"></option>
        ...
    </options>
</setting>


У настроек с типом image_select фон стал в клеточку. Удобно для изображений с прозрачным фоном.

Раньше контакты разработчика и инструкция темы была только на её странице в Магазине Webasyst. Теперь разработчик может указать их в theme.xml:

<theme id="hypermarket" system="0" vendor="webasyst" author="Webasyst" app="site" version="1.1.2">
    ...
    <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>
    <support locale="en_US">https://support.webasyst.com</support>
    <support locale="ru_RU">https://support.webasyst.ru</support>
    ...
</theme>

Подробнее о порядке элементов в файле theme.xml смотрите в DTD определении.

В параметр support можно указать сторонний сайт или email. В параметр instruction только ссылку на сторонний сайт. Эти ссылки отобразятся в правом сайдбаре экрана настроек темы:


Экспорт/Импорт настроек

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

Экспорт выдаёт архив, в котором содержится файл settings.json и изображения (значение настроек типа image). Импорт принимает на вход экспортированный ранее архив и устанавливает значение для тех настроек, которые были ранее.

Если после экспорта юзер обновил тему и там появились новые настройки — после импорта у них останутся дефолтные значения. Если после обновления какая-то настройка была упразднена — она не восстановится при импорте. Импортировать настройки можно только от темы этого же приложения. Настройки родительской темы не экспортируются и не импортируются.


Обновление темы

В этой версии мы улучшили обновление тем дизайна. theme.xml из новой версии (wa-apps) будет копироваться в wa-data, при этом значение настроек будет сохраняться. Для новых настроек будет устанавливаться их дефолтное значение.

Если в обновлённой версии темы разработчик удалил настройку, но она ещё используется в шаблонах предыдущей версии (пользователь внёс в шаблон свои правки и не желает его обновлять), то такая настройка будет сохранена в обновлённом theme.xml в виртуальной группе "Устаревшие настройки".


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

Приложения и плагины могут устанавливать системные требования к окружению установки. Темы дизайна получили такой же механизм. Системные требования тем дизайна в Инсталлере  учитываются только от родительской темы дизайна. Для редактора тем дизайна требования можно продублировать и в дочерних темах. Пример:

<requirements>
    <requirement property="php" value=">=7.2" strict="true">
        <name locale="ru_RU">PHP требование</name>
        <name locale="en_US">PHP requirement</name>
    </requirement>
    <requirement property="app.shop" value="8" strict="true">
    </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>


Группировка настроек

Настройка с типом group_divider — является группой настроек. Такая настройка так же должна иметь параметр var. Все настройки, которые идут после настройки с типом group_divider — попадают в эту группу настроек.

Чтобы вложить одну группу настроек в другую — у той группы, которую надо вложить задайте value в таком формате:

<value>{var_parent_group_divider}/{var_current_group_divider}</value>

Пример настроек и групп вложенных друг в друга:

<settings>
    <setting var="group_1" control_type="group_divider">
        <name locale="en_US">Group 1</name>
    </setting>

    <setting var="settings_1">
        <name locale="en_US">Setting for group 1</name>
    </setting>

    <setting var="group_2" control_type="group_divider">
        <value>group_1/group_2</value>
        <name locale="en_US">Group 2</name>
    </setting>

    <setting var="settings_2">
        <name locale="en_US">Setting for group 2</name>
    </setting>

    <setting var="group_3" control_type="group_divider">
        <value>group_1/group_2/group_3</value>
        <name locale="en_US">Group 3</name>
    </setting>

    <setting var="settings_3">
        <name locale="en_US">Setting for group 3</name>
    </setting>
    
    ...
</settings>

Если в файле theme.xml внутри блока settings первая настройка будет не с типом group_divider — она будет входить в виртуальную группу настроек "Общие настройки".

И ещё

Была исправлена проблема для настроек с типом image, которая заключалась в кешировании браузером картинок из темы. Теперь в value такой настройки, прямо в theme.xml будет сохраняться версия в виде timestamp.

В одном из следующих релизов Фреймворка мы запретим использование кастомного js кода в настройках тем дизайна. Разработчикам следует использовать средства и возможности предоставляемые платформой.

Соответствующие разделы в документации обновятся с выходом стабильной версии Фреймворка.

31 октября 2018
  • Евгений Леман 31 октября 2018 19:25

    За импорт/экспорт большой респект!
  • Алексей Александрович 31 октября 2018 21:36

    Старые табы отвалились и сломали настройки темы полностью. Это ок. Будем переписывать файл настроек на новый лад и выкладывать в маркет, как только выйдет обновления фреймворка. Оно ведь выйдет вместе с SS8?

    Или можно как-то заранее обновить тему в маркете? С кол-вом тем модерация может быть не быстрой.

    А теперь вопрос по корзине.  Для Dummy будет обновление до релиза?

    Файла order.html нет в списке файлов темы Default 3.0. Это все изменения?

  • Алексей Webasyst 31 октября 2018 22:12

    Можете тему обновить заранее. Обновление фреймворка есть в dev версии и выйдет вместе с релизом. Файл order.html есть физически в теме, но пока не добавлен в theme.xml.

  • Алексей Александрович 31 октября 2018 22:17

    Ну да, я об этом и писал, что его нет в списке файлов theme.xml. Думал, что может просто забыли добавить, решил сообщить.

    Т.е. по факту нужно два файла добавить в темы order.js и order.html? Ну плюс свои стили накатить.

  • Дмитрий Елшин Webasyst 31 октября 2018 22:29

    Публикация Фреймворка намечена вместе с выходом Shop-Script 8.

  • Алексей Александрович 31 октября 2018 23:13

    Глобальные параметры не пробрасываются через файл cart.html, например, скрытие сайдбара. Так и должно быть?

    {$wa->globals("hideSidebar", true)}

  • Поздно вчера было, я имел в виду файл order.html =)

  • Александр Тарасенко 3 ноября 2018 14:36

    Хотелось бы инструкцию для разработчиков тем, что нужно добавить, изменить, учесть в теме дизайна для отображения на фронтенде нового функционала (корзина, оформление заказа, регистрация по телефону и т.д.)? 

  • Дмитрий Елшин Webasyst 7 ноября 2018 21:21

    Александр, загляните сюда

  • Владимир Сергеев 12 ноября 2018 19:10

    Добавьте фон в клеточку и для настройки типа image, а не только image_select.
    Плюс к изображению этой настройки добавьте max-width: 300px например. 

  • Дмитрий Елшин Webasyst 13 ноября 2018 12:06

    @Владимир добавил. Выйдет в ближайшем обновлении.

  • Владимир Сергеев 13 ноября 2018 12:07

    @Дмитрий, благодарю! =)

  • Владимир Сергеев 14 ноября 2018 13:32

    А можно как-то ограничить обновление темы в старых версиях движка?
    В новой версии появились <requirements>. Но старая версия движка об этом не знает. 

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

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

  • Старый инсталлер умеет понимать системные требования тем дизайна в момент установки/обновления. Он может не совсем корректно показать причину, по которой нельзя установить (например, просто серая кнопка "установить" без поясняющих надписей).

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

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

  • Дмитрий Елшин Webasyst 15 ноября 2018 20:22

    Обновили DTD разметку для theme.xml на нашем .com

    Теперь инструкция и поддержка указываются внутри <theme>, после описания.
  • Что делать теперь с темами, которые уже на модерации?

  • Дмитрий Елшин Webasyst 15 ноября 2018 21:31

    Отзовите заявку, а после исправления отправьте ещё раз.



Чтобы добавить комментарий, зарегистрируйтесь или войдите