mSearch2 - сортировка кастомным select 'ом

Возникла необходимость кастомизировать стандартную сортировку компонента mSearch2.
Cортировка имела следующий вид:
Как оказалось компонент не может работать с select, а работает только тегом a. Ну да ладно, попробуем исправить это.
На сайте modx.pro в ветке Вопросы нашел вопрос Как сделать сортировку через select? от пользователя DimenSi. Вопрос частично решен если бы не одно НО
перестали работать фильтры, фильтрация срабатывает только после сортировки. Т.е. меняешь ценовой диапазон → ничего, после этого меняешь сортировку → срабатывает и сортировка и фильтр.

ПЛАН РАБОТЫ

  • Установка кастомного селеста
  • Написание скрипта для взаимодействия сортировки с компонентом

Установка кастомного селеста

В качестве select'a будем использовать bootstrap-select. Инструкцию по установке можно посмотреть на сайте
В шаблон вставляем 
<select class="selectpicker pull-right"  id="mse2_sort">
      <option class="sort" data-sort="ms$price" value="asc" data-icon="glyphicon-sort-by-attributes">По цене</option>
      <option class="sort" data-sort="ms$price" value="desc" data-icon="glyphicon-sort-by-attributes-alt">По цене</option>
    </select>
Наш select приобрел новый вид:


Элемент еще не может взаимодействовать с компонентом mSearch2.

Пишем скрипт взаимодействия сортировки с компонентом

Сам скрипт получился не объемный, я сам конечно не силен в js. Выношу его на обозрение.
$(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();
                    });

        });
Roman
Roman
14 сентября 2017, 08:33
modx.pro
8 368

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

Олег
Олег
14 сентября 2017, 13:38
Делал похожую штуку правда пришлось мне править скрипты минишопа. Это решение мне нравится больше
    Stan Ezersky
    Stan Ezersky
    14 сентября 2017, 22:09
    Тут ещё решение есть, проверено
    Антон
    Антон
    02 октября 2017, 23:23
    Отличное решение, реализовал на своем сайте, спасибо!
      Max Grim
      Max Grim
      29 июля 2018, 15:53
      Дополню немного)
      На случай если вам нужно еще По-умолчанию

      Html
      <option class="sort" data-sort="" value="">По умолчанию</option>
      JS
      $(document).ready(function() {
                    $(document).on('change', '#mse2_sort', function() {
                        var selected = $(this).find('option:selected');
                        var sort = selected.data('sort');
                        if(sort!=""){
                            sort += mse2Config.method_delimeter + selected.val();
                        }else{
                            sort = '';
                        }
                        mse2Config.sort =  sort;
                        mSearch2.submit();
                    });

});
        Rootiys
        Rootiys
        06 сентября 2018, 13:39
        Не хочет работать с сортировкой по названию.
        Делаю так
        <select class="selectpicker pull-right" id="mse2_sort">
  <option class="sort" data-sort="ms|price" value="asc">По цене возр</option>
  <option class="sort" data-sort="ms|price" value="desc">По цене убыв</option>
  <option class="sort" data-sort="resource|pagetitle" value="asc">Название (А - Я)</option>
  <option class="sort" data-sort="resource|pagetitle" value="desc">Название (Я - А)</option>
</select>
        Сортирую по названию, а в урле все равно параметр ?sort=ms|price остается.
          Мартин Очоа
          Мартин Очоа
          06 апреля 2020, 20:01
          У меня заработало так:

          <select class="selectpicker pull-right" id="mse2_sort">
  <option class="sort" data-sort="pagetitle" value="asc">Название (А - Я)</option>
  <option class="sort" data-sort="pagetitle" value="desc">Название (Я - А)</option>
</select>
          Мартин Очоа
          Мартин Очоа
          06 апреля 2020, 20:06
          У меня такой способ сортировки убивает выбор страницы.
          Выбираешь вторую страницу (в урл добавляется ?page=2)
          Меняешь сортировку — открывается 1-я страница, а из урл уходит ?page=2
          Вот бы знающий доделал доработку — выбор селектом способа сортирвки довольно обыденная вещь на других движках
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            8