Ajax фильтрация в MODX3: исправляем ошибки радио и чекбоксов

При реализации ajax-фильтрации на MODX3 многие разработчики сталкиваются с проблемой: сортировка и фильтр по цене работают, а радио и чекбоксы - нет. Чаще всего радио-кнопки фильтруют только одно значение, а чекбоксы вовсе игнорируются. В этой статье разберём причины и пошаговое решение.

Почему ajax фильтрация в MODX3 не работает для радио и чекбоксов

Основная проблема кроется в неправильной передаче данных из формы в сниппет. При ajax-запросе значения радио и чекбоксов могут не попадать в массив фильтров из-за:

• отсутствия атрибута name с квадратными скобками для чекбоксов;
• неправильной обработки множественных значений в сниппете;
• отсутствия привязки события change к элементам формы.

Как исправить радио-кнопки в ajax фильтре MODX3

Радио-кнопки должны иметь одинаковый атрибут name и разные value. Убедитесь, что в вашем HTML-коде фильтра каждая группа радио имеет уникальное имя, например name="filter_option". В сниппете проверяйте получение значения через $_POST['filter_option'].

Как заставить чекбоксы работать в ajax фильтре MODX3

Для чекбоксов обязательно используйте имена с квадратными скобками: name="filter_check[]". Это позволит передавать массив выбранных значений. В сниппете обрабатывайте их как массив:

$checkedValues = $_POST['filter_check'] ?? [];
if (!empty($checkedValues)) {
    $where[] = 'field IN ("' . implode('","', $checkedValues) . '")';
}

Типичная ошибка: забыли повесить событие change

В JavaScript-коде ajax-фильтрации нужно слушать не только submit, но и change для радио и чекбоксов. Пример:

$('input[type="radio"], input[type="checkbox"]').on('change', function() {
    $.ajax({
        url: '/assets/components/ajaxfilter.php',
        method: 'POST',
        data: $('#filter-form').serialize(),
        success: function(data) {
            $('#results').html(data);
        }
    });
});

Проверка передачи данных в консоли браузера

Откройте инструменты разработчика (F12), перейдите на вкладку Network (Сеть) и выберите XHR-запросы. После клика по радио или чекбоксу смотрите, какие параметры отправляются на сервер. Если параметры отсутствуют - проблема в HTML-разметке или в скрипте.

Дополнительные советы по ajax фильтрации MODX3

• Используйте сниппет pdoResources из pdoTools для гибкой фильтрации.
• Всегда проверяйте, что форма содержит id и метод post.
• Не забывайте очищать кэш MODX после изменений в сниппетах.

Если после всех исправлений ajax фильтрация в MODX3 всё ещё не работает, проверьте консоль JavaScript на ошибки синтаксиса и убедитесь, что jQuery подключён до вашего скрипта.