Migx внутри Migx — делаем редактор блоков

Migx внутри Migx - делаем редактор блоков MODX Revo

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

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

включаем fenom

Также установлен Migx и ace — для удобства редактирования кода. Делать будем на основе стандартных блоков и элементов bootstrap 4 (на момент написания это версия 4.6.0). Приступим.

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

Статья создана на основе видео: Неоднородное содержимое или конфигуратор лендингов (оно не мое и у него нет продолжения — вернее продолжение в статье) — сначала смотрим его, потом читаем ниже.

Рассмотрю создание 3х элементов: 2 статических и 1 динамического. Остальные блоки делаются по такому же принципу.

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

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

создание категории

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

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

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

Создание пустого TV с конфигурациейЭто будет базовая конфигурация для всех элементов.

Идем в MIGX и создаем пустой элемент с именем config — позже мы его до редактируем.

создаем пустой MIGX элемент config

Создаем статические элементы и конфигурации к ним.

Создание секции с фоном и текстом

Начнем с простого (статического элемента) — секции с текстом, чтобы могли задавать фон секции или даже изображение в качестве фона, соответственно, чтобы текст размещался при помощи текстового редактора.

Будет иметь следующую разметку:

<section class="bg-white" style="background: url(wp-content/uploads/2019/06/logo')">
    <div class="container">
        текст
    </div>
</section>

style будем добавлять, только если добавлена картинка для фона.

Такого элемента по умолчанию нет в bootstrap, так что добавьте в файл стилей, код:

section{padding:40px 0;background-size:cover !important}

Создадим его, для этого идем в MIGX и создаем элемент:

Вкладка Settings

  • Имя (Name): bs_section
  • Замена «Добавить элемент»: Добавить секцию

На вкладке FormTabs заполняем поля:

  • «Multiple Formtabs Optionsvalue»: Добавить секцию — отображение в табличке названия блока.
  • «Multiple Formtabs Optionstext»: Добавить секцию — отображение названия при выборе блока.

И добавляем элементы:

1. Класс для секции. На вкладке Field, заполняем:

  • Fieldname: class
  • Caption: class
  • inputTVtype: listbox (список одиночный выбор)

добавляем первый элемент в migx

На вкладке input options в поле указываем bg-transparent ||bg-white ||bg-primary ||bg-secondary ||bg-success ||bg-danger ||bg-warning ||bg-info ||bg-light ||bg-dark — это цвета с bootstrap. Сохраняем — Выполнено.

указываем опции

2. Фоновое изображение секции. На вкладке Field, заполняем:

  • Fieldname: img-bg
  • Caption: Фоновое изображение
  • inputTVtype: image. Выполнено.

Добавляем поле в migx с изображением

3. Сам текст (текстовый редактор). На вкладке Field, заполняем:

  • Fieldname: text
  • Caption: Текст
  • inputTVtype: richtext. Выполнено.

Добавляем блок с редактором текста

Сохраняем все при помощи кнопок выполнено.

Создание блока внимания

В качестве блока внимания возьмем элемент: Alerts

Имеет следующую разметку:

<div class="alert alert-primary" role="alert">
  Текст который нужно выделить
</div>

Простейший статический блок, давайте создадим для него MIGX конфигурацию. Для этого открываем MIGX и создаем элемент:

Вкладка Settings

  • Имя (Name): bs_alert
  • Замена «Добавить элемент»: Добавить блок внимания

На вкладке FormTabs заполняем

  • «Multiple Formtabs Optionsvalue»: Блок внимания.
  • «Multiple Formtabs Optionstext»: Блок внимания.

Добавляем элемент 1:

  • Caption: Название блока — и здесь же, жмем на кнопку «Добавить элемент» .
  • Fieldname: blockname
  • Caption: Название блока
  • На вкладке Input Option в поле Default Value, пишем alert

Добавляем элемент для alertИ везде нажимаем выполнено. Это поле будет отображаться в табличке (когда будите добавлять элементы) — того что не хватает в видео.

Добавляем элемент 2:

Редактируем созданный выше bs_alert и добавляем в него на вкладке Formtabs новый элемент:

  • Caption: alert и жмем на кнопку «добавить элемент»
  • Fieldname: class
  • Caption: Выберите класс
  • Input TV type: listbox (список с одиночным выбором)
  • На вкладке Input Option в поле Input Default Value перечисляем классы alert: alert-primary||alert-secondary||alert-success||alert-danger||alert-warning||alert-info||alert-light||alert-dark, и в поле Default Value пишем один из классов.

Добавляем конфигурацию для alert

Выполнено. Тут же добавляем второе поле.

  • Fieldname: text;
  • Caption: Текст;
  • inputTVtype: richtext.

Выполнено.

добавляем 2е поле

Создание карусели (слайдера) — сложный элемент

Теперь создадим конфигурацию для Карусели

Ее разметка:

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </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">Previous</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">Next</span>
  </a>
</div>

Здесь немного сложнее логика — не просто статический элемент — а динамический (имеет вложенные элементы).
Первым делом нам нужно создать логику добавления слайдов: bs_carousel_config — здесь останавливаться не буду, читайте статью Создание слайдеров при помощи MIGX. Из данной статьи нужен только раздел: «Создание MIGX конфигурации», только добавляем новый элемент с именем не slider, а bs_carousel_config.

Теперь создаем еще один элемент с именем bs_carousel с caption: Добавить слайды.

На вкладке FormTabs (как в случае с alert)

  • «Multiple Formtabs Optionsvalue»: Слайдер.
  • «Multiple Formtabs Optionstext»: Слайдер.

Добавляем элемент 1:

Caption: carousel и добавляем элемент.

  • Fieldname: bs_carusel;
  • Caption: Добавить слайды;
  • Input TV type — migx;
  • Configs — bs_carousel_config.

создаем MIGX элемент config для карусели

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

MIGX элементы

Для статических блоков у нас 1 элемент, для динамических 2 (в одном содержание вкладок), а второй подхватывает эти вкладки — как то так.

Таким образом создаем нужные нам блоки. Затем редактируем элемент config. На вкладке settings, в поле Замена «Добавить элемент» пишем добавить блоки, в поле Window Title пишем: page builder v. 1 это заголовок.

редактируем элемент config на вкладке settings

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

вкладка fromtabs

После этого переходим на вкладку Colums. Добавляем элемент: Header — Название блока и field — MIGX_formname. Выполнено.

Делаем разметку колонок

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

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

Заполняем тестовые данные

 

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

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

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

Название чанка

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

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

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

Чанк для оформления Alert.

Название: Блок внимания

Код чанка:

<div class="alert {$data['class']}" role="alert">{$data['text']}</div>

Категория: page builder.

Создание чанка для alert

Карусель — чанк оформления.

массив карусели

Название: Слайдер

Код чанка:

{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/ — путь до источника файлов.

путь до источника с изображениями

Чанк для оформления Секции с текстом.

Название: Добавить секцию

Код чанка:

<section class="{$data['class']}"{if $data['img-bg'] } style="background: url(img/{$data['img-bg']})"{/if}> 
    <div class="container">
        {$data['text']}
    </div> 
</section>

Здесь условие if проверяет на заполненность img-bg, т.е. если картинки нет то style в код не подставляется.

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

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

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

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

Выведено

По оформлению отдельных элементов: можно либо все в container обернуть, либо выводы в чанках — если нужно по ширине ограничивать.

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

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
web-revenue.ru
Добавить комментарий