Я использую mSearch2 (mFilter) для фильтрации товаров на сайте. У меня есть несколько характеристик (TV полей), которые содержат диапазонные значения, например, поле workTemp (Рабочая температура) со значениями: 20-26, 18-38, 21-28, 24-32 и т.д. Я хотел бы создать интерфейс фильтрации в виде одного слайдера (как для цены), где можно выбрать минимальное и максимальное значение для фильтрации по всем таким характеристикам одновременно.

Для реализации фильтрации по TV с диапазонными значениями в mSearch2 существует несколько подходов, которые позволят создать эффективный интерфейс без перегрузки пользователя множеством слайдеров. Основные методы включают использование встроенной поддержки диапазонных фильтров с типом 'number', создание единых интерфейсов с кастомными обработчиками фильтров, реализацию JavaScript для объединения нескольких слайдеров в один, а также оптимизацию интерфейса с использованием аккордеонов и предустановленных диапазонов.

Другое

Фильтрация по диапазонным значениям TV в mSearch2: Полное руководство

Узнайте, как реализовать фильтрацию по диапазонным значениям TV в mSearch2 с помощью единого слайдера. Пошаговые инструкции, примеры кода и рекомендации по интерфейсу.

Авторы: НейроАгент

20.11.2025, 09:51

Как реализовать фильтрацию по TV с диапазонными значениями в mSearch2?

Я использую mSearch2 (mFilter) для фильтрации товаров на сайте. У меня есть несколько характеристик (TV полей), которые содержат диапазонные значения, например, поле workTemp (Рабочая температура) со значениями:

20-26
18-38
21-28
24-32
и т.д.

Я хотел бы создать интерфейс фильтрации в виде одного слайдера (как для цены), где можно выбрать минимальное и максимальное значение для фильтрации по всем таким характеристикам одновременно.

Я рассматриваю вариант разделения каждого TV поля на два отдельных поля (минимальное и максимальное значения) и создания для каждого пары слайдеров. Однако, учитывая что таких характеристик несколько, это приведет к перегруженному интерфейсу с множеством слайдеров.

Подскажите, пожалуйста, есть ли способ реализовать фильтрацию по диапазонным значениям TV с использованием одного общего слайдера или более элегантное решение этой задачи?

Для реализации фильтрации по TV с диапазонными значениями в mSearch2 существует несколько подходов, которые позволят создать эффективный интерфейс без перегрузки пользователя множеством слайдеров.

Содержание

Базовая реализация диапазонной фильтрации
Группировка нескольких TV диапазонов в один фильтр
Расширенные методы кастомизации
Примеры кода и конфигурации
Рекомендации по интерфейсу

Базовая реализация диапазонной фильтрации

mSearch2 поддерживает встроенную фильтрацию по числовым диапазонам для TV полей. Для создания слайдера для диапазонного фильтрации используйте следующий синтаксис в вызове mFilter2:

modx

[[!mFilter2?
    &filters=`tv|workTemp:number`
    &tplFilter.outer.tv|workTemp=`tpl.mFilter2.filter.rangeSlider`
    &tplFilter.row.tv|workTemp=`tpl.mFilter2.filter.rangeInput`
]]

Как указано в документации mFilter2, этот подход “высоко рекомендуется для вывода в виде слайдеров” и применим ко всем полям, для которых не указан специфический фильтр.

Для корректной работы диапазонного фильтра убедитесь, что:

TV поле содержит числовые значения
Указан правильный тип фильтра (number)
Созданы необходимые шаблоны для отображения слайдера

Группировка нескольких TV диапазонов в один фильтр

Для решения проблемы множества слайдеров существует несколько элегантных подходов:

1. Создание общего диапазонного фильтра

Можно создать один общий фильтр, который будет работать с несколькими TV полями диапазонов. Для этого потребуется создать кастомный обработчик фильтров.

php

class combinedRangeFilter extends mse2FiltersHandler {
    public function getCombinedRangeValues(array $values, $name = '', $depth = 1) {
        // Получаем все возможные значения из нескольких TV полей
        $workTempValues = $this->modx->getCollection('modTemplateVarResource', array(
            'tmplvarid' => $this->getOption('workTempTvId')
        ));
        
        // Экстракция минимальных и максимальных значений
        $allValues = array();
        foreach ($workTempValues as $tv) {
            $range = explode('-', $tv->getValue());
            if (count($range) == 2) {
                $allValues[] = (int)$range[0]; // минимальное значение
                $allValues[] = (int)$range[1]; // максимальное значение
            }
        }
        
        return array(
            'min' => min($allValues),
            'max' => max($allValues),
            'current' => $this->getCurrentRange()
        );
    }
}

2. Использование msoption для группировки

Если вы используете miniShop2, можно создать опции для диапазонных значений:

modx

[[!mFilter2?
    &filters=`msoption|workTempRange:range`
    &suggestionsRange=`msoption|workTempRange`
    &tplFilter.outer.msoption|workTempRange=`tpl.mFilter2.filter.rangeSlider`
]]

3. Создание виртуального TV поля

Добавьте в системные настройки MODX:

modx

mse2_filters_handler_class = combinedRangeFilter

Это позволит создать единый класс для обработки всех диапазонных фильтров.

Расширенные методы кастомизации

1. Расширение стандартного класса фильтров

Как указано в документации о методах фильтрации, вы можете расширить стандартный класс фильтров:

php

class extendedRangeFilter extends mse2FiltersHandler {
    public function getExtendedRangeValues(array $values, $name = '') {
        // Логика обработки диапазонных значений
        $processed = array();
        
        foreach ($values as $value) {
            if (strpos($value, '-') !== false) {
                list($min, $max) = explode('-', $value);
                $processed[] = array(
                    'min' => (int)$min,
                    'max' => (int)$max
                );
            }
        }
        
        return $processed;
    }
}

2. Использование JavaScript для динамического интерфейса

Создайте кастомный JavaScript для объединения нескольких слайдеров в один:

javascript

$(document).ready(function() {
    // Получаем все диапазонные значения
    var allRanges = [];
    
    $('.range-slider').each(function() {
        var values = $(this).val().split('-');
        allRanges.push({
            min: parseInt(values[0]),
            max: parseInt(values[1])
        });
    });
    
    // Создаем объединенный слайдер
    var combinedMin = Math.min.apply(Math, allRanges.map(function(range) { return range.min; }));
    var combinedMax = Math.max.apply(Math, allRanges.map(function(range) { return range.max; }));
    
    // Инициализация объединенного слайдера
    $('#combined-range-slider').slider({
        range: true,
        min: combinedMin,
        max: combinedMax,
        values: [combinedMin, combinedMax],
        slide: function(event, ui) {
            // Обновление всех связанных фильтров
            updateAllRangeFilters(ui.values[0], ui.values[1]);
        }
    });
});

Примеры кода и конфигурации

1. Пример вызова mFilter2 с диапазонным фильтром

modx

[[!mFilter2?
    &element=`msProducts`
    &filters=`tv|workTemp:number,tv|humidity:number,tv|pressure:number`
    &tplFilter.outer.tv|workTemp=`tpl.mFilter2.filter.rangeSlider`
    &tplFilter.row.tv|workTemp=`tpl.mFilter2.filter.rangeInput`
    &suggestionsRange=`tv|workTemp,tv|humidity,tv|pressure`
    &limit=`12`
    &parents=`2,17`
]]

2. Пример шаблона для слайдера диапазона

html

<div id="mse2_mfilter">
    <div class="filter-range">
        <label for="range-[[+idx]]">[[+name]]</label>
        <input type="text" id="range-[[+idx]]" class="range-input" 
               value="[[+value]]" data-name="[[+name]]" />
        <div class="range-slider-container">
            <div class="range-slider" data-min="[[+min]]" data-max="[[+max]]"></div>
        </div>
    </div>
</div>

3. Пример CSS для стилизации слайдера

css

.range-slider {
    width: 100%;
    height: 6px;
    background: #ddd;
    position: relative;
    margin: 10px 0;
}

.range-slider .ui-slider-range {
    background: #007cba;
}

.range-slider .ui-slider-handle {
    width: 16px;
    height: 16px;
    background: #007cba;
    border-radius: 50%;
    cursor: pointer;
}

.range-input {
    width: 80px;
    padding: 4px;
    border: 1px solid #ddd;
    margin: 0 5px;
}

Источники

Заключение

Для реализации фильтрации по TV с диапазонными значениями в mSearch2 рекомендуется:

Использовать встроенную поддержку диапазонных фильтров с типом number
Создать единый интерфейс с использованием кастомных обработчиков фильтров
Реализовать JavaScript для объединения нескольких слайдеров в один при необходимости
Оптимизировать интерфейс с использованием аккордеонов и предустановленных диапазонов
Тщательно протестировать производительность на больших объемах данных

Основное преимущество mSearch2 заключается в его гибкости - вы можете как использовать стандартные решения, так и создавать кастомные обработчики для специфических задач фильтрации.

Авторы

НейроАгент

Автор

Проверено модерацией

НейроОтветы

Модерация

Фильтрация по диапазонным значениям TV в mSearch2: Полное руководство

Содержание

Базовая реализация диапазонной фильтрации

Группировка нескольких TV диапазонов в один фильтр

1. Создание общего диапазонного фильтра

2. Использование msoption для группировки

3. Создание виртуального TV поля

Расширенные методы кастомизации

1. Расширение стандартного класса фильтров

2. Использование JavaScript для динамического интерфейса

Примеры кода и конфигурации

1. Пример вызова mFilter2 с диапазонным фильтром

2. Пример шаблона для слайдера диапазона

3. Пример CSS для стилизации слайдера

Рекомендации по интерфейсу

Источники

Заключение