Делаем редактор блоков на Migx

Сегодня еще более сложный урок о migx внутри migx — не однородное содержимое, будем делать редактор блоков на подобии недоработанного freed или content block.

Сделать его можно только основе шаблонизатора fenom, следовательно у вас должен быть установлен pdotools и включен fenom.

Также установлен Migx и ace — для удобства редактирования кода.

Внимание! Это довольно сложная статья, если плохо знакомы с MIGX, обязательно читаем: MIGX — MODX Revo и за одно Migx в Migx, т.к. это логическое продолжение данных уроков.

Если вы идете по моим урокам, то у вас должно быть создано минимум 3 блока (состоящих из 4х конфигурации).

Соберем их воедино, для этого создадим еще одну конфигурацию с именем «config»», в поле «Замена «Добавить элемент»» пишем «Добавить блоки», в поле «Window Title пишем: «Page Builder v.1» — это заголовок и переходим на вкладку Formtabs.

Во вкладке Formtabs и в поле Multiple Formtabs добавляем все наши основные конфигурации, а в поле Multiple Formtabs Label пишем: Выберите блок и переходим в следующую вкладку.

Добавляйте только основные конфигурации: testimonials_config не добавил т.к. к нему обращается поле из конфигурации testimonials. Конфигурацию hero не стал добавлять, т.к. она используется только на главной и находится вне секции «main», а все остальные блоки в «main».

На вкладке Colums. Добавляем элемент: Header — Название блока и field — MIGX_formname. И сохраняем все нажимая на кнопки «Сохранить и закрыть».

В итоге у вас должно получиться следующее.

Создание TV с конфигурацией MIGX

Создаем категорию page builder.

Создаем пустое TV поле под названием config, Подпись: Конфигурация, Категория: page builder.

На вкладке Параметры ввода, выбираем Migx и в поле конфигурации пишем config, далее выбираем шаблон и сохраняем.

Если сейчас зайти на страницу с шаблоном куда назначено TV config, то увидим — появилась возможность выбора нужных блоков.

Заполним их данными и сохраним ресурс.

На этом работа с MIGX окончена, остается это все вывести.

Вывод данных MIGX на сайте

Теперь нам нужно создать чанки с оформлением (ну или переписать имеющиеся (для тех кто делал все на стандартном синтаксисе)). Для того чтобы упростить задачу сделаем в шаблоне следующий вызов:

{var $data = $_modx->resource['config'] | fromJSON}
{$data | print}

Перейдем на страницу (где заполняли данные), должен вывестись массив.

Здесь MIGX_forname => название чанка, который нужно создать (ну или созданный переименовать). Остальное это название полей. У сложных полей (MIGX в MIGX) внутри еще массивы значений (в данном случае у slides).

Скопируйте данный массив и сохраните в текстовый документ — он пригодится.

У вас будет немного другой массив значений, ну вернее названия полей конфигураций MIGX (я свои немного переименовал: вместо h1 или h2 написал title, вместо Подзаголовков h2 или h3 написал subtitle и т.д.).

Создание чанков с оформлением блоков

Создадим новые чанки (или у кого созданы со стандартным шаблонизатором отредактируем их) — их имена должны быть такими же как у MIGX элементов.

1й чанк: about:

<!-- ======= About Section ======= -->
    <section id="about" class="about">

      <div class="container" data-aos="fade-up">
        <div class="row gx-0">

          <div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
            <div class="content">
              <h3>{$data['subtitle']}</h3>
              <h2>{$data['title']}</h2>
              <p>{$data['text']}</p>
              <div class="text-center text-lg-start">
                <a href="{$data['link']}" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
                  <span>{$data['name_buttons']}</span>
                  <i class="bi bi-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>

          <div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
            <img src="{$data['image']}" class="img-fluid" alt="{$data['title']}">
          </div>

        </div>
      </div>

    </section><!-- End About Section -->

Это легкий блок без доп. конфигураций, тут поля выводятся так {$data['name_poly']}.

2-й чанк testimonials:

<!-- ======= Testimonials Section ======= -->
<section id="testimonials" class="testimonials">
    <div class="container" data-aos="fade-up">
        <header class="section-header">
          <h2>{$data['title']}</h2>
          <p>{$data['subtitle']}</p>
        </header>
        
	{var $items = $data['slides'] | fromJSON}
        <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="200">
          <div class="swiper-wrapper">
			{foreach $items as $idx => $item}
            <div class="swiper-slide">
              <div class="testimonial-item">
                <div class="stars">
                  <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                </div>
                <p>{$item['text_reviews']}</p>
                <div class="profile mt-auto">
                  <img src="/assets/img/{$item['foto']}" class="testimonial-img" alt="{$item['name']}">
                  <h3>{$item['name']}</h3>
                  <h4>{$item['professiya']}</h4>
                </div>
              </div>
            </div><!-- End testimonial item -->
		{/foreach}
          </div>
          <div class="swiper-pagination"></div>
        </div>

    </div>
</section><!-- End Testimonials Section -->

Ну и еще в качестве примера оставлю еще конфигурации из старого (переписанного урока):

Название чанка: Слайдер (см Bootstrap слайдер на MIGX)

Код чанка:

{var $items = $data['bs_carusel'] | fromJSON}
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    {foreach $items as $idx => $item}
        <div class="carousel-item{if $idx == 0} active{/if}">
          <img src="img/{$item['slide']}" class="d-block w-100" alt="{$item['zagolovok']}">
          <div class="carousel-caption d-none d-md-block">
            <h5>{$item['zagolovok']}</h5>
            <p>{$item['opisanie']}</p>
          </div>
        </div>	
    {/foreach}
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>

Важно! Migx не подтягивает путь источников файлов, и если у вас стоит неродной источник (Filesystem), то вам как и мне нужно вручную дописывать путь до него: img/{$item[‘slide’]}, здесь img/ — путь до источника файлов.

Проверка на пустоту

Вы можете делать вот такие условия: {if $data['subtitle']} {$data['subtitle']} {/if}, где subtitle это название поля. Здесь условие if проверяет на заполненность subtitle, т.е. если подзаголовка нет, ничего не выведется.

Вывод Содержимого во фронтенд

Теперь меняем наш код (который выводил массив), на:

{var $data = $_modx->resource['config'] | fromJSON}
    {foreach $data as $item}
    	{$item['MIGX_formname'] | chunk : [
    	'data' => $item 
    	]}
{/foreach}

После этого должно все заработать.

Если не получилось, смотрите видео еще раз (под спойлером в начале статьи), перечитайте две предыдущие статьи про MIGX. В следующем уроке разберем более юзабильную альтернативу MIGX, компонент PageBlock (платный) и после этого установим и настроим визуальный редактор (на него тоже можно сажать простенькие блоки).