Сортировка mFilter2
Здравствуйте! Впервые столкнулся с сортировкой товаров. Использую плагин mFilter2. Как сделать сортировку по цене?
Вот вызов плагина:
Вот вызов плагина:
[[!mFilter2?
&paginator=`pdoPage`
&parents=`[[*id]]`
&tplPageActive=`@INLINE <li class="current"><a href="[[+href]]">[[+pageNo]]</a></li>`
&tplPageWrapper=`@INLINE <div class="pagination"><ul class="pagination">[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></div>`
&element=`msProducts`
&tpls=`productGridTpl`
&tplOuter=`mFilter2.outer`
&limit=`12`
&includeTVs=`available`
&includeThumbs=`360x360`
&aliases=`
ms|price==price,
msoption|width==width,
msoption|sleepSize==sleepSize,
`
&filters=`
ms|vendor:vendors,
msoption|sleepSize:sleepSizes,`
&class=`msProduct`
&filterOptions=`{"sort_link:": "#mse2_sort option"}`
&tplFilter.outer.price=`tpl.mFilter2.filter.slider`
&tplFilter.row.price=`tpl.mFilter2.filter.option`
]]
Чанк mFilter2.outer<div class="container">
<div class="col-xs-12 col-sm-3 no-margin sidebar narrow">
[[$leftbar]]
</div>
<div class="col-xs-12 col-sm-9 no-margin wide sidebar">
<div id="grid-page-banner">
<a href="[[~[[*bannerCategoryUrl]]]]">
<div class="banner-text right">
[[*bannerCategoryText]]
</div>
<img class="banner-image" alt="" src="assets/images/blank.gif" data-echo="[[*bannerCategory]]" />
</a>
</div>
<section id="gaming">
<div class="grid-list-products">
<h2 class="section-title">[[*pagetitle]]</h2>
<div class="control-bar">
<div id="popularity-sort" class="le-select" >
<select data-placeholder="sort by popularity">
<option value="1">1-100 players</option>
<option value="2">101-200 players</option>
<option value="3">200+ players</option>
</select>
</div>
<!--Сама сортировка -->
<div id="item-count" class="le-select">
<select class="sorting_cat" id="mse2_sort">
<option class="sort" data-sort="resource|pagetitle" value="asc">Название (А - Я)</option>
<option class="sort" data-sort="resource|pagetitle" value="desc">Название (Я - А)</option>
<option class="sort" data-sort="ms|price" value="asc">Цена (по возрастанию)</option>
<option class="sort" data-sort="ms|price" value="desc">Цена (по убыванию)</option>
</select>
</div>
<div class="grid-list-buttons">
<ul class = "mse2_tpl">
<li class="grid-list-button-item active"><a data-toggle="tab" data-tpl="0" class="[[+tpl0]]" href="#grid-view"><i class="fa fa-th-large"></i> Плитка</a></li>
<!-- <li class="grid-list-button-item "><a data-toggle="tab" data-tpl="1" class="[[+tpl1]]" href="#list-view"><i class="fa fa-th-list"></i> Список</a></li>-->
</ul>
</div>
</div><!-- /.control-bar -->
<div class="tab-content">
<div id="grid-view" class="products-grid fade tab-pane in active">
<div class="product-grid-holder">
<div class="row no-margin" id="mse2_results">
[[+results]]
</div>
</div>
<div class="pagination-holder">
<div class="row">
<div class="col-xs-12 col-sm-12 text-left">
[[!+page.nav]]
</div>
</div><!-- /.pagination-holder -->
</div><!-- /.products-grid #list-view -->
</div><!-- /.grid-list-products -->
</div><!-- /.tab-content -->
</section><!-- /#gaming -->
</div><!-- /.col -->
</div><!-- /.container -->
Комментарии: 6
Не совсем ясно, что нужно получить =) Как работает сортировка и фильтрация по цене можно посмотреть на демо-сайте — https://minishop2.com/catalog/, как сделан вывод тоже.
Там очень плохо всё по вёрстке и структуре например:
Смотрите дефолтный чанк tpl.mFilter2.outer, какие элементы и с какими id используются. Нельзя просто надёргать кусков кода и чтобы всё это заработало.
Если нужна сортировка селектами, решение — mSearch2 — сортировка кастомным select 'ом
<section id="category-grid mse2_results">
Смотрите дефолтный чанк tpl.mFilter2.outer, какие элементы и с какими id используются. Нельзя просто надёргать кусков кода и чтобы всё это заработало.
Если нужна сортировка селектами, решение — mSearch2 — сортировка кастомным select 'ом
Видел это решение, все равно не работает(
Решение 100% рабочее. Вам сначала надо код в порядок привести, выводите чанк по умолчанию и исходя из него накидывайте свой дизайн.
Также можно использовать параметры &toPlaceholders и &toSeparatePlaceholders, чтобы вызвать сниппет выше контейнера, а необходимые элементы разместить плейсхолдерами.
Также можно использовать параметры &toPlaceholders и &toSeparatePlaceholders, чтобы вызвать сниппет выше контейнера, а необходимые элементы разместить плейсхолдерами.
Буду пробовать, спасибо)
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.