Ajax сортировка товаров в каталоге

Форма и скрипт для обработки AJAX

В примере буду использовать сортировку по цене, просмотрам и свойству инфоблока (в примере- производитель). Над компонентом catalog.section, который выводит карточки товаров, добавляем форму:

<form method="post" action="/local/ajax/sort.php" class="catalog_sort_block_form1">
    <input type="hidden" name="sortten" value="<?= htmlspecialchars($_COOKIE['sortten'] ?? '') ?>">
    <button type="submit" name="sortten"
            value="SCALED_PRICE_3" <?php echo ($_COOKIE['sortten'] ?? '') === 'SCALED_PRICE_3' ? 'class="selected"' : ''; ?>>
        По цене
    </button>
    <button type="submit" name="sortten"
            value="show_counter" <?php echo ($_COOKIE['sortten'] ?? '') === 'show_counter' ? 'class="selected"' : ''; ?>>
        По популярности
    </button>
    <button type="submit" name="sortten"
            value="property_BREND" <?php echo ($_COOKIE['sortten'] ?? '') === 'property_BREND' ? 'class="selected"' : ''; ?>>
        По производителю
    </button>
</form>

Данная форма отправляет POST нажатой кнопки на скрипт /local/ajax/sort.php. Создаём его с содержимым:

<?php
if ($_SERVER['REQUEST_METHOD'] !== 'POST' || empty($_POST['sortten'])) {
    die();
}
$allowed = ['SCALED_PRICE_3', 'show_counter', 'property_BREND'];
$sortten = in_array($_POST['sortten'], $allowed, true) ? $_POST['sortten'] : null;
if ($sortten !== null) {
    setcookie('sortten', $sortten, 0, '/', '', false, true);
    // Если AJAX-запрос — возвращаем JSON
    $isAjax = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
              strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
    if ($isAjax) {
        header('Content-Type: application/json');
        echo json_encode(['success' => true]);
    } else {
        // Обычный запрос (медленный интернет / без JS) — редирект обратно
        $redirect = !empty($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '/';
        header('Location: ' . $redirect);
    }
    exit;
}

Чтобы сортировка применялась, перед вызовом catalog.section определяем переменную и передаём её в параметры компонента:

$sort = $_COOKIE['sortten'] ?? 'SCALED_PRICE_3';

"ELEMENT_SORT_FIELD" => $sort,
"ELEMENT_SORT_ORDER" => ($sort === 'show_counter') ? 'desc,nulls' : 'asc,nulls',

Чтобы форма отправляла POST на /local/ajax/sort.php при клике на кнопку сортировки, добавляем JavaScript (можно в шаблон catalog.section):

$(document).ready(function () {
    $(".catalog_sort_block_form1 button").click(function (event) {
        event.preventDefault();
        submitSortBtn($(this).val());
    });
    function submitSortBtn(value) {
        var form = $('.catalog_sort_block_form1')[0];
        var formData = new FormData(form);
        formData.set('sortten', value);
        // Необязательно: показываем спиннер пока отрабатывает скрипт
        $('.loading_body').addClass('loading_body_show');
        $.ajax({
            url: form.action,
            type: form.method,
            data: formData,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function (response) {
                location.reload();
            },
            error: function () {
                console.log("Произошла ошибка при отправке запроса.");
            }
        });
    }
});