Настройки тем дизайна: обновлённый интерфейс и новые возможности
Сегодня в ветке 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 кода в настройках тем дизайна. Разработчикам следует использовать средства и возможности предоставляемые платформой.
Соответствующие разделы в документации обновятся с выходом стабильной версии Фреймворка.
Старые табы отвалились и сломали настройки темы полностью. Это ок. Будем переписывать файл настроек на новый лад и выкладывать в маркет, как только выйдет обновления фреймворка. Оно ведь выйдет вместе с SS8?
Или можно как-то заранее обновить тему в маркете? С кол-вом тем модерация может быть не быстрой.
А теперь вопрос по корзине. Для Dummy будет обновление до релиза?
Файла order.html нет в списке файлов темы Default 3.0. Это все изменения?
Можете тему обновить заранее. Обновление фреймворка есть в dev версии и выйдет вместе с релизом. Файл order.html есть физически в теме, но пока не добавлен в theme.xml.
Ну да, я об этом и писал, что его нет в списке файлов theme.xml. Думал, что может просто забыли добавить, решил сообщить.
Т.е. по факту нужно два файла добавить в темы order.js и order.html? Ну плюс свои стили накатить.
Публикация Фреймворка намечена вместе с выходом Shop-Script 8.
Глобальные параметры не пробрасываются через файл cart.html, например, скрытие сайдбара. Так и должно быть?
{$wa->globals("hideSidebar", true)}Поздно вчера было, я имел в виду файл order.html =)
Хотелось бы инструкцию для разработчиков тем, что нужно добавить, изменить, учесть в теме дизайна для отображения на фронтенде нового функционала (корзина, оформление заказа, регистрация по телефону и т.д.)?
Александр, загляните сюда.
Добавьте фон в клеточку и для настройки типа image, а не только image_select.
Плюс к изображению этой настройки добавьте max-width: 300px например.
@Владимир добавил. Выйдет в ближайшем обновлении.
@Дмитрий, благодарю! =)
А можно как-то ограничить обновление темы в старых версиях движка?
В новой версии появились <requirements>. Но старая версия движка об этом не знает.
Можно сделать так, чтобы пользователи со старой версией движка не имели возможности обновить тему дизайна до версии, которая предназначена для новой версии движка?
Т.к. настройки новых версий тем дизайна могут отображаться плохо на старой версии движка.
Старый инсталлер умеет понимать системные требования тем дизайна в момент установки/обновления. Он может не совсем корректно показать причину, по которой нельзя установить (например, просто серая кнопка "установить" без поясняющих надписей).
Разве что в старом фреймворке в редакторе тем дизайна не проверяются системные требования (это, если человек самостоятельно загрузил архив с темой).
И важное уточнение - системные требования тем дизайна учитываются от родительской темы дизайна (в инсталлере это так), для редактора тем дизайна требования можно продублировать и в дочерних темах.
Обновили DTD разметку для theme.xml на нашем .com
Что делать теперь с темами, которые уже на модерации?
Отзовите заявку, а после исправления отправьте ещё раз.
A CSS? Ну поганые же цвета/размеры/шрифты/отступы. Не могу смириться.
Из-за чрезмерного использования кастомного кода в настройках тем — невозможно системно улучшать интерфейс этого экрана.
Улучшать безболезненно для конечных пользователей наших с вами продуктов. По этому использование стилей в настройках так же не позволит теме пройти модерацию.
Было:
Стало:
Кто-то наверняка скажет, что я придираюсь, но я выждал определенное кол-во времени на "адаптацию" и восприятие не поменялось. Стало как-то "грязно". И я бы подправил это сам, а заодно и вернул бы привычные и более удобные для клиентов вкладки, если бы CSS не был запрещен...
Поддержка форматов WEBP и SVG для control_type="image" и image_select планируется?
Виктор, когда планируется остановка в накрутке отзывов к вашим темам дизайна? Вы что умнее всех что ли?
Есть довольно существенное(ну вроде как) пожелание - добавить параметр `collapsed`(ну или как угодно назовите) для настроек с типом `group_divider`. Проблема была еще в старой моей теме, но при создании новой она стала слишком существенной. Посмотрел по темам коллег - у них тоже есть такие же недостатки. Поясню на конкретном примере. Есть у меня в настройках group_divider первого уровня с названием "Главная страница". Сама главная страница по сути представляет собой конструктор из заготовленных "секций". Юзер сам выбирает какие секции он хочет и настраивает их. Но проблема в том, что таких секций может быть и несколько десятков. Хотя уже при 5-7 можно потеряться. Структурно древо настроек выглядит так:
Общие настройки Еще настройки Главная страница Секция "А" - опция - опция ... Секция "Б" - опция - опция ... Секция "В" - опция - опция ...Это не большая проблема, если каждая секция имеет по 1-2 опции. Но зачастую это не так. Например, если речь идет о слайдере или блоке "преимуществ" или других подобных. И если таких секций больше десятка(а у меня вот тут в текущей теме их больше двух десятков), то даже зная что искать, найти это проблематично. Делать эти секции через group_divider первым уровнем? Не логично, да и не многим удобнее. В моем, например, случае есть еще и аналогичные по логике секции для сайдбаров. Да еще и сайдбаров этих несколько. Если бы была возможность сворачивать по умолчанию то, что я укажу в настройках, то это решило бы проблему.
Ну и второе пожелание. Менее значимое, но тоже было бы более удобным для наших клиентов. Как бы мы ни старались вывести заполняемые значения в настройки, всё вывести туда не получится. И темообладатель в любом случае будет вынужден править какие-то шаблоны, чтобы прописать туда свои данные. Например ссылки в подвале(в современном мире это всегда несколько столбцов). Или условный user.css, user.js и пр. файлы, которые как раз и создают для пользовательских доработок, которые должны выжить при обновлении темы. Для пользователя user.css ничем не отличается от index.html. И он никогда в жизни не запомнит названия файлов, изменения в которых не нужно сбрасывать. И нас потом засыпают письмами с жалобами на то, что им приходится после каждого обновления заново ссылки в подвале прописывать. А вот если бы в theme.xml можно было бы добавить какой-нибудь условный параметр "do_not_huyak_on_update=true"...
Евгений, вашу проблему со сворачиванием услышали. Подумаем что с этим можно сделать.
Вместо "необновляемых" файлов предлагаю заложить настройку в theme.xml с типом control_type="text" и задать ей параметр invisible="true". При обновлении тем дизайна значение этой настройки будет сохраняться.
Спасибо!
Не совсем понял как это поможет. Если вы предлагаете поместить туда тот HTML, который отвечает за ссылки в футере, то это не совсем удобно. Там у полей слишком ограниченная ширина. Сами понимаете как неудобно копаться в "разломанной" переносами структуре. Особенно при отсутствии подсветки синтаксиса. Кастомный CSS туда вписать вообще не знаю как. Я так и не понял как превратить input:text в textarea. Я это делаю через F12 в браузере :)
PS Забыл еще одно небольшое пожелание написать. Вернее писал давно, но в качестве оффтопа. Тоже не столь критичное, но не сложное и упростило бы жизнь темоделам. Хук на $theme_settings, который позволил бы подменять текущие значения из настроек. Многие темоделы на своих демо-витринах делают бар с демонстрацией основных настроек. И из-за того, что шаблоны композитны, для подмены настроек темы недостаточно вставить заменяющий хелпер в index.html. Это нужно сделать отдельно для каждого шаблона(ну по крайней мере для того, где настройки могут быть заменены куковыми). Не смертельно конечно, но постоянно что-то забывается и из-за этого ломается.
Я бы сюда еще добавил возможность сворачивать\разворачивать дерево файлов во вкладке Шаблон для подпапок разной вложенности.
И регулировать ширину сайдбара со списком файлов.