Шаблон сортировки для 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

05 августа 2017, 12:53

6 337

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

Павел Романов

05 августа 2017, 20:16

Делайте просто ссылками, а не 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

06 августа 2017, 09:44

Спасибо. Не могли бы вы еще помочь с JS кодом?

Павел Романов

06 августа 2017, 11:20

Можно так:

<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

06 августа 2017, 11:51

Огромное вам спасибо!

Dolce

07 августа 2017, 10:17

Здравствуйте еще раз, небольшой косяк есть, как я понял при нажатии на любой из фильтров срабатывает вот это эта строчка:

$('.selectbody').slideToggle('fast');

То есть при нажатии на панагию, фильтрацию и т.д у меня разворачивается/сварачивается тело сортировки (selectbody)
Можно это как-то поправить?

Dolce

07 августа 2017, 10:23

Вроде бы вот так работает правильно:

// Сортировка списком
$(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

11 октября 2017, 23:50

Здравствуйте! Делал сортировку по этому методу все получилось, только вот проблема со скриптом, если подключить первый предложенный вариант скрипта, то при нажатии пагинации или выбрать любой фильтр разворачивается выпадающее меню. А если выбрать второй вариант скрипта то не выводится активная сортировка в окне выпадающего меню, все время стоит «по умолчанию». Я в JS не силен, подскажите пожалуйста как решить эту проблему?

Dolce

15 октября 2017, 10:56

Мой финальный код выглядит так:
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

15 октября 2017, 12:01

Спасибо за ответ! НО через этот скрипт у меня так же не выводится активный элемент сортировки в окне выпадающего меню.

Dolce

15 октября 2017, 13:58

Значит у вас разметка другая. В последнем примере используется select со значениями в option — то есть это все делается стандартными тэгами а не через скрипт

Aleksey

15 октября 2017, 18:46

Почему-то когда делаю через «select» то не срабатывает сортировка, а так через select проще стилизовать под свой сайт.

Aleksey

15 октября 2017, 18:58

И если не трудно подскажите как Вы сделали так, что у Вас через select со значением options сортировка заработала?

Dolce

15 октября 2017, 21:41

Я выше и выложил вроде весь код по этой части. А в консоле у вас ошибок нет?

Aleksey

16 октября 2017, 08:01

Не, нет.

Aleksey

16 октября 2017, 10:15

Я в JS вообще ни чего не соображаю, но если Вы делали через select, то по моему там другой скрипт, а тот который вы выложили он для варианта со ссылками череp href.

Dolce

16 октября 2017, 10:33

Точно, не удалил лишений код — как следствие и скопировал не то. Вот для селектов:

$(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

16 октября 2017, 12:25

Вот теперь все встало на свои места, все работает. Спасибо Вам огромное, а то я голову сломал как реализовать выпадающее меню. Думаю эта информация будет и другим людям полезна. Спасибо Вам еще раз)

Дмитрий

12 февраля 2018, 21:59

А можно посмотреть ваш вызов самого плагина mFilter2?

Aleksey

14 октября 2017, 09:20

Aleksey

15 октября 2017, 06:39

Sergey (Sentinel)

21 февраля 2018, 12:57

сделал mfilter2 сортировку select… все работает, кроме default значения, что в

<option value="" selected>По умолчанию</option>

прописать для default в строке?
сейчас так /?sort=undefined:

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты