Вывод сниппета mFilter2 выглядит у нас следующим образом:
{'!mFilter2' | snippet : [
'parents' => $_modx->resource.id,
'limit' => 12,
'class' => 'msProduct',
'element' => 'msProducts',
'tpl' => 'tpl.Site.msFilter2.productTpl',
'tplOuter' => 'tpl.Site.mFilter2.outerTpl',
'tplPageWrapper' => '@INLINE [[+pages]]',
'tplPage' => '@INLINE <a href="[[+href]]">[[+pageNo]]</a>',
'tplPageActive' => '@INLINE <a class="selected" href="[[+href]]">[[+pageNo]]</a>',
'where' => '{"class_key":"msProduct"}',
'suggestions' => 'true',
'filters' => '
ms|width:select,
ms|height:select,
ms|length:select,
ms|made_in:checkbox,
ms|vendor:vendors,
',
'sort' => '
ms|price:desc
',
'tplFilter.outer.ms|vendor' => 'tpl.Site.mFilter2.filter.outer',
'tplFilter.row.ms|vendor' => 'tpl.Site.mFilter2.filter.checkbox',
'tplFilter.outer.ms|made_in' => 'tpl.Site.mFilter2.filter.outer',
'tplFilter.row.ms|made_in' => 'tpl.Site.mFilter2.filter.checkbox',
'tplFilter.outer.ms|width' => 'tpl.Site.mFilter2.filter.outer.whl',
'tplFilter.outer.ms|height' => 'tpl.Site.mFilter2.filter.outer.whl',
'tplFilter.outer.ms|length' => 'tpl.Site.mFilter2.filter.outer.whl',
'tplFilter.row.ms|width' => 'tpl.Site.mFilter2.filter.select.whl',
'tplFilter.row.ms|height' => 'tpl.Site.mFilter2.filter.select.whl',
'tplFilter.row.ms|length' => 'tpl.Site.mFilter2.filter.select.whl',
'tplFilter.outer.ms|popular' => 'tpl.Site.mFilter2.filter.outer.whl',
'tplFilter.row.ms|popular' => 'tpl.Site.mFilter2.filter.select.whl',
]}
Чанк tpl.Site.mFilter2.outerTpl у нас выглядит следующим образом:
Показать по Популярности ↓ Популярности ↑ Цене ↓ Цене ↑
Показать по Популярности ↓ | Популярности ↑ | Цене ↓ | Цене ↑ |
---|---|---|---|
{'!pdoCrumbs' | snippet : [
'exclude' => 8755,
'showHome' => 1,
'outputSeparator' => '→',
'tplWrapper' => $output,
'tpl' => '@INLINE {$menutitle}',
'tplCurrent' => '@INLINE {$menutitle}'
]}
[[+filters]]
Поддон (высота)
<ul><ul><li>/> Высокий</li></ul></ul>
<ul><li>/> Низкий</li></ul>
Форма
<ul><ul><li>/> Ассиметричная, правая / левая</li></ul></ul>
<ul><li>/> Квадратная</li><li>/> Прямоугольная</li><li>/> Пятиугольная</li><li>/> Угловая, четверть круга</li></ul>
Тип дверей
<ul><ul><li>/> Раздвижные</li></ul></ul>
<ul><li>/> Распашные</li></ul>
Крыша
<ul><ul><li>/> Есть</li></ul></ul>
<ul><li>/> Нет</li></ul>
Электроника
<ul><ul><li>/> Есть</li></ul></ul>
<ul><li>/> Нет</li></ul>
{$_modx->resource.pagetitle}
{$_modx->runSnippet('pdoMenu', [ 'parents' => $_modx->resource.id, 'level' => 1, 'includeTVs' => 'image', 'outerClass' => 'list-sm-items', 'tpl' => 'tpl.Site.category.menuTpl', ])}
<ul>[[+results]]</ul>[[!+page.nav]]
Полезная информация
{$_modx->resource.pagetitle}
{$_modx->resource.content}
После чего остаётся добавить jQuery:
$(document).ready(function() {
$(document).on('change', '#mse2_sort', function() {
var selected = $(this).find('option:selected');
var sort = selected.data('sort');
sort += mse2Config.method_delimeter + selected.val();
mse2Config.sort = sort;
mSearch2.submit();
});
});
Комментарии ()