Посадка типовой секции на MODX:
[maxbutton id="12" url="#migx" text="Установка MIGX" ]
[maxbutton id="14" url="#posadka_items" text="По Сути НАЧАЛО ВЫВОДА Item-мов" ]
[maxbutton id="14" url="#posadka_next" text="Продолжение посадки Item-секции" ]
С комментариями и дополнениями оригинального материала:
Посадка типовой секции Landing Page на MODx с использованием MIGX
Материалы урока:
Скачать верстку секции Landing Page для посадки на MODx:
MIGX Documentation:
https://rtfm.modx.com/extras/revo/migx
Настройка прав доступа для контент-менеджера в MODX:
Flat icons pack:
Начинаем!
Для начала заходим в Аминку под Администратором:
Существует 2 способа посадки - именно такого типа секций:
1-й ВАРИАНТ - Это создание ресурса на каждый <Item>
Т.е. мы создаем папку - и эта папка у нас является секцией.
И папка может иметь вложенные ресурсы, которые мы выводим с помощью (например) GetResouces или PDO tools
- Позже рассмотрим.
Но есть НО! - Если мы будем делать <Item> с помощью ресурсов, то у каждого <Item> у нас сформируется линк (ссылка), которая будет индексироваться. Но у <Item> как правило нет своей страницы - то лучше не делать вывод таким образом из MODX - с помощью ресурсов. А лучше использовать - MIGX.
С помощью плагина MIGX - мы создаем добавляемые поля.
Установим MIGX
Свежая версия устанавливается автоматически и длинная установка из документации нас не интересует!
Установили!
https://docs.modx.com/extras/revo/migx
Пройдем ниже по документации:
Вкладки "Дополнительные поля" - у нас пока нет!
Это ради Дополнительных полей - Которых пока у нас нет по умолчанию
Перед этим Отвлечемся и создадим какую-нибудь категорию:
Сохранить!
Зайдем в приватном окне под пользователем: Менеджер
https://modx1.my7life.ru/manager/
Контент будем заполнять - под Менеджером!
Нажмем на "Главная страница"
в "Ресурсах" увидим появилось "Дополнительные поля":
Для примера: заполним его текстом:
И теперь - мы можем ВЫВЕСТИ ЭТО ПОЛЕ:
ОТКРОЕМ "Начальный шаблон"
Давайте пока вырежим вывод контента с главной страницы для проверки нашего вывода:
Это убираем: [[*content]]
И укажем наше поле: [[*fields_my]]
И у нас вывелось содержимое ДОПОЛНИТЕЛЬНОГО ПОЛЯ :
От сюда:
Отлично! Но если нам нужно это поле добавлять.
Т.е. не хватает КНОПКИ "ДОБАВИТЬ" - что бы вывести еще какое то поле или вообще, сделать какой то БИЛДЕР для главной страницы.
Вот - тут то нам и понадобятся необходимые поля MIGX!
Перейдем обратно:
Идем в документацию MIGX:
Далее еще ниже по документации и еще скопируем:
Сохраняем
Под админом Появилась кнопка:
и Под Менеджером Появилась кнопка:
Нажмем на нее:
(Это еще без установленного редактора)
Вырезаем 2-ю, не нужную вкладку:
Нижнюю скобку квадратную НЕ УДАЛЯТЬ!
[maxbutton id="14" text="По Сути НАЧАЛО ВЫВОДА Item-мов" ]
Тут мы переименовали:
"inputTVtype" в "inputTV"
В уроке советуют:
Данный параметр, позволят не создавать дополнительное поле для <Image>. И если мы разграничиваем права для Менеджера - то по нажатию кнопки:
"Ресурсы" -> "Website" -> "Главная стр." -> "Дополнительные поля" -> "Добавить элемент"
есть вероятность, что не появится поле: "images"
Попробовали, и лучше выглядит с: ""inputTVtype"
Будет активна кнопка "Обзор" (Выбрать изображение)
Вот так выглядит:
Затем:
Пере-обзовем по русски:
Продолжаем с MAC
Теперь давайте посмотрим, что у нас получилось:
Однако при нажатии на кнопку "Добавить элемент" - поимеем ошибку: Будем разбираться:
Исправим ошибки в нашем Json - коде: в "Вкладки формы"
Человек советует:
привет, очень крутые уроки! по поводу migx типа image
{"field":"img","caption":"Выбрать изображение","inputTVtype":"image", "sources":"[{\"MIGX_id\":\"1\",\"context\":\"web\",\"sourceid\":\"6\"},{\"MIGX_id\":\"2\",\"context\":\"en\",\"sourceid\":\"6\"}]"}
тут нужно задавать для контекстов разные источники файлов, отдельные tv можно не создавать.
И еще раз жмем "Добавить элемент"
Это все желательно проверять под учеткой:
Проверим права доступа для обоих полей (под Администратором):
и для 2-го поля:
Еще поставим галку тут:
И еще изменим Источник: на Images
И чистим Кэш:
Го в
Проверяем и так и так:
"inputTVtype" в "inputTV"
и
Вид окна из под "Админа":
Под "Админом" - появляется кнопка "Обзор" - а под "Менеджером" - пока ни в какую!
Вообщем что удалось выяснить:
Наш текущий код (РАБОЧИЙ КОД):
[
{"caption":"Info", "fields": [
{"field":"image","caption":"Изображение","inputTVtype":"image"},
{"field":"title","caption":"Заголовок"},
{"field":"description","caption":"Описание","inputTVtype":"richtext"}
]}
]
И пример кода "Из другого урока":
[
{"caption":"Прайс-лист", "fields":[
{"field":"prodImg","caption":"Изображение товара","inputTVtype":"image"},
{"field":"prodName","caption":"Название товара"}, {"field":"prodDesc","caption":"Описание товара","inputTVtype":"richtext"},{"field":"prodPrice","caption":"Цена"}
]}
]
Ура! Починили редактор!
Нужно было доставить "TinyMCE "
(Установку добавил в "Базовую настройку MODX")
Ура! Вот так теперь выглядит POP-Up дополнительного поля:
Проверим его работу:
Ура! Нашел как исправить ошибку 200 OK
Как исправить ошибку Код: 200 OK MODX Revolutions Настройка прав доступа для Менеджера?
Код: 200 OK
{"success":false,"message":"\u0414\u043e\u0441\u0442\u0443\u043f \u0437\u0430\u043f\u0440\u0435\u0449\u0451\u043d!","total":0,"data":[],"object":[]}
Начинаем ремонт ошибки:
Далее
Не забываем
Проблема решена!
Ура! Нашел как указать источник файлов (папку по умолчанию), которая открывается при нажатии на кнопку "Выбрать картинку" в MIGX Дополнительные поля:
Вот проблема:
Начинаем ремонт проблемы!
Проверяем и видим:
Проблема решена!
[maxbutton id="14" text="Продолжение посадки Item-секции" ]
И теперь снова посмотрим на нашу верстку:
То увидим: что тэг <p> </p> - у нас активно используется и он вдобавок - стилизован!
Давайте заполним наши <Items>
Загрузились - Даже с превьюхами:
Откроется окно с полями:
СОХРАНИТЬ!
Следующую иконку выбираем:
Теперь все эти пункты посадим на MODX:
Идем в скаченную верстку:
А вообще давай те перенесем ВСЕ на хостинг:
Отдельную папку для файлов на создавали - поскольку при посадке на MODX - как правило используется только один единственный Темплейт!
Переходим:
Создаем новый чанк:
Перед этим - вырезаем header вместе с body:
Затем, перейдем на наш тестовый сайт и пока увидим кашу из текста))
Затем давайте подключим наш чанк
И сохранимся!
Далее создадим Чанк для footer
Далее давайте удалим ВСЕ Items - кроме одного, который мы и будем размножать (репитеть):
Теперь - Давайте Отредактируем чанк head_chank
Сохранимся - и увидим, что CSS - подключился!
Идем в документацию:
Прямая ссылка:
https://docs.modx.com/extras/revo/migx/migx.frontend-usage
[[getImageList? &tvname=myMIGXtv &tpl=thumbTpl]]
И размещаем наш код вывода тут:
Далее: Еще "Быстро создать новый чанк"
Сохраним (наш "Начальный шаблон") - да посмотрим:
ОШИБКА Мать-ее ВЫВОДА!
Начинаем ремонт ошибки:
Смотрим и видим репит нашего Itme-ма
Далее: Давайте зайдем в чанк: tpl_myItem
И пропишем актуальные данные в нем:
Посмотрим документацию:
Прямая ссылка:
https://docs.modx.com/extras/revo/migx/migx.frontend-usage
Изображения у нас не выводятся:
Начинаем ремонт ошибки:
Для этого заходим в Дополнительное поле: fields_my
И видим как у нас присвоен вывод картинок:
и так правим параметры чанка: tpl_myItem
И еще важная настройка в MODX:
(От которой - как оказалось на деле - Ни черта не зависит!)
Но все же - будем знать, где копать:
ВСЕ! Сохраним и посмотрим страницу нашу:
И давайте - (Неожиданно) - подключим шрифт!
Для этого идем в чанк foot_chank
Так выглядим сам common.js:
И пропишем путь до стилей:
Якобы - теперь исключено появление ошибки 404
Готово! Посадили верстку секции на движек MODX Revorution!
'!' - Означает Не кэшировать данные
++ - Означает, что мы вводим какое то системное значение
Важный момент:
Если мы уже находимся в каком то чанке например [[head]] ,
то для вывода другого параметра используем "плюс"
Полу-прозрачная заливка фона и цвет бордера:
border-left: rgba(#fff, .1) 1px solid
background-color: rgba(#fff, .4)
