Работа с MIGX в MODx Revo. Часть 3.

В данном уроке мы с вами поработаем с MIGX и посмотрим какие TV-параметры мы сможем с вами сделать с помощью данного компонента. Гибкость его не знает границ. Но для начала мы с вами создадим новый источник файлов, чтобы пользователи и администраторы сайта не грузили все в одну кучу.

Создаем новый источник файлов.

Для начала давайте создадим в папке “assets” каталог “files”. Он будет у нас домашним каталогом для пользовательских файлов.

Теперь перейдем в “Медиа -> Источники файлов” и создадим новый источник “Content”.

Отлично! Теперь перейдите в редактирование данного источника файлов и заполните следующие параметры:

• basePath – “assets/files/”
• baseUrl — “assets/files/”

Теперь в дереве файлов на вкладке “Файлы” вы сможете увидеть новый источник файлов, если обновите страницу. Для того, чтобы проверить его функционирование, создайте в источнике “filesystem” в папке “assets/files/” какой-нибудь файл и обновите страницу, если он отобразится в нашем источнике “Content” мы все сделали правильно.

Надеюсь, у вас все получилось! Теперь давайте зададим данный источник файлов как источник “по умолчанию”. Для этого перейдите в системные настройки и найдите настройку с ключом “ default_media_source” в разделе “Панель управления” и выберите наш источник файлов “Content”.

Класс! Сейчас в визуальном редакторе и во всех наших будущих TV-полях будут отображаться элементы из данного источника файлов.

Используем MIGX

Мы с вами начнем использовать MIGX с блока преимуществ. Если внимательно посмотрим на данный блок, то мы увидим, что карточки преимуществ имеют следующие поля:

• Иконка
• Заголовок
• Описание

Стандартными TV-полями MODx мы не сможем реализовать данную конструкцию, поэтому на помощь к нам придет MIGX. Если вы не установили данный компонент из официального репозитория, то вам нужно поторопиться.

TV-поле у нас будет выглядеть следующим образом:

И в режиме редактирования:

Итак, создадим категорию “Преимущества” и начнем создавать новое TV-поле “advantages”.

На первой вкладке “Общая информация” задаем следующие значения:

• Имя – “advantages”
• Подпись – “Преимущества”
• Категория – “Преимущества”
• Описание – “Если не заполнено, не выведется секция преимуществ”

Переходим на вкладку “Параметры ввода” и указываем тип ввода “MIGX”, после чего у нас погрузятся поля для данного типа ввода. Так как мы с вами создаем составное поле, то нам необходимо будет заполнить два параметра:

• Вкладки формы – это перечень всех полей и вкладок данного TV-параметра, задаваемый в формате JSON
• Разметка колонок – это перечень полей, которые необходимо выводить в таблице TV-параметра

Содержимое вкладок формы будет следующее:

[{"caption":"Преимущество", "fields": [
    {"field":"title", "caption":"Заголовок"}, 
    {"field":"icon", "caption":"Класс иконки", "description":"например, icofont-dart, аналог font-awesome"},    
    {"field":"description", "caption":"Описание", "inputTVtype":"richtext"}
]
}]

Как вы видите, в формате JSON у нас есть следующие поля:

• Caption – заголовок формы
• Fields – поля формы
  • Field – наименование поля
  • Caption – подпись поля
  • Description – описание поля
  • inputTVtype – тип ввода (если не указано, это обычное текстовое поле)

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

Следующий шаг – это разметка колонок. Выглядеть она будет следующим образом:

[{
  "header": "Заголовок", "sortable": "true", "dataIndex": "title"
},{
  "header": "Класс иконки", "sortable": "true", "dataIndex": "icon"
},{
  "header": "Описание", "sortable": "true", "dataIndex": "description"
}]

Мы перечислили поля, какие нам необходимо вывести в таблице. Ключи у нас следующие:

• header – заголовок
• sortable – флаг сортировки по данному полю
• dataIndex – ключ поля

Обратите внимание, что параметр dataindex должен совпасть с параметром field из вкладок формы.

Параметры вывода у нас должны быть “По умолчанию” и на вкладке доступно для шаблонов указываем галочку на шаблоне “Главная страница”. Сохраняем поле и бежим смотреть, что получилось.

Неплохо не правда ли? Я заполняю данное поле теми значениями, которые у нас есть изначально на шаблоне.

Теперь нам все это дело нужно как-то вывести. Для этого в составе MIGX есть сниппет getImageList, который позволяет нам это сделать легко и просто. Создаем чанк вывода наших преимуществ “advantagesTpl”:

<div class="col-md-4 col-sm-6">
    <div class="features-single text-center">
        <i class="icofont [[+icon]]"></i>
        <h4>[[+title]]</h4>
        [[+description]]
    </div>
</div>

В плейсхолдерах данного чанка у нас ключи наших полей. Далее в шаблоне главной страницы мы вызываем сниппет getImageList:

[[getImageList?
    &tvname=`advantages`
    &tpl=`advantagesTpl`
]]

Где:

• tvname – наименование нашего TV-поля
• tpl – чанк вывода

Посмотрите, как у нас с вами замечательно все вывелось! Теперь досоздадим еще два параметра, чтобы закончить с данной секцией:

• advsectitle – подпись – заголовок, параметры ввода – текст, параметры вывода – по умолчанию, шаблон – главная страница
• advsecdesc — подпись – описание, параметры ввода – текстовая область, параметры вывода – по умолчанию, шаблон – главная страница

Заполните эти поля в ресурсе дефолтными параметрами с шаблона. Секция преимуществ у вас должна получиться следующая:

<section id="features-area" class="bg-gray">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="section-heading text-center">
                    <h2>[[*advsectitle]]</h2>
                    <p>[[*advsecdesc]]</p>
                </div>
            </div>
        </div>
        <div class="row">
            [[getImageList?
                &tvname=`advantages`
                &tpl=`advantagesTpl`
            ]]
        </div>
    </div>
</section>

Аналогично делаем со второй секцией преимуществ. Единственное, что у нас добавится – это картинка. Вкладки формы следующие:

[{"caption":"Преимущество", "fields": [
    {"field":"title","caption":"Заголовок"}, 
    {"field":"icon","caption":"Класс иконки","description":"например, icofont-dart, аналог font-awesome"},    
    {"field":"description","caption":"Описание","inputTVtype":"richtext"},  
    {"field":"image","caption":"Изображение","inputTVtype":"image","description":"выведется, если используется в данном блоке, может обрезаться"}
  ]
}]

Разметка колонок:

[{
  "header": "Заголовок", "sortable": "true", "dataIndex": "title"
},{
  "header": "Класс иконки", "sortable": "true", "dataIndex": "icon"
},{
  "header": "Описание", "sortable": "true", "dataIndex": "description"
},{
  "header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
}]

По сравнению с предыдущим TV, у нас добавился параметр “renderer”, который отвечает за рендеринг картинки в таблице.

Далее создаем чанк вывода:

[[+_alt <!-- eq="1":then=" -->
<div class="core-features-single">
    <div class="row">
        <div class="col-sm-6">
            <div class="core-feature-img">
                <img src="[[+image]]" class="img-responsive" alt="Image">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="core-feature-content arrow-left">
                <i class="icofont [[+icon]]"></i>
                <h4>[[+title]]</h4>
                [[+description]]
            </div>
        </div>
    </div>
</div>
<!-- ":else=" -->
<div class="core-features-single">
    <div class="row">
        <div class="col-sm-6">
            <div class="core-feature-content arrow-right">
                <i class="icofont [[+icon]]"></i>
                <h4>[[+title]]</h4>
                [[+description]]
            </div>
        </div>
        <div class="col-sm-6">
            <div class="core-feature-img">
                <img src="[[+image]]" class="img-responsive" alt="Image">
            </div>
        </div>
    </div>
</div>
`]]

У меня не выводятся модификаторы ввода-вывода, поэтому отметил комментариями значения, а символ " нужно заменить на `. Плейсходер “_alt” равен единице, когда элемент четный, таким образом мы с вами подменим чанки. И заполним наш параметр в ресурсе главной страницы дефолтными значениями с шаблона. Единственное, так как мы с вами сменили источник файлов, то картинки могут не отобразиться, поэтому необходимо продублировать папку assets/images/ в папку assets/files/ images/. Теперь вам стало понятно зачем нужен этот источник файлов? Для того, чтобы менеджер по ошибке или может злому умыслу не удалил жизненно важные системные файлы.

Полный код данной секции у меня получился следующий:

<section id="core-features-area">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="section-heading text-center">
                    <h2>[[*adv2sectitle]]</h2>
                    <p>[[*adv2secdesc]]</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                [[getImageList?
                    &tvname=`advantages2`
                    &tpl=`adv2Tpl`
                ]]
            </div>
        </div>
    </div>
</section>

Отлично! Теперь реализуем раздел FAQ (часто задаваемые вопросы). Создаем новую категорию и TV-параметр FAQ. Вкладки формы:

[{"caption":"FAQ", "fields": [
    {"field":"question","caption":"Вопрос"}, 
    {"field":"answer","caption":"Ответ","inputTVtype":"richtext"}
  ]
}]

Разметка колонок:

[{
  "header": "Вопрос", "sortable": "true", "dataIndex": "question"
},{
  "header": "Ответ", "sortable": "true", "dataIndex": "answer"
}]

Создаем чанк для вывода “faqTpl”:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse[[+idx]]">[[+question]]</a>
        </h4>
    </div>
    <div id="collapse[[+idx]]" class="panel-collapse collapse [[+idx:eq=`1`:then=`in`]]">
        <div class="panel-body">[[+answer]]</div>
    </div>
</div>

Еще нам нужно заполнить поле дефолтными значениями и создать 3 TV-параметра:

• Заголовок
• Описание
• Изображение

Надеюсь, что вы с этим справитесь самостоятельно. А у меня в свою очередь секция получила следующий вид:

<section id="faq-area">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="section-heading text-center">
                    <h2>[[*faqtitle]]</h2>
                    <p>[[*faqdesc]]</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="panel-group" id="accordion">
                    [[getImageList?
                        &tvname=`faq`
                        &tpl=`faqTpl`
                    ]]
                </div>
            </div>
            <div class="col-sm-6">
                <div class="faq-img">
                    <img src="[[*faqimage]]" class="img-responsive" alt="Image">
                </div>
            </div>
        </div>
    </div>
</section>

Следующая секция – “Отзывы”. Делаем все аналогично второму блоку с преимуществами. Вкладки формы:

[{"caption":"Отзыв", "fields": [
    {"field":"title","caption":"Имя"}, 
    {"field":"regaly","caption":"Регалии"}, 
    {"field":"description","caption":"Отзыв","inputTVtype":"richtext"},     
    {"field":"image","caption":"Изображение","inputTVtype":"image","description":"выведется, если используется в данном блоке, может обрезаться"}
  ]
}]

Разметка колонок:

[{
  "header": "Имя", "sortable": "true", "dataIndex": "title"
},{
  "header": "Регалии", "sortable": "true", "dataIndex": "regaly"
},{
  "header": "Отзыв", "sortable": "true", "dataIndex": "description"
},{
  "header": "Изображение", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
}]

Создайте еще 2 поля: заголовок и описание и заполните дефолтными значениями. А чанк “reviewTpl” у меня получился следующий:

<div class="testimonial-single">
    <div class="client-comment">
        [[+description]]
    </div>
    <div class="client-info row">
        <div class="col-md-4">
            <div class="client-img">
                <img src="[[+image]]" class="img-responsive" alt="Image">
            </div>
        </div>
        <div class="col-md-8">
            <div class="client-details">
                <h5>[[+title]]</h5>
                <p>[[+regaly]]</p>
            </div>
        </div>
    </div>
</div>

А секция тем временем у меня получилась следующая:

<section id="testimonial-area" class="bg-gray">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="section-heading text-center">
                    <h2>[[*reviewtitle]]</h2>
                    <p>[[*reviewdesc]]</p>
                </div>
			</div>
        </div>
        <div class="testimonial-carousel owl-carousel">
            [[getImageList?
                &tvname=`reviews`
                &tpl=`reviewTpl`
            ]]
        </div>
    </div>
</section>

В следующей части мы с вами реализуем блок с товарами, сделаем форму обратной связи и форму обратной связи в модальном окне. Спасибо!