Сортировка "По умолчанию" в mFilter2

Не нашёл готового решения, по этому поправил скрипт сам
В моём примере мне нужно было в сортировке-ссылке из документации по mFilter2 сделать сортировку «по умолчанию», но не отдельной ссылкой, а при повторном клике. При том реализовано 2 варианта. Если я сортирую по скидкам, то сбрасываю фильтр на второй клик. На остальные ссылки делается сортировка по desc, потом по asc, потом сбрасывается фильтр.

Ссылки:

<a href="#" data-sort="ms|price" data-dir="[[+mse2_sort:is=`ms|price:desc`:then=`desc`]]" data-default="desc" class="sort" >По цене <span></span></a>
<a href="#" data-sort="resource|publishedon" data-dir="[[+mse2_sort:is=`resource|publishedon:desc`:then=`desc`]]" data-default="desc" class="sort">По ноовизне <span></span></a>
<a href="#" data-sort="ms|skidka" data-dir="[[+mse2_sort:is=`ms|skidka:desc`:then=`desc`]]" data-default="desc" class="sort sort-sales">По скидке <span></span></a>
<a href="#" data-sort="tv|rating" data-dir="[[+mse2_sort:is=`tv|rating:desc`:then=`desc`]]" data-default="desc" class="sort" >По рейтингу <span></span></a>

Изменения в JS assets/components/msearch2/js/web/default.js (я скопировал оригинальный файл и назвал его custom.js).

$(document).on('click', this.options.sort_link, function () {
            if ($(this).hasClass(mSearch2.options.active_class) && $(this).data('dir') == '') {
                return false;
            }
            
            $(mSearch2.options.sort_link).removeClass(mSearch2.options.active_class);
            $(this).addClass(mSearch2.options.active_class);
            var dir;
            if ($(this).data('dir') == '') {
                dir = $(this).data('default');
            }
            else {
                dir = $(this).data('dir') == 'desc'
                    ? 'asc'
                    : 'desc';
            }
            if ($(this).attr('data-dir') == $(this).data('default') && $(this).hasClass(mSearch2.options.active_class) && $(this).hasClass('sort-sales')) {
                mSearch2.Hash.clear();
                var params = mSearch2.getFilters();
                params.sort = '';
                mse2Config.sort = '';
                mSearch2.load(params);
                $(this).data('dir', '').attr('data-dir', '').removeClass(mSearch2.options.active_class);
            } else {
                if ($(this).attr('data-dir') == "asc" && $(this).hasClass(mSearch2.options.active_class)) {
                   mSearch2.Hash.clear();
                   var params = mSearch2.getFilters();
                   params.sort = '';
                   mse2Config.sort = '';
                   mSearch2.load(params);
                   $(this).data('dir', '').attr('data-dir', '').removeClass(mSearch2.options.active_class);
                } else {
                    $(mSearch2.options.sort_link).data('dir', '').attr('data-dir', '');
                    $(this).data('dir', dir).attr('data-dir', dir);
        
                    var sort = $(this).data('sort');
                    if (dir) {
                        sort += mse2Config.method_delimeter + dir;
                    }
                    mse2Config.sort = (sort != mse2Config.start_sort) ? sort : '';
                    var params = mSearch2.getFilters();
                    if (mse2Config['page'] > 1 && (mse2Config['mode'] == 'scroll' || mse2Config['mode'] == 'button')) {
                        mse2Config['page'] = '';
                        delete(params['page']);
                    }
                    mSearch2.Hash.set(params);
                    mSearch2.load(params);
                }
            }
            return false;
        });

Событие по клику которое мы изменяем находится на строке 252, его нужно изменить.

Если подробнее, то для сброса фильтров нужно скинуть класс active с сортировок, почистить hash, params.sort, mse2Config.sort и дата атрибут data-sort
В конечном итоге на любое удобное Вам событие (при том не обязательно править для этого default.js) нужно просто кинуть 7 строк кода:

mSearch2.Hash.clear();
var params = mSearch2.getFilters();
params.sort = '';
mse2Config.sort = '';
mSearch2.load(params);
$(this).data('dir', '').attr('data-dir', '').removeClass(mSearch2.options.active_class);
mSearch2.submit();

Спасибо Алексею Смирнову за решение. Если нужна просто кнопка «По умолчанию» реализованная через ссылки, используйте:

<a href="" data-sort="" data-dir="" class="sorty sort">Сбросить</a>

Александр

09 сентября 2023, 15:22

1 014

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

Алексей Смирнов

12 сентября 2023, 10:00

Чтобы точно люди нашли ответ на этот вопрос выделю его в отдельном комментарии от себя:

<a href="" data-sort="" data-dir="" class="sorty sort">Сбросить</a>

Причем таким образом можно построить и оформить почти любой вариант сортировки по дизайну.
Например в одном проекте делал так:

<div id="mse2_sort">
      <a href="" data-sort="publish:desc" data-dir="" class="sorty sort">Новее</a>
      <a href="" data-sort="pribil:desc" data-dir="" class="sorty sort">Прибыльнее</a>
      <a href="" data-sort="price:asc" data-dir="" class="sorty sort">Дешевле</a>
      <a href="" data-sort="" data-dir="" class="sorty sort">Сбросить</a>
</div>

Те Нужны были только определенные последовательности сортировок. Это реализовал так. И исходники совсем не правил для этого дела.
а еще это можно оформить в выпадающий список (не select) а на js сделать и будет вообще красота. Так же учтите, что на все теги a при клике навешивается класс active, тут просто застилить нужно верно и все будет приличненько.
ну и кто совсем захочет завернуться, просто стандартный js копируется, правиться и указывается новый файл в системной настройке.

Sergey (Sentinel)

08 ноября 2024, 16:24

Для select вот так сделал. Может пригодится тоже.

<select>
    <option data-sort="" data-dir="" class="sorty sort" select>По умолчанию</option>
</select>

$(document).on('change', '#mse2_sort', function() {
    var selected = $(this).find('option:selected');

    // Проверяем, выбран ли элемент "По Умолчанию"
    if (selected.text() === 'По умолчанию') {
        var params = mSearch2.getFilters();
        params.sort = '';
        mse2Config.sort = '';
        mSearch2.load(params);
        mSearch2.submit();
    } else {
        var sort = selected.data('sort');
        sort += mse2Config.method_delimeter + selected.val();
        mse2Config.sort = sort;
        mSearch2.submit();
        mSearch2.Hash.clear();
    }
});

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