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

Меняем стандартный вид сортировки в mSearch2 на кастомную с применением select'ов

Возникла необходимость поменять стандартную сортировку компонента mSearch2 и заменить используемые по-умолчанию теги a на select.

Как оказалось “из коробки” компонент впринципе не может работать с select’ами, поэтому простая замена тэгов на новые оказалась безрезультатной. Ну да ладно, попробуем это исправить.

Для начала в шаблоне страницы, где выводится сортировка заменяем стандартный вывод, например таким:

<select class="input-select"  id="mse2_sort">
  <option class="sort" data-sort="mssp_price" value="-">Сортировка по цене:</option>
  <option class="sort" data-sort="mssp_price" value="desc">- по убыванию</option>
  <option class="sort" data-sort="mssp_price" value="asc">- по возрастанию</option>
</select>

Но, как упоминалось выше данной замены недостаточно, поскольку сам компонент mSearch2 еще не может взаимодействовать с этим элементом.

Для того чтобы “подружить” наш кастомный элемент сортировки с mSearch2 пишем небольшой скрипт. В моем случае он был таким:

$(document).ready(function() {
  
  var sort = mse2Config.sort;
  if (sort) {
    var data_sort = sort.split(":");
    $("#mse2_sort").val(data_sort[1]);
  }

  $(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();
  });

});

Все. Теперь при изменении опций нашего select’а в переменную mse2Config.sort передаются данные активной опции и вызывается компонент mSearch2, который и проводит сортировку по данной опции.