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

Продолжаем натяжку нашего шаблона и сегодня мы научимся делать слайдеры (карусели) в MODX. В нашем шаблоне на главной странице сразу 3 слайдера: изображения + текст, отзывы, и вывод статей (новостей) — сделаем их динамичными.

Существует как минимум 3 способа создания слайдеров: при помощи плагинов banery, migx и pdoResources рассмотрим каждый способ.

Логика создания слайдеров или какой компонент выбрать

Для карусели с контентом (к примеру вывод опубликованных новостей, статей с блога, отзывов и т.д.) отлично подойдет pdoResources.

Для статического контента (когда нет созданных страниц с информацией и не собираетесь их создавать) отлично подойдет MIGX.

BanerY — по идее создан для размещения рекламы — но на нем без проблем можно создать статические слайдеры — сделать это проще чем на MIGX, но я бы не стал. В любом случае выбор за вами.

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

Если не читали прошлый урок, изучите его.

Начнем с верхнего слайдера на главной странице, за него отвечает js компонент revolution slider — слайдеры прикольные, красивые, с различными эффектами — но жестко тормозят сайт так как используют пачку js скриптов и css стилей. Для оптимизации скорости я избавлюсь от него и за место него выведу родной bootstrap слайдер (у нас он 3й версии) — он тоже присутствует в шаблоне (пренебрегаем красотой во благо оптимизации).

Удаляем все что связано со slider revolution (если важна скорость  — не важна оставляйте — логика его натяжки похожа).

Находятся в чанке tpl = как минимум +20% к скорости сайта.

Также удаляем весь html код слайдера из чанка tpl.1.

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

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

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

• Fieldname – zagolovok, Caption – Заголовок.
• Fieldname – slide, Caption – Слайд, Input TV Type – image.
• Fieldname – opisanie, Caption – Описание, Input TV Type – richtext.

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

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

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

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

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

{
  "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":"richtext",
          "validation":"",
          "configs":"",
          "restrictive_condition":"",
          "display":"",
          "sourceFrom":"config",
          "sources":"",
          "inputOptionValues":"",
          "default":"",
          "useDefaultIfEmpty":"0",
          "pos":3
        }
      ],
      "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":""
    }
  ],
  "category":""
} 

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

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

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

Ввод данных

Откроем документ, для которого присвоено поле slider с 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>

Либо можно сделать вывод migx проще — при помощи fenom.

{set $rows = json_decode($_modx->resource.slider, true)}
<section id="home">
    <div class="container-fluid p-0">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            {foreach $rows as $idx => $row}
                <li data-target="#carousel" data-slide-to="{$idx}"{if $idx == 0} class="active"{/if}></li>
            {/foreach}
          </ol>
          <div class="carousel-inner" role="listbox">
            {foreach $rows as $idx => $row} 
                <div class="item{if $idx == 0} active{/if}">
                  <img class="img-responsive" src="images/{$row.slide}" alt="{$row.zagolovok}">
                  <div class="carousel-caption">
                    <h3>{$row.zagolovok}</h3>
                    <p>{$row.opisanie}</p>
                  </div>
                </div>
            {/foreach}
          </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>
    </div>
</section>

Вывод 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>

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

И так есть статичный слайдер, пусть это будет обычный bootstrap слайдер, с вот такой разметкой:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Заголовок</h3>
        <p>Описание</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Заголовок</h3>
        <p>Описание</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Заголовок</h3>
        <p>Описание</p>
      </div>
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Цель создать управляемый слайдер из этой разметки. Приступим.

Начнем пожалуй с создания слайдов в BannerY, для этого заходим в Приложения — BannerY — Позиции и создаем позицию (к примеру home-slider).

После этого переходим во вкладку Баннеры и нажимаем на кнопку Новый банер. Откроется окно создания нового банера.

Заполняем все:

• Название, его можно будет вывести при помощи [[+name]].
• Выбираем изображение — [[+image]].
• Указываем URL куда переходить — [[+url]].
• Заполняем описание — [[+description]] — сюда к стати можно зарядить не только текст, но и обычный html, и это круто.
• Ну и выбираем позицию (создали ее ранее).

И так создаем нужное количество слайдов.

Теперь нужно вышеприведенную разметку разбить на чанки и подогнать код в чанках под синтаксис BanerY

Создаем чанк для отдельного слайдера с классом active, пусть будет slide и внедряем в него синтаксис:

<div class="item active">
 <img src="[[+image]]" alt="[[+name]]">
 <div class="carousel-caption">
  <h3>[[+name]]</h3>
  <p>[[+description]]</p>
  <p><a href="[[+url]]" class="btn btn-default">Подробнее</a></p>
 </div>
</div>

Теперь копируем тот чанк и задаем ему имя slide2 и удаляем класс active

<div class="item">
 <img src="[[+image]]" alt="[[+name]]">
 <div class="carousel-caption">
  <h3>[[+name]]</h3>
  <p>[[+description]]</p>
  <p><a href="[[+url]]" class="btn btn-default">Подробнее</a></p>
 </div>
</div>

Ну и остается по сути только вывести слайды.

[[BannerY? &position=`1` &tplFirst=`slide` &tpl=`slide2`]]

В итоге получаем следующее:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
   [[BannerY? &position=`1` &tplFirst=`slide` &tpl=`slide2`]]
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Да к стати его документация находится вот здесь: docs.modx.pro/components/bannery/snippet

Карусель ресурсов при помощи pdoResources

Т.к. мы еще не наполнили сайт и не изучили pdoResources (будет отдельный урок). Просто объясню логику: к примеру у нас есть раздел блога или новостей компании, в нем есть отдельные ресурсы со своими полями, вот эти ресурсы и поля мы выведем (позже дополню статью конкретным кодом).