В этой статье мы остановим свое внимание на том, как правильно сделать слайдер для главной страницы в CMS Modx.
В предыдущих уроках мы уже познакомились с тем, как совершить предварительную настройку Modx и какие элементы бесплатных шаблонов нужно залить через файловую систему. Разобрались с тем, как проанализировать шаблон и разбить на составные части, как оформить шапку и меню. Теперь перейдем к такому популярному элементу любого современного шаблона, как слайдер. Делать мы его будет с помощью MIGX. Немного поясним, что же из себя представляет это дополнение. MIGX, проще говоря, это средство для объединения нескольких TV- параметров воедино и представления их в виде понятной пользователю таблички, в нашем случае это избавит нас от необходимости создавать по 5,10,15 полей под картинки слайдера и подписи для них, а затем и от вывода всего этого безобразия в материал. Конечно, можно просто взять код слайдера и внести его в чанк, это тоже будет в каком-то смысле нормальное решение, ведь вывод не изменится, но вдруг с сайтом будет работать пользователь далекий от html и css, или нужно будет добавлять большое количество слайдов и часто их менять. Вот в этом случае нам и поможет Migx, унифицирует внесение данных и ускорит работу со слайдером.
Прежде всего в менеджере пакетов нужно найти в поиске и установить его, думаю, тут проблем не возникнет. Единственное, в опциях установки нужно выбрать куда в админке выносить вкладку для работы с MIGx, я выбираю обычно Top Nav, но это дело удобства и пожелания пользователя. После того, как мы установили нашу палочку выручалочку, проанализируем слайдер из шаблона, какие поля нужно будет создавать. В нашем слайдере у каждого слайда есть два основных поля, это заголовок и описание. Заголовок h1 у каждого слайда это !!!НЕДОПУСТИМО!!!, ведь на странице будет столько H1, сколько слайдов, а для SEO это сущая катастрофа. Поэтому сразу оговорюсь, что заголовок мы оформим в блок div с классом h1, который стилистически будет выглядеть идентично, но обернут в другой тег. Жаль, что в нашем примере у каждого слайда нет картинки, не получится рассказать как создавать поле под нее, но, надеюсь, мои читатели догадливые и по аналогии поймут как это делается, если же проблема будет не решена, переходим на страничку помощи Обратной связи.
Первоначальные настройки Migx, вкладки форм.
Приступим к созданию слайдера. Создаем новое дополнительное поле Дополнительные поля-Новое дополнительное поле, Имя m.slider, Описание Слайдер. Следующий шаг Параметры ввода-Тип ввода выбираем migx, если пакет был успешно установлен, то этот тип ввода появится в выпадающем списке.
Далее в Параметрах ввода опускаемся ниже и видим поле для ввода Вкладки формы. Эти вкладки формы отвечают за то, в каком формате для пользователя будет представлена возможность ввода информации, т.е. какие поля он должен заполнить, какие картинки добавить. Здесь с помощью JSON вводим следующую конструкцию и разбираем, что же она значит.
[{"caption":"Слайд", "fields": [
{"field":"title",
"caption":"Заголовок слайда"},
{"field":"description",
"caption":"Текст слайда",
"inputTVtype":"richtext"}]
}]Первое, что мы видим, параметр caption, это заголовок вкладки, если она не одна, в данном случае не имеет значение, т.к. она единственная. Далее после fields идет описание вводимых в этой вкладке полей. Первое поле field имеет заголовок title, по этому имени будем обращаться к полю для вывода результата, caption - это своего рода пояснение, подпись, которую видит пользователь, inputTVtype - это тип поля, по умолчанию text, у первого поля мы этот параметр не использовали, для второго указали richtext(это тип поля текстовый редактор), можно было бы указать image, тоже часто необходим для слайдера.
Разметка колонок MIGX.
Опускаемся чуть ниже и видим поле для заполнения разметка колонок, добавим туда следующий код и разберем что к чему. Стоит рассказать, что разметка колонок необходима, чтобы представить пользователю в виде таблицы введенную им информацию, для удобной работы с ней, редактирования, удаления ненужных элементов.
[
{"header": "Заголовок слайда", "width": "160", "sortable": "true", "dataIndex": "title"},
{"header": "Текст слайда", "width": "400", "sortable": "false", "dataIndex": "description"}
]
Особых пояснений тут не требуется, все интуитивно понятно, но немножко пройдусь по основным пунктам. Header - это заголовок столбца, width - ширина столбца, sortable - возможность сортировать столбец, принимает значения true или false, dataIndex - сюда пишем название поля, которое нужно выводить в этой колонке, название поля берем из ключа field из Вкладки форм. Вот что получилось в итоге.
Еще необходимо в настройках нашего tv во вкладке Доступно для шаблонов отметить Главная.
Для удобства создать категорию Slider(Дополнительные поля-Новая категория) и отметить эту категорию в настройках поля.
Сохраняем все наши изменения и переходим Ресурсы-Home,переименовываем ресурс в Главная, проверяем, указан ли шаблон Главная для этой страницы, затем переходим на вкладку Дополнительные поля-Slider и должны лицезреть следующую картину.
Когда все подготовительные моменты закончены, слайдер Modx успешно создан, можно создать три элемента слайдера для примера, чтобы протестировать работу и самое главное вывести его в материал. Думаю с созданием слайдов проблем не возникнет, вот какая информация заполнена у меня.
Теперь остается не менее важный этап, вывод полученных элементов слайдера и придание им нужного вида. Первым делом снова вернемся к файлу index.html из нашего бесплатного шаблона. Копируем содержимое блока с классом container, которые расположен сразу после блока header. В этом блоке и содержится шаблон для будущего слайдера. Скопированное содержимое вставляем в новый чанк slider. Мы видим, что каждый слайд заключен в тег li, это и будет шаблоном для вывода каждого имеющегося слайда, не забываем, что я говорила в самом начале по поводу тега h1 в слайдах. Для вывода слайдов используем следующую конструкцию, в данном случае ее будет вполне достаточно для работы слайдера. Параметр tvname - Это название tv параметра с типом ввода migx, tpl - это шаблон для вывода элементов. У getImageList есть и большое количество других параметров, с документацией по этому сниппету и с документацией по Migx можно познакомиться по ссылке. Там вы найдете все и на любой случай.
[[getImageList?
&tvname=`m.slider`
&tpl=`@CODE:<li><div class="banner-info1"><div class="h1">[[+title]]</div>[[+description]]</div></li>
`]]Теперь нам осталось зайти через файловый менеджер в файл css и добавить класс h1, чтобы стилистически этот блок выглядел идентично тегу h1. Заходим assets/css/style.css, находим строку 65 и через запятую добавляем .banner .h1, получится код
.banner h1,.banner .h1 {
text-align: center;
color: #fff;
font-size: 2.2em;
margin: 0 0 1em;
}Вот и все готово, теперь приведу полностью код чанка slider, вдруг у кого-то остались вопросы.
<div class="container">
<div class="banner-info">
<section class="slider">
<div class="flexslider">
<ul class="slides">
[[getImageList?
&tvname=`m.slider`
&tpl=`@CODE:<li><div class="banner-info1"><div class="h1">[[+title]]</div>[[+description]]</div></li>
`]]
</ul>
</div>
</section>
<!-- FlexSlider -->
<script defer="" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- FlexSlider -->
</div>
</div>
</div>