004fa1 - цвет иконок
Параметры в "Системных настройках", которые вероятно следует изменить:
1) Название сайта
Вкладка "Ресурсы" отображает ошибки, которые, возможно остались, после установки modx. К примеру, не переименованные файлы .htaccess
Необходимые компоненты
TinyMCE4 - тормозит при выборе файла картинки
CKEditor (FCKeditor) - работает быстро, но не запоминает путь к каталогу, к которому обращались в последний раз
KCFinder - лучший компонент для загрузки файлов !!!, нет в ModX Revolution
ЧПУ
Автоматически генерировать псевдоним: нет
Использовать дружественные URL: да
Использовать вложенные URL: да
также нужно установить компонент translit
Трансилтерация псевдонимов: russian
<base href="[[!++site_url]]" /> - обязательный тэг
Слайдер
MigX- дополнение
Создаем "дополнитльное поле" slider,
параметры ввода - тип ввода - migx
Вкладки формы:
[{"fields":
[{"field":"image", "caption":"Изображение", "inputTVtype":"image"},
{"field":"h3", "caption":"Заголовок"},
{"field":"desc", "caption":"Описание"},
{"field":"href", "caption":"URL"}]
}]
Разметка колонки:
[
{"header":"Изображение", "dataIndex":"image"},
{"header":"Заголовок", "dataIndex":"h3"},
{"header":"Описание", "dataIndex":"desc"},
{"header":"URL", "dataIndex":"href"}
]
Ссылка для слайдера(куда он ведет)
Код в шаблоне для слайдера:
<div class="slider single-item">
[[getImageList?
&tvname=`slider`
&tpl=`@CODE:<a class="banner" href="[[+href]]" style="background: url([[+image]]) top center no-repeat;
background-size: cover;">
<div class="caption">
<h3>[[+h3]]</h3>
<p>[[+desc]]</p>
</div>
</a>
`]]
</div>
Дабавил выделение, чтобы картинка в слайдере вписывалась в область слайдера и масштабировалась при изменении экрана
background-size: contain;
К странице со слайдером подключаем 4 файла:
<link href="/assets/css/slick.css" rel="stylesheet" type="text/css">
<link href="/assets/css/slick-theme.css" rel="stylesheet" type="text/css">
<script src="/assets/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="/assets/js/slick.js" type="text/javascript"></script>
В подвале перед </body> вставляем js:
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
//..параметры слайдера см https://kenwheeler.github.io/slick/
});
});
</script>
Правим код слайдера, чтобы левая кнопка, будучи над изображением, отображалась
/*dad to enable left button*/
.slick-prev{
z-index:1;
}
Сохранение пропорций баннера при масштабировании экрана:
.banner{
width: 100vw;
height: 30vw;
}
Формирование меню (pdoMenu)
Для формирования меню используем данный инструмент:
Код чанка для меню в шапке
<div id="topmenu">
[[pdoMenu?
&parents=`0`
&level=`1`
&resources=`-1`
&includeTVs=`icon_active, icon`
&tplOuter=`@INLINE <ul class="topnav">[[+wrapper]]</ul>`
&tpl=`@INLINE <li><a href="[[+link]]" title="[[+menutitle]]"><img src="[[+icon]]"/> [[+menutitle]]</a>[[+wrapper]]</li>`
&tplHere=`@INLINE <li class="active"><a title="[[+menutitle]]"><img src="[[+icon_active]]"/>[[+menutitle]]</a></li>`
]]
</div>
Создание многоуровневого меню каталога
[[pdoMenu?
&parents=`2`
&level=`0`
&tplOuter=`@INLINE <ul class="outer">[[+wrapper]]</ul>`
&tplParentRow=`@INLINE <li class="dir"><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
&tplInner=@INLINE <ul class="inner">[[+wrapper]]</ul>
&tplInnerRow=`@INLINE <li class="[[+classnames]]"><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>`
&rowClass=`row`
]]
Создание меню, состоящего из непосредственно подчиненных категорий
[[pdoMenu?
&parents=`2`
&level=`0`
&sortby=`{"pagetitle":"ASC"}`
&tplOuter=`@INLINE <ul id="menu-catalog">[[+wrapper]]</ul>`
]]
Вкладка "доступно для шаблонов", делаем вкл этих дополнительных полей для наших шаблонов.
Создание "Хлебных крошек" (Линейки)
pdoCrumbs - лучший инструмент в плане гибкости и безпроблемности(BreadCrumb и BreadCrumbs-в топку).
Для того, чтобы получить доступ к PdoCrumbs нужно установить сниппет pdoTools
[[pdoCrumbs?
&showHome=`1`
&outputSeparator=``
&tplHome=`@INLINE <li class="breadcrumb-item"><i class="home-icon"></i><a href="/">Главная</a></li>`
&tpl=`@INLINE <li class="breadcrumb-item"><a href="[[+link]]">[[+menutitle]]</a></li>`
&tplCurrent=`@INLINE <li class="breadcrumb-item active">[[+menutitle]]</li>`
&tplMax=`@INLINE <li class="breadcrumb-item disabled"> ... </li>`
&tplWrapper=`@INLINE <ul class="breadcrumb">[[+output]]</ul>`
&showHidden=`0`
&hideContainers=`0`
]]
Создание фотогалереи в карточке товара
1) Устанавливаем пакет phpThumbOf
(Необходимо, чтобы на хостинге был модуль php-imagic)
2) Создаем чанк:
<div class="overlay">
<a class="popup-img" href="[[+image:phpthumbof=`w=980&zc=0`]]" title="[[*pagetitle]]" target="_blank">
<img class="preview" src="[[+image:phpthumbof=`w=300&h=150&zc=0&bg=FFFFFF`]]" alt="[[*pagetitle]]">
</a>
</div>
3) Создаем дополнительное TV-поле типа migx:
с именем galleryPhotos
Вкладки формы:
[{"caption":"Image", "fields": [
{"field":"set","caption":"Название"},
{"field":"description","caption":"Описание"},
{"field":"image","caption":"Картинка","inputTVtype":"image"}
]
}]
Разметка колонок:
[{
"header": "Название", "sortable": "true", "dataIndex": "set"
},{
"header": "Описание", "sortable": "true", "dataIndex": "description"
},{
"header": "Картинка", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"
}]
Документация по плагину:
http://phpthumb.sourceforge.net/demo/docs/phpthumb.readme.txt
Типовые задачи:
1) Белый цвет фона в превью: `w=300&h=150&zc=0&bg=FFFFFF`