Создание слайдеров при помощи MIGX

MODX Revolution - Создание Bootstrap карусели при помощи MIGX MODX Revo

Последнее изменение поста: 22 октября 2018 в 20:00

Сегодня мы разберем как при помощи MIGX создать Bootstrap слайдер. Перед началом изучения, рекомендую сначала посетить этот урок.

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

Идем в управление MIGX и добавляем новый элемент с именем slider, в поле замены пишем «Добавить слайды» и переходим на вкладку «Formtabs».

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

Далее идем на вкладку «Columns» и точно также заполняем значения:

добавление TV полей в конфигурацию migx

  • Fieldname – zagolovok, Caption – Заголовок.
  • Fieldname – slide, Caption – Слайд, Input TV Type – image.
  • Fieldname – opisanie, Caption – Описание.
  • Fieldname — idstranici, Caption – Укажите id документа на который ссылаться.

Заполненная таблица

Далее идем во вкладку «Columns» и точно также заполняем значения:

создание колонок для TV полей в конфигурации migx

  • Header – Заголовок, Field – zagolovok.
  • Header – Слайд, Field – slide, Renderer – this.renderImage.
  • Header – Описание, Field – opisanie.
  • Header – id документа, Field – idstranici.

Примечание: По сути мы переносим элементы с Formtabs. Да так же можете заполнять поля Column width – ширину столбцов.

Сохраняем (выполнить).

Для тех кто вообще не хочет париться, создаем пустую конфигурацию и экспортируем в нее следующий код:

{
  "formtabs":[
    {
      "MIGX_id":1,
      "caption":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b",
      "print_before_tabs":"0",
      "fields":[
        {
          "MIGX_id":1,
          "field":"zagolovok",
          "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
          "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":1
        },
        {
          "MIGX_id":2,
          "field":"slide",
          "caption":"\u0421\u043b\u0430\u0439\u0434",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"image",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":2
        },
        {
          "MIGX_id":3,
          "field":"opisanie",
          "caption":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":3
        },
        {
          "MIGX_id":4,
          "field":"idstranici",
          "caption":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f",
          "description":"",
          "description_is_code":"0",
          "inputTV":"",
          "inputTVtype":"",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":4
        }
      ],
      "pos":1
    }
  ],
  "contextmenus":"",
  "actionbuttons":"",
  "columnbuttons":"",
  "filters":"",
  "extended":{
    "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b",
    "disable_add_item":"",
    "add_items_directly":"",
    "formcaption":"",
    "update_win_title":"",
    "win_id":"",
    "maxRecords":"",
    "addNewItemAt":"bottom",
    "media_source_id":"",
    "multiple_formtabs":"",
    "multiple_formtabs_label":"",
    "multiple_formtabs_field":"",
    "multiple_formtabs_optionstext":"",
    "multiple_formtabs_optionsvalue":"",
    "actionbuttonsperrow":4,
    "winbuttonslist":"",
    "extrahandlers":"",
    "filtersperrow":4,
    "packageName":"",
    "classname":"",
    "task":"",
    "getlistsort":"",
    "getlistsortdir":"",
    "sortconfig":"",
    "gridpagesize":"",
    "use_custom_prefix":"0",
    "prefix":"",
    "grid":"",
    "gridload_mode":1,
    "check_resid":1,
    "check_resid_TV":"",
    "join_alias":"",
    "has_jointable":"yes",
    "getlistwhere":"",
    "joins":"",
    "hooksnippets":"",
    "cmpmaincaption":"",
    "cmptabcaption":"",
    "cmptabdescription":"",
    "cmptabcontroller":"",
    "winbuttons":"",
    "onsubmitsuccess":"",
    "submitparams":""
  },
  "columns":[
    {
      "MIGX_id":1,
      "header":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a",
      "dataIndex":"zagolovok",
      "width":100,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":2,
      "header":"\u0421\u043b\u0430\u0439\u0434",
      "dataIndex":"slide",
      "width":100,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"this.renderImage",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":3,
      "header":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435",
      "dataIndex":"opisanie",
      "width":200,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    },
    {
      "MIGX_id":4,
      "header":"id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430",
      "dataIndex":"idstranici",
      "width":50,
      "sortable":"false",
      "show_in_grid":1,
      "customrenderer":"",
      "renderer":"",
      "clickaction":"",
      "selectorconfig":"",
      "renderchunktpl":"",
      "renderoptions":"",
      "editor":""
    }
  ],
  "category":""
}

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

В дереве MODX на вкладке «Элементы», нажмите + напротив пункта «Дополнительные поля» и вводим следующее:

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

 

  • «Имя» — slider; «Подпись» — Слайдер.
  • Во вкладке «Параметры ввода» в «Тип ввода» выбираем migx, а в поле «Конфигурации» вводим slider.
  • Во вкладке «Доступно для шаблонов» выбираем те шаблоны, для которых будет доступен ввод в это поле.

задаем конфигурацию для TV поля

Ввод данных

Откроем документ, для которого присвоено поле slider с MIGX с конфигурацией и введём в него какие-нибудь данные.

вводим данные в tv migx

Вывод bootstrap 3 carusel на страницу

Html разметка у нас стандартная getbootstrap.com/docs/3.3/javascript/#carousel-examples, переделаем ее под MIGX и в необходимое место в шаблоне пропишем следующий код:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    [[getImageList? &tvname=`slider` &tpl=`tplsliderIndicator`]]
  </ol>
  <div class="carousel-inner" role="listbox">
    [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>

И создаем чанки:

tplsliderIndicator:

<li data-target="#carousel" data-slide-to="[[+idx:subtract]]" [[+idx:is=`1`:then=`class="active"`]]></li>

и чанк tplsliderItem со следующим содержимым:

<div class="item [[+idx:is=`1`:then=`active`]]">
  <img class="img-responsive" src="[[+slide]]" alt="[[+zagolovok]]">
  <div class="carousel-caption">
    <h3>[[+zagolovok]]</h3>
    <p>[[+opisanie]]</p>
    <a class="btn btn-success" href="[[~[[+idstranici]]]]">Подробнее</a>
  </div>
</div>

Вывод bootstrap 4 carusel на страницу

Как и в предыдущем случае, берем стандартную разметку getbootstrap.com/docs/4.1/components/carousel/ и переделываем ее, в итоге получаем

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        [[getImageList? &tvname=`slider` &tpl=`tplsliderIndicator`]]
    </ol>
    <div class="carousel-inner" role="listbox">
        [[getImageList? &tvname=`slider` &tpl=`tplsliderItem`]]
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Следующий</span>
    </a>
</div>

Где чанк tplsliderIndicator имеет следующий код:

<li data-target="#carouselExampleIndicators" data-slide-to="[[+idx:subtract]]" [[+idx:is=`1`:then=`class="active"`]]></li>

и чанк tplsliderItem со следующим кодом:

<div class="carousel-item[[+idx:is=`1`:then=` active"`]]" style="background-image: url('[[+slide]]')">
    <div class="carousel-caption d-none d-md-block">
        <h3>[[+zagolovok]]</h3>
        <p>[[+opisanie]]</p>
        <a class="btn btn-success" href="[[~[[+idstranici]]]]">Подробнее</a>
    </div>
</div>

Все!

Оценить статью
web-revenue.ru
Добавить комментарий

  1. Денис Мухин

    а как задать значения по умолчанию, чтобы для каждой страницы не выбирать слайды?

    Ответить
  2. Руслан Федореев

    Добрый день вкладка ресурсы —> главная нету следующего(см.скрин)

    Ответить
    1. Alex87

      Не понимаю вопроса)

      Ответить
  3. Alex87

    Добавил видео к статье

    Ответить