Плагины и шаблоны для UI фронтенда

16

Коллеги! Тут вот какая идея есть. Как выяснилось в процессе обсуждения с друзями, я не первый кому это в голову пришло — Евгений Ничиков уже давно пользуется такой схемой.

У многих из нас есть плагины, которые выводят что-нибудь на фронтенд. Блок какой-нибудь с помощью хелпера, либо хука и т.д. Ну разные покупки в один клик, например, оформление на одной странице ну в общем куча разных плагинов, которые что-нибудь показывают посетителю сайта, дополняя интерфейс. И всякий раз в настройки плагина встраивается редактор шаблона, в сам плагин встраиваются методы сохранения шаблона восстановления шаблона по умолчанию и все такое. У этого способа есть несколько минусов:

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

Я предлагаю шаблон (или шаблоны) для плагина брать из самой темы дизайна. Тогда с плагином можно поставлять шаблон для любимой референсной темы дефолт и по нажатию кнопки в настройках просто копировать его в папку с текущей темой (или темой выбранной витрины). Это будет своего рода "восстановление оригинала". Пользователь бэкенда, кстати, уже сейчас может в теме оформления самостоятельно создавать и редактировать произвольные файлы шаблонов, а тут мы просто ему поможем в этом. Авторы тем могут, при желании, для популярных плагинов создать шаблоны заранее, наверняка для того же onestep уже есть заготовленные шаблоны, чтобы по запросу "помогите адаптировать под вашу тему" присылать. Пользователь бэкенда работает со встроенными редакторами, все редактирование происходит централизованно, в одном месте — удобно. Оформление отлично архивиркется, переносится, восстанавливается.

Хорошо бы как-то договориться и стандартизировать именование шаблонов, чтоб они как-то группировались в бэкенде. И/или в какой-то поддиректории их держать. Например начинать название шаблона со слова plugin, потом id плагина. Что-нибудь типа plugin.mycoolplug.html. Или, если нужно несколько шаблонов: plugin.mycoolplug.fist_template.html, plugin.mycoolplug.second_template.html и т. п.

Как идея? :)

У плагина помимо шаблона могут быть изображения, js, css. Что с этим делать еще точного решения нет, может кто предложит чего?

26 комментариев

  • +3

    В дополнение по аналогии с приложениями можно сделать описание доступных переменных/методов в шаблонах в lib/config/site.php по аналогии с приложениями.

  • +2
    ITFrogs ITFrogs 27 мая 2016 13:45 #

    А там через .htaccess открыт доступ к картинкам или нет? По идее должен быть открыт.

    • +2
      Syrnik.com Syrnik.com 27 мая 2016 13:47 #

      Везде открыт. Ив плагине и в темах. К изображениям, js и css

    • +2
      Павел Трофимов Павел Трофимов 27 мая 2016 14:28 #

      Разумно и толково.

    • +2

      Плюсую!

      Я как разработчик тем дизайна, хотел бы иметь контроль над внешним видом вывода плагина, чтобы иметь возможность адаптировать его под текущий дизайн темы. А не колхозить стилями и скриптами, пытаясь переписать стили плагина и часть его HTML разметки.

    • +2
      Eugen Nichikov Eugen Nichikov 29 мая 2016 01:01 #

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

      plugin[s?]/plugin_id[.template_name].html

    • +2
      Genasyst Genasyst 27 февраля 2018 18:24 #
    • +1
      Александр Александр 27 мая 2016 17:55 #

      Хорошая мысль, но она не новая и используется уже некоторыми плагинами(навскидку например: https://www.webasyst.ru/store/plugin/site/search/, так же ранее видел в коде этого разработчика https://www.webasyst.ru/store/vendor/809114/).

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

      Пожелание по именованию файлов шаблонов плагинов такое: идентификатор_плагина.plugin.html (пример из того же плагина поиска для приложения Сайт: search.plugin.html). Если шаблонов несколько, то прибавлять к идентификатору плагина смысловое определение второго файла/шаблона: идентификатор_плагина.второй_файл.plugin.html

      Так как шаблон будет рендерится в плагине, то проблем с подстановкой нужных переменных не будет, css и js можно будет подключить прям в этом же шаблоне, если их нельзя будет добавить в раздел <head>. С изображениями можно поступить следующим образом: передать в шаблон набор переменных относительных путей к папкам и если это файлы пользователя использовать их(если изображения загружены через приложение Сайт меню Файлы), если же это изображения находящиеся в папке плагина, то проблем нет.

      Поддерживаю!

      • +3
        Павел Трофимов Павел Трофимов 27 мая 2016 18:22 #

        Все верно, но шаблон озвученный Сергеем, имхо, удобнее, т.к. суть наименования находится с края и визуально легче выхватывается при просмотре, нежели когда она заключена между стандартными обкладками (id плагина и словом plugin)

        • +3

          Согласен с Павлом! Удобнее будет, чтобы все шаблоны для плагинов начинались с plugin, затем id плагина.

          Помимо того, что название файла будет сразу говорить о его принадлежности к плагину, при таком подходе все файлы для плагинов будут размещены в одной кучке, и клиенту не нужно будет искать по всем файлам например search.plugin.html, а потом requerst.plugin.html.

        • +3

          Формат plugin.%plugin_id%[.%template_id%].html лучше в плане сортировки списка шаблонов в редакторе дизайна, так же стоит формализовать директорию хранения исходных шаблонов в составе плагина, чтобы была возможность сравнить шаблоны в редакторе или откатить все изменения. Поддержку со стороны редактора тем и кода фреймворка добавим (методы добавления шаблонов плагина в директории тем, методы получения пути до шаблона с учетом активной темы и т.п.)

          • +2
            Syrnik.com Syrnik.com 27 мая 2016 21:46 #

            Напрашивается название "templates/frontend", но это, скорее всего, даст конфликт с уже существующими плагинами. Можно сделать список шаблонов для фронтенда в plugin.php по аналогии с хуками.

            • +1

              Список шаблонов в plugin.php вполне к месту будет (и проверки корректности списка легко автоматизируются), а если исходить, что формат будет вида %template_id%=>'relative/path/template_id.html' относительно директории templates то будет даже некоторая свобода выбора пути :)

              • +1
                Syrnik.com Syrnik.com 27 мая 2016 23:14 #
                [
                    [
                        'path'=>'relative/path',
                        'name' => _wp('Название-описание для списка шаблонов') // Или array локаль=>'описание'?
                        'vars' => [ /** @see site.php */ ]
                    ]
                ]
              • +1
                Syrnik.com Syrnik.com 10 сентября 2016 14:40 #

                Что-то я сейчас подумал, что лучше бы в директории config плагина держать еще один файл xml по формату похожий на xml темы. Во-первых проще копировать узлы, во-вторых можно сделать, чтобы в настройках внешнего вида проверялось еслть-ли в теме уже шаблоны для плагинов и, если нет, то сделать button типа "создать шаблоны", копирующий референсные шаблоны из плагина в тему

                • +1
                  info@ravencode.ru info@ravencode.ru 3 марта 2018 13:29 #

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

                  Лучше реализовать класс наподобие предложенного Геной (я бы предложил не ограничиваться работой с темой и сделать класс с методами для работы с плагинами, например, вынести в него из плагина методы install, uninstall, update) + создать классы наследующие ViewAction\ViewController и добавить для фронтенд классов поиск шаблонов в теме + опционально, копирование в тему.

                • +1
                  Genasyst Genasyst 28 февраля 2018 19:09 #

                  у меня так и сделано! единственное, что нет формата для сравнения шаблонов, но это можно нормализовать в классе!

                • +3
                  Евгений Леман Евгений Леман 28 мая 2016 07:23 #

                  Будет слишком много шаблонов, что негативно скажется на юзабилити. Поддержку дирректорий ввели же, осталось сделать отображение их же. То есть не просто отображать в списке style.css, а лишь папку "css" с плюсиком раскрытия.

                  • +1
                    Manakhov Sergey Manakhov Sergey 29 мая 2016 01:25 #

                    Плюсую с отображением директорий всё было бы немного понятнее и привычнее

                  • +1
                    info@ravencode.ru info@ravencode.ru 28 февраля 2018 22:32 #

                    Формат должен включать имя приложения т.к. разные приложения могут содержать плагины с одинаковыми именами.

                    Шаблон в папке плагина: "{$app}/plugins/{$plugin}/templates/{$template}".

                    Шаблон в папке темы: "themes/{$theme}/plugins/{$app}/{$plugin}/{$template}".

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

                    • +1
                      Syrnik.com Syrnik.com 28 февраля 2018 22:55 #

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

                      А что там Геннадий наделал я так и не осилил разобраться

                      • +1
                        info@ravencode.ru info@ravencode.ru 1 марта 2018 01:37 #

                        Исходники шаблонов нужно из плагина копировать в тему. https://gist.github.com/WinterSilence/011e8f8a613c...

                        Класс Геннадия позволяет в том числе и это.

                        • +1
                          Syrnik.com Syrnik.com 1 марта 2018 05:06 #

                          Я ценю работу, проделанную Геной. Но лично мне вполне достаточно waTheme::addFile() ;-)

                          • +1
                            info@ravencode.ru info@ravencode.ru 1 марта 2018 07:15 #

                            waTheme::addFile() не копирует шаблон из плагина в тему

                          • +1
                            Genasyst Genasyst 1 марта 2018 13:13 #

                            Есть тысяча способов накосячить и сделать кривую миграцию шаблонов в тему, в том числе и перезапись файлов самой темы, а также тысяча способов накосячить при попытке получить нужные шаблоны, мой класс решает все эти проблемы!

                            Лозунг класса - просто , удобно, надежно и без костылей!)

                            Добавить комментарий

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