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

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

Сегодня в ветке 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

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

  • Евгений Леман 19 ноября 2018 08:38
    В одном из следующих релизов Фреймворка мы запретим использование кастомного js кода в настройках тем дизайна.

    A CSS? Ну поганые же цвета/размеры/шрифты/отступы. Не могу смириться.

  • Дмитрий Елшин Webasyst 19 ноября 2018 10:09

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

    Улучшать безболезненно для конечных пользователей наших с вами продуктов. По этому использование стилей в настройках так же не позволит теме пройти модерацию.

    Разработчикам предлагается сосредоточится над улучшением шаблонов в своих темах. При этом, если у вас есть пожелания по экрану настроек — справедливо будет указать их в этой или новой теме форума.
  • Евгений Леман 19 ноября 2018 15:54

    Было:


    Стало:


    Кто-то наверняка скажет, что я придираюсь, но я выждал определенное кол-во времени на "адаптацию" и восприятие не поменялось. Стало как-то "грязно". И я бы подправил это сам, а заодно и вернул бы привычные и более удобные для клиентов вкладки, если бы CSS не был запрещен...

  • Виктор 25 июля 2019 05:47

    Поддержка форматов WEBP и SVG для control_type="image" и image_select планируется?

  • Джо Неуловимый 25 июля 2019 10:21

    Виктор, когда планируется остановка в накрутке отзывов к вашим темам дизайна? Вы что умнее всех что ли?

  • Евгений Леман 18 сентября 2019 15:56

    Есть довольно существенное(ну вроде как) пожелание - добавить параметр `collapsed`(ну или как угодно назовите) для настроек с типом `group_divider`. Проблема была еще в старой моей теме, но при создании новой она стала слишком существенной. Посмотрел по темам коллег - у них тоже есть такие же недостатки. Поясню на конкретном примере. Есть у меня в настройках group_divider первого уровня с названием "Главная страница". Сама главная страница по сути представляет собой конструктор из заготовленных "секций". Юзер сам выбирает какие секции он хочет и настраивает их. Но проблема в том, что таких секций может быть и несколько десятков. Хотя уже при 5-7 можно потеряться. Структурно древо настроек выглядит так:

    Общие настройки
    Еще настройки
    Главная страница
        Секция "А"
            - опция
            - опция
            ...
        Секция "Б"
            - опция
            - опция
            ...
        Секция "В"
            - опция
            - опция
            ...

    Это не большая проблема, если каждая секция имеет по 1-2 опции. Но зачастую это не так. Например, если речь идет о слайдере или блоке "преимуществ" или других подобных. И если таких секций больше десятка(а у меня вот тут в текущей теме их больше двух десятков), то даже зная что искать, найти это проблематично. Делать эти секции через group_divider первым уровнем? Не логично, да и не многим удобнее. В моем, например, случае есть еще и аналогичные по логике секции для сайдбаров. Да еще и сайдбаров этих несколько. Если бы была возможность сворачивать по умолчанию то, что я укажу в настройках, то это решило бы проблему.

  • Евгений Леман 18 сентября 2019 16:04

    Ну и второе пожелание. Менее значимое, но тоже было бы более удобным для наших клиентов. Как бы мы ни старались вывести заполняемые значения в настройки, всё вывести туда не получится. И темообладатель в любом случае будет вынужден править какие-то шаблоны, чтобы прописать туда свои данные. Например ссылки в подвале(в современном мире это всегда несколько столбцов). Или условный user.css, user.js и пр. файлы, которые как раз и создают для пользовательских доработок, которые должны выжить при обновлении темы. Для пользователя user.css ничем не отличается от index.html. И он никогда в жизни не запомнит названия файлов, изменения в которых не нужно сбрасывать. И нас потом засыпают письмами с жалобами на то, что им приходится после каждого обновления заново ссылки в подвале прописывать. А вот если бы в theme.xml можно было бы добавить какой-нибудь условный параметр "do_not_huyak_on_update=true"...

  • Дмитрий Елшин Webasyst 18 сентября 2019 16:27

    Евгений, вашу проблему со сворачиванием услышали. Подумаем что с этим можно сделать.

    Вместо "необновляемых" файлов предлагаю заложить настройку в theme.xml с типом control_type="text" и задать ей параметр invisible="true". При обновлении тем дизайна значение этой настройки будет сохраняться.

  • Евгений Леман 18 сентября 2019 18:40

    Спасибо!

    Вместо "необновляемых" файлов предлагаю заложить настройку в theme.xml с типом control_type="text" и задать ей параметр invisible="true". При обновлении тем дизайна значение этой настройки будет сохраняться.

    Не совсем понял как это поможет. Если вы предлагаете поместить туда тот HTML, который отвечает за ссылки в футере, то это не совсем удобно. Там у полей слишком ограниченная ширина. Сами понимаете как неудобно копаться в "разломанной" переносами структуре. Особенно при отсутствии подсветки синтаксиса. Кастомный CSS туда вписать вообще не знаю как. Я так и не понял как превратить input:text в textarea. Я это делаю через F12 в браузере :)

    PS Забыл еще одно небольшое пожелание написать. Вернее писал давно, но в качестве оффтопа. Тоже не столь критичное, но не сложное и упростило бы жизнь темоделам. Хук на $theme_settings, который позволил бы подменять текущие значения из настроек. Многие темоделы на своих демо-витринах делают бар с демонстрацией основных настроек. И из-за того, что шаблоны композитны, для подмены настроек темы недостаточно вставить заменяющий хелпер в index.html. Это нужно сделать отдельно для каждого шаблона(ну по крайней мере для того, где настройки могут быть заменены куковыми). Не смертельно конечно, но постоянно что-то забывается и из-за этого ломается.

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

    Я бы сюда еще добавил возможность сворачивать\разворачивать дерево файлов во вкладке Шаблон для подпапок разной вложенности.

  • Владимир Сергеев 23 сентября 2019 17:25

    И регулировать ширину сайдбара со списком файлов.



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