Посадка типовой секции на MODX:

 

 

 

Установка MIGX

 

По Сути НАЧАЛО ВЫВОДА Item-мов Продолжение посадки 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

 

 

Пройдем ниже по документации:

 

 

   Вкладки "Дополнительные поля" - у нас пока нет!  

 

Это ради Дополнительных полей - Которых пока у нас нет по умолчанию

 

 

Перед этим  Отвлечемся и создадим какую-нибудь категорию:

 

 

 

 

 

 

 

Сохранить!

 

 

 

Зайдем в приватном окне под пользователем:  Менеджер

 

http://modx1.my7life.ru/manager/

 

 

Контент будем заполнять - под Менеджером!

 

Нажмем на "Главная страница"

 

в "Ресурсах" увидим появилось "Дополнительные поля":

 

 

Для примера: заполним его текстом:

 

 

И теперь - мы можем ВЫВЕСТИ ЭТО ПОЛЕ:

 

 

ОТКРОЕМ "Начальный шаблон"

 

Давайте пока вырежим вывод контента с главной страницы для проверки нашего вывода:

 

Это убираем:     [[*content]]  

И укажем наше поле:    [[*fields_my]]   

 

 

 

И у нас вывелось содержимое    ДОПОЛНИТЕЛЬНОГО ПОЛЯ   :

 

От сюда:

 

 

 

 

 

 

Отлично! Но если нам нужно это поле добавлять.

Т.е. не хватает КНОПКИ "ДОБАВИТЬ" - что бы вывести еще какое то поле или вообще, сделать какой то БИЛДЕР для главной страницы.

 Вот - тут то нам и понадобятся необходимые поля MIGX!

 

Перейдем обратно:

 

 

 

 

Идем в документацию MIGX:

 

 

 

 

 

Далее еще ниже по документации и еще скопируем:

 

 

Сохраняем

 

 

Под админом Появилась кнопка:

и Под Менеджером Появилась кнопка: 

 

Нажмем на нее:

(Это еще без установленного редактора)

 

 

Вырезаем 2-ю, не нужную вкладку:

 

 

 

 Нижнюю скобку квадратную НЕ УДАЛЯТЬ!

 

 

Далее,

 

По Сути НАЧАЛО ВЫВОДА 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  Дополнительные поля:

 

Вот проблема:

 

 

    Начинаем ремонт проблемы!  

 

 

 

Проверяем и видим:

 

 

  Проблема решена!  

 

 

Далее,

 

 

Продолжение посадки 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)