Наверх

Создаем раздел управления виджетами в MODX

MODX отличается от других систем абсолютной гибкостью. С одной стороны это плюс, с другой стороны это приводит к отсутствию в MODX такого понятия как «виджет», например, как в вордпрессе:

Сегодня я научу вас как с помощью MIGX сделать панель управления виджетами.

Предположим, у нас есть такой блок на сайте:


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

Подготовка

Для начала создадим ТВ-параметры для каждого редактируемого поля: adv.img, adv.title, adv.description. ТВ-шкам задаем нужный нам тип (изображение, текст, текстовая область...). Эти ТВ не должны быть доступны ни для какого шаблона. Они нужны только для того, чтобы создать окно редактирования виджета.


Теперь устанавливаем MIGX и приступаем к созданию интерфейса. Создаем еще один ТВ-параметр (adv) с типом migx:


Вкладки формы:
[
  {"caption":"Преимущество", "fields": [
    {"field":"title","caption":"Заголовок","inputTV":"adv.title"},
    {"field":"img","caption":"Картинка","inputTV":"adv.img"},
    {"field":"description","caption":"Подпись","inputTV":"adv.description"}
  ]}
]

Разметка колонок
[
    {"header": "Заголовок", "width": "260", "dataIndex": "title"},
    {"header": "Описание", "width": "400", "dataIndex": "description"},
    {"header": "Картинка", "width": "120", "dataIndex": "img",
                                       "renderer": "this.renderImage"}
]

Активируем интерфейс

Теперь создаем новый технический шаблон и техническую страницу в дереве — Виджеты (которой присваиваем этот шаблон). Наш MIGX-ТВ делаем доступным для этого шаблона.


Теперь уберем для этого ресурса все вкладки кроме «Дополнительных полей» через настройку форм


А сам ресурс скрываем из дерева через базу данных (в таблице modx_site_content ставим нолик в поле show_in_tree). Только запомните id этого ресурса. Он нам понадобится, чтобы вывести ссылку на него в верхнем меню.

Выводим ссылку на ресурс в верхнем меню

Открываем →Действия, раскрываем пункт Top nav и нажимаем на «Приложения». После этого нажимаем кнопку «Добавить пункт»:

  • Родитель — components
  • Ключ словаря — Виджеты
  • Действие — resource/update
  • Параметры — &id={id вашего ресурса}

В итоге в верхнем меню (в «Приложениях») появится пункт «Виджеты», который будет открывать наш ресурс.


А выводить виджеты на страницу поможет сниппет getImageList, который идет в комплекте с MIGX:
[[getImageList?
    &docid=`173`
    &tvname=`adv`
    &tpl=`tpl.adv`
]]

Элементы в такой таблице можно сортировать перетаскиванием — сниппет выведет их в нужной последовательности. Если все блоки сайта собрать на такой странице (разбив на категории) получится целый центр управления дизайном. Единственный минус — надо не забывать после изменений нажимать на кнопку «Сохранить».

33 комментария

  1. Владимир 01 апреля 2015, 12:15 # +1
    Прекрасный мануал!
    1. Андрй Рябченко 01 апреля 2015, 15:10 # +1
      Очень здорово, спасибо.
      1. Александр 10 апреля 2015, 20:33(Комментарий был изменён) # +1
        Можно не указывать тв для названия
        у migx есть такое
        {«field»:«title»,«caption»:«name»}

        Пример как я делал:)
        [
        {"caption":"images goods", "fields":[
        
        {"field":"title","caption":"name"},
        {"field":"image","caption":"image 300","inputTV":"image"},
        {"field":"image_100","caption":"image 100","inputTV":"image_100"}
        ]}
        ]
        
        [
        
        {"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"},
        {"header": "image 300", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"},
        {"header": "image 100", "width": "50", "sortable": "false", "dataIndex": "image_100","renderer": "this.renderImage"}
        
        ]
        
        Спасибо за мануал))
        1. Кирилл 21 сентября 2015, 10:05 # 0
          Добрый день!
          Возникла следующая проблема, все работало отлично, а сегодня обнаружил, что при сохранении изменения в содержимом виджета при нажатии на кнопку сохранить пишет доступ запрещен, хотя я ничего не менял и еще начала выводится вот такая беда [2015-09-21 13:02:44] (ERROR @ /index.php) modTemplateVar: Attempt to set NOT NULL field type to NULL, после удаления одного из TV во вкладке формы
          1. Кирилл 21 сентября 2015, 10:06 # 0
            Нашел вот это https://modx.pro/help/160/ однако что править если кроме удаления строчки с тв ничего не менял
            1. Илья Уткин 21 сентября 2015, 11:05 # 0
              Хм… странно… я с таким не встречался. Даже не знаю, в каком месте может быть ошибочка…
          2. Виталий Греков 15 ноября 2015, 15:03 # 0
            Скажите, а возможно вывод в MIGX конкретной ячейки.
            Нужно для вывода подсказок в магазине, просто хочется в одном месте все сделать и выводить в виде всплывающих подсказок для наименования и значений характеристик.
            1. Илья Уткин 17 ноября 2015, 09:12 # 0
              Да, можно в одном ресурсе вносить данные, а выводить где угодно.
              1. Виталий Греков 17 ноября 2015, 22:35 # 0
                Илья, подскажите какой должен быть вызов с помощью модификатора, а если можно было бы с помощью плейсхолдеров?
                получается на странице товара штук 20 будет размещено и выводить с помощью getImageList слишком накладно.
                1. Илья Уткин 17 ноября 2015, 22:41 # 0
                  Я не понимаю, что надо-то? Можно прям пример — как должно работать?
                  1. Виталий Греков 23 декабря 2015, 14:03 # 0


                    Как можно вывести только ячейку «сертификат» или любую другую
                    1. Илья Уткин 23 декабря 2015, 14:10 # 0
                      Картинка не открывается. Есть ссылка на скриншот?
                      1. Виталий Греков 23 декабря 2015, 14:15(Комментарий был изменён) # 0
                        1. Илья Уткин 23 декабря 2015, 14:17 # 0
                          А вот это не знаю…
                          Вряд ли выведешь…
                          1. Виталий Греков 23 декабря 2015, 14:21 # 0
                            понял, спасибо, получается соответственно и всю строку из таблицы тоже нельзя вывести? только весь pdf.migx
            2. Татьяна 18 ноября 2015, 13:25(Комментарий был изменён) # 0
              Спасибо за интересный пример! А подскажите как у вас получилась вкладка формы с названием «Преимущество»? А то я делаю как у вас в описании, а там всё равно «Категории»--> «без категории»/ Правда я в отдельный пункт меню не делала, оставила в дереве. Но как поменять название категории не пойму.
              1. Илья Уткин 18 ноября 2015, 13:50 # 0
                Это категории. Создайте категорию и поместите в нее ТВ. Тогда он будет отображаться на вкладке.
                1. Татьяна 18 ноября 2015, 13:58 # 0
                  Всё поняла. Спасибо! Просто думала это как то связано с MIGX
              2. Руслан Кривенко 04 февраля 2016, 11:54 # 0
                Илья, а как вывести на сайте виджет, в котором код html? Что то у меня не получилось. И как вот такой блок вывести? Спасибо!
                1. Илья Уткин 04 февраля 2016, 12:01 # 0
                  Так вот же, в конце статьи
                  А выводить виджеты на страницу поможет сниппет getImageList, который идет в комплекте с MIGX:
                  [[getImageList?
                      &docid=`173`
                      &tvname=`adv`
                      &tpl=`tpl.adv`
                  ]]
                  1. Ruslan Nikolaevich Kryvenko 04 февраля 2016, 14:56(Комментарий был изменён) # +1
                    У меня не получилось. Тут больше статья о том как добавить в панель управления виджеты. А можно просто добавить migx, после этого создать виджет и вывести его на сайт? Ещё как вывести такие блоки как у вас на сайте, на главной? Просто код вывода. Спасибо!
                    1. Илья Уткин 04 февраля 2016, 15:17 # 0
                      Вообще по MIGX много информации в сети, и на русском тоже есть.
                      А на главной блоки у меня выведены вручную — просто чанки с HTML-кодом.
                      1. Ruslan Nikolaevich Kryvenko 04 февраля 2016, 16:09 # +1
                        Вот как такие блоки вывести? Можете код показать?
                        Спасибо!
                2. Ruslan Nikolaevich Kryvenko 04 февраля 2016, 16:12 # 0
                  Вот именно вот такой блок нижний «Блог о MODX и PHP»
                  1. Андрей 23 июля 2016, 09:14 # 0
                    Здравствуйте, а можно ли как-то вывести migx рандомно? к примеру делаю заметки на главной странице, каждая заметка заполняется в доп полях через migx, на странице выводится только одна заметка, так вот, реально ли сделать так чтобы при перезагрузке страницы менялись заметки?
                    1. Илья Уткин 23 июля 2016, 15:40 # 0
                      Да, возможно. Нужно написать сниппет, который из MIGX получит массив и выведет нужное количество записей, например, с помощью array_rand
                    2. Сергей 18 октября 2016, 10:36 # 0
                      Здравствуйте, как можно поместить виджет во вкладки ресурса, допустим было так (Документы | Настройки | группа ресурсов ) а надо чтобы было так (Документы | Настройки | группа ресурсов | Виджеты). заранее спасибо за ответ :)
                      1. Илья Уткин 18 октября 2016, 10:52 # 0
                        Через настройки форм
                        1. Сергей 18 октября 2016, 12:11 # 0
                          у вас нет ссылки на урок? или статью по этой теме только для новой версии modex ) я недавно начал его изучать и пока сложновато
                          1. Сергей 19 октября 2016, 13:12 # 0
                            еще раз здравствуйте, вроде разобрался в редактирование форм но так и не понял как можно добавить виджет в все страницы. и если можно дайте ваш скайп если можно )
                            1. Илья Уткин 19 октября 2016, 13:53 # 0
                              У меня сейчас времени нет свободного, к сожалению. Могу посоветовать написать вопрос на modx.pro/ — там много специалистов по MODX, наверняка вам ответят
                        2. Ян 13 апреля 2017, 09:24 # 0
                          Доброго времени суток, может кто-то поможет- хочу вывести в виджет радио кнопку (tv доп поле check)- как это сделать???
                          1. Илья Уткин 21 апреля 2017, 08:12 # 0
                            Так же, как и любое другое поле — просто создать ТВ с соответствующими параметрами и указать его в параметре inputTV.

                          Авторизация

                          через сервис Loginza:

                          Подписка или RSS

                          Буду присылать новые статьи — никакого спама



                          Шаблоны MODX

                          1 2 Дальше »

                          Объектная
                          модель
                          MODX