- Логика создания слайдеров или какой компонент выбрать
- Создание слайдеров при помощи MIGX
- Создание MIGX конфигурации
- Создание TV с конфигурацией MIGX
- Ввод данных
- Вывод bootstrap 3 carusel на страницу
- Вывод bootstrap 4 carusel на страницу
- Создание слайдера при помощи 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 (будет отдельный урок). Просто объясню логику: к примеру у нас есть раздел блога или новостей компании, в нем есть отдельные ресурсы со своими полями, вот эти ресурсы и поля мы выведем (позже дополню статью конкретным кодом).
Толковый сайт