Сортировка mFilter2 Новый

Дополнение: 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 -->
13 февраля 2018, 14:05    Дмитрий   
0    38 0

Комментарии ()

  1. Андрей 13 февраля 2018, 14:18 # 0
    Не совсем ясно, что нужно получить =) Как работает сортировка и фильтрация по цене можно посмотреть на демо-сайте — https://minishop2.com/catalog/, как сделан вывод тоже.
      1. Андрей 13 февраля 2018, 14:34 # 0
        Там очень плохо всё по вёрстке и структуре например:
        <section id="category-grid mse2_results">

        Смотрите дефолтный чанк tpl.mFilter2.outer, какие элементы и с какими id используются. Нельзя просто надёргать кусков кода и чтобы всё это заработало.

        Если нужна сортировка селектами, решение — mSearch2 — сортировка кастомным select 'ом
        1. Дмитрий 13 февраля 2018, 14:38 # 0
          Видел это решение, все равно не работает(
          1. Андрей 13 февраля 2018, 14:50 # 0
            Решение 100% рабочее. Вам сначала надо код в порядок привести, выводите чанк по умолчанию и исходя из него накидывайте свой дизайн.

            Также можно использовать параметры &toPlaceholders и &toSeparatePlaceholders, чтобы вызвать сниппет выше контейнера, а необходимые элементы разместить плейсхолдерами.
            1. Дмитрий 13 февраля 2018, 14:54 # 0
              Буду пробовать, спасибо)
    Вы должны авторизоваться, чтобы оставлять комментарии.