Шаблон сортировки для mFilter2

Здравствуйте, у меня в категории выводится сортировка вот в таком виде
<div class="sorting__cat sorting__cat-top" id="mse2_sort">

<a href="#" data-sort="resource|pagetitle" data-dir="[[+mse2_sort:is=``:then=`desc`]]"
 data-default="desc"
 class="sort" >Название <span></span></a>
 
<a href="#" data-sort="ms|price" data-dir="[[+mse2_sort:is=`ms|price`:then=`desc`]]" data-default="desc" class="sort">Цена <span></span></a>


</div>

Выглядит это стандартно:

А мне необходимо что бы сортировка была через выпадающий список, селекты которого задают направление и поле фильтрации, выглядит вот так:


пробовал как-то так:
<div class="sorting__cat sorting__cat-top" id="mse2_sort">
<select>
  <option><a data-sort="resource|pagetitle" data-dir="[[+mse2_sort:is=``:then=`desc`]]"
 data-default="desc"
 class="sort">Название</a></option>
  <option><a data-sort="ms|price" data-dir="[[+mse2_sort:is=`ms|price`:then=`desc`]]" data-default="desc" class="sort">Цена</a></option>
</select>

</div>
И так:
<div class="sorting__cat sorting__cat-top" id="mse2_sort">
<select>
  <option data-sort="resource|pagetitle" data-dir="[[+mse2_sort:is=``:then=`desc`]]"
 data-default="desc"
 class="sort">Название</option>
  <option data-sort="ms|price" data-dir="[[+mse2_sort:is=`ms|price`:then=`desc`]]" data-default="desc" class="sort">Цена</option>
</select>

</div>
Подскажите пожалуйста, как можно реализовать в таком виде сортировку?
Dolce
Dolce
05 августа 2017, 12:53
modx.pro
8
5 449
0

Комментарии: 21

Павел Романов
Павел Романов
05 августа 2017, 20:16
2
+1
Делайте просто ссылками, а не select-ом:

<div class="sorting__cat sorting__cat-top" id="mse2_sort">
	<div class="selectheader">По умолчанию</div>
	<div class="selectbody" style="display:none;">
		<a href="#" data-sort="resource|menuindex" data-default="asc" class="sort" >По умолчанию</a>
		<a href="#" data-sort="resource|pagetitle" data-default="asc" class="sort" >Название (А - Я)</a>
		<a href="#" data-sort="resource|pagetitle" data-default="desc" class="sort" >Название (Я - А)</a>
		<a href="#" data-sort="ms|price" data-default="asc" class="sort" >Цена (по возрастанию)</a>
		<a href="#" data-sort="ms|price" data-default="desc" class="sort" >Цена (по убыванию)</a>
	</div>
</div>

selectbody выводите по клику или наведению на selectheader.
В сам selectheader помещайте текст через JS на основании .sort.active.

Ну или попробуйте переопределить свойство sort_link, добавив в вызов mFilter2 параметр:
&filterOptions=`{"sort_link:": "#mse2_sort option"}`
    Dolce
    Dolce
    06 августа 2017, 09:44
    0
    Спасибо. Не могли бы вы еще помочь с JS кодом?
      Павел Романов
      Павел Романов
      06 августа 2017, 11:20
      +1
      Можно так:
      <script>
$(document).ready(function(){
	$('.selectheader').click(function(){
        	$('.selectbody').slideToggle('fast');
	});
});

$(document).on('mse2_load', function(){
	var active = $('.sort.active').html();
	$('.selectheader').html(active);
	$('.selectbody').slideToggle('fast');
});
</script>
        Dolce
        Dolce
        06 августа 2017, 11:51
        0
        Огромное вам спасибо!
          Dolce
          Dolce
          07 августа 2017, 10:17
          0
          Здравствуйте еще раз, небольшой косяк есть, как я понял при нажатии на любой из фильтров срабатывает вот это эта строчка:
          $('.selectbody').slideToggle('fast');
          То есть при нажатии на панагию, фильтрацию и т.д у меня разворачивается/сварачивается тело сортировки (selectbody)
          Можно это как-то поправить?
            Dolce
            Dolce
            07 августа 2017, 10:23
            0
            Вроде бы вот так работает правильно:
            // Сортировка списком
$(document).ready(function(){
    $('.selectheader').click(function(){
        $('.selectbody').slideToggle('fast');
    });
});

$(document).on('mse2_load', function(){
    var active = $('.sortValue.active').html();
    $('.selectheader').html(active);
});


$(document).ready(function(){
    $('.selectbody').click(function(){
        $('.selectbody').slideToggle('fast');
    });
});
              Aleksey
              Aleksey
              11 октября 2017, 23:50
              1
              0
              Здравствуйте! Делал сортировку по этому методу все получилось, только вот проблема со скриптом, если подключить первый предложенный вариант скрипта, то при нажатии пагинации или выбрать любой фильтр разворачивается выпадающее меню. А если выбрать второй вариант скрипта то не выводится активная сортировка в окне выпадающего меню, все время стоит «по умолчанию». Я в JS не силен, подскажите пожалуйста как решить эту проблему?
                Dolce
                Dolce
                15 октября 2017, 10:56
                1
                +2
                Мой финальный код выглядит так:
                JS:
                $(document).ready(function(){
    $('.selectheader').click(function(){
        $('.selectbody').slideToggle('fast');
        
        if($('.selectheader').hasClass('gray')){
            $('.selectheader').removeClass('gray');
            
            
        }else{
             $('.selectheader').addClass('gray');
        }
    });
});

$(document).on('mse2_load', function(){
    var active = $('.sortValue.active').html();
    $('.selectheader').html(active);
});


$(document).ready(function(){
    $('.selectbody').click(function(){
        $('.selectbody').slideToggle('fast');
    });
});
                HTML:
                <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>
                  Aleksey
                  Aleksey
                  15 октября 2017, 12:01
                  0
                  Спасибо за ответ! НО через этот скрипт у меня так же не выводится активный элемент сортировки в окне выпадающего меню.
                    Dolce
                    Dolce
                    15 октября 2017, 13:58
                    0
                    Значит у вас разметка другая. В последнем примере используется select со значениями в option — то есть это все делается стандартными тэгами а не через скрипт
                      Aleksey
                      Aleksey
                      15 октября 2017, 18:46
                      0
                      Почему-то когда делаю через «select» то не срабатывает сортировка, а так через select проще стилизовать под свой сайт.
                        Aleksey
                        Aleksey
                        15 октября 2017, 18:58
                        0
                        И если не трудно подскажите как Вы сделали так, что у Вас через select со значением options сортировка заработала?
                          Dolce
                          Dolce
                          15 октября 2017, 21:41
                          0
                          Я выше и выложил вроде весь код по этой части. А в консоле у вас ошибок нет?
                          Aleksey
                          Aleksey
                          16 октября 2017, 08:01
                          0
                          Не, нет.
                          Aleksey
                          Aleksey
                          16 октября 2017, 10:15
                          0
                          Я в JS вообще ни чего не соображаю, но если Вы делали через select, то по моему там другой скрипт, а тот который вы выложили он для варианта со ссылками череp href.
                          Dolce
                          Dolce
                          16 октября 2017, 10:33
                          5
                          +2
                          Точно, не удалил лишений код — как следствие и скопировал не то. Вот для селектов:
                          $(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();
                    });

   });
                          Aleksey
                          Aleksey
                          16 октября 2017, 12:25
                          0
                          Вот теперь все встало на свои места, все работает. Спасибо Вам огромное, а то я голову сломал как реализовать выпадающее меню. Думаю эта информация будет и другим людям полезна. Спасибо Вам еще раз)
                          Дмитрий
                          Дмитрий
                          12 февраля 2018, 21:59
                          0
                          А можно посмотреть ваш вызов самого плагина mFilter2?
      Aleksey
      Aleksey
      14 октября 2017, 09:20
      0
      Здравствуйте! Делал сортировку по этому методу все получилось, только вот проблема со скриптом, если подключить первый предложенный вариант скрипта, то при нажатии пагинации или выбрать любой фильтр разворачивается выпадающее меню. А если выбрать второй вариант скрипта то не выводится активная сортировка в окне выпадающего меню, все время стоит «по умолчанию». Я в JS не силен, подскажите пожалуйста как решить эту проблему?
        Aleksey
        Aleksey
        15 октября 2017, 06:39
        0
        /
        Sergey (Sentinel)
        Sergey (Sentinel)
        21 февраля 2018, 12:57
        0
        сделал mfilter2 сортировку select… все работает, кроме default значения, что в 
        <option value="" selected>По умолчанию</option>

        прописать для default в строке?
        сейчас так /?sort=undefined:
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          21