Задача: реализовать возможность сортировки товаров в разделах каталога. Сортировка должна работать с использованием AJAX. В качестве параметров сортировки используются: по алфавиту, по цене, по новизне, просмотрам и по брендам.
В файле section.php комплексного шаблона каталога, до вывода bitrix:catalog.section добавляем:
<form class="sortline" method="post" action="/local/ajax/sort.php">
Сортировать по:
<select name="sortten">
<option value="show_counter"<? echo $_COOKIE['sortten'] === 'show_counter' ? ' selected' : ' '; ?>>
Просмотрам
</option>
<option value="name"<? echo $_COOKIE['sortten'] === 'name' ? ' selected' : ' '; ?>>
Алфавиту
</option>
<option value="SCALED_PRICE_2"<? echo $_COOKIE['sortten'] === 'SCALED_PRICE_2' ? ' selected' : ' '; ?>>
Цене
</option>
<option value="property_BRANDS_REF"<? echo $_COOKIE['sortten'] === 'property_BRANDS_REF' ? ' selected' : ' '; ?>>
Производителям
</option>
</select>
</form>
Этот код отображает форму с элементом select для выбора способа сортировки элементов на странице. Форма отправляется методом POST на адрес /local/ajax/sort.php, когда пользователь выбирает один из вариантов сортировки.
Атрибут name элемента select имеет значение sortten, что указывает на то, что выбранный вариант сортировки будет передан на сервер с помощью POST-запроса в виде массива $_POST['sortten'].
Для каждого варианта сортировки определено свое значение атрибута value, которое соответствует выбранному пользователем варианту. Также в каждой опции используется PHP-код для проверки значения куки 'sortten', хранящей выбранный пользователем вариант сортировки. Если значение куки равно значению атрибута value текущей опции, то устанавливается атрибут selected, чтобы эта опция была выбрана по умолчанию.
Таким образом, при отправке формы методом POST на сервер будет передано значение выбранного варианта сортировки в виде массива $_POST['sortten']. Значение куки 'sortten' будет обновлено на сервере в соответствии с выбранным пользователем вариантом сортировки.
Отправка формы с ajax, без кнопки отправки
Здесь же, в section.php или в подключаемом js файле (рекомендую), добавляем javascript код. Обратите внимаение, что в нем используется jquery - не забудте его подключить
$(function () {
$(".sortline").change(function (event) {
event.preventDefault();
var form = $(this).closest('form')[0];
var formData = new FormData(form);
$.ajax({
url: form.action,
type: form.method,
data: formData,
processData: false,
contentType: false,
success: function (response) {
$('.update_ajax_sortline').load(location.href + ' .update_ajax_sortline');
},
error: function () {
console_log("Произошла ошибка при отправке запроса.");
}
});
});
});Этот код реализует функцию, которая выполняется при изменении элемента с классом "sortline". Когда происходит изменение, функция отправляет AJAX-запрос на сервер с данными из формы, содержащей элемент с классом "sortline".
Затем данные формы обрабатываются объектом FormData, который позволяет удобно собирать данные формы и отправлять их в виде multipart/form-data.
После этого происходит отправка AJAX-запроса с помощью функции $.ajax(), где указывается адрес url и метод type запроса, а также данные formData.
Если запрос успешен, то функция обновляет содержимое элемента с классом "update_ajax_sortline" на текущей странице.
Запись в COOKIE данных из формы
В деректории "/local/ajax/" создаем файл sort.php c содержимым:
function process_form_data($data) {
// Обработка данных формы
if (empty($data['sortten'])) {
return false;
}
return $data['sortten'];
}
function set_cookie($name, $value, $expire = 0) {
// Установка куки
setcookie($name, $value, $expire, '/', '', false, true);
}
// Обработка данных формы
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sortten = process_form_data($_POST);
if ($sortten !== false) {
set_cookie('sortten', $sortten);
}
}Этот код выполняет следующие действия:
- Определяется функция process_form_data, которая принимает данные формы в качестве аргумента $data.
- Функция проверяет, содержит ли массив $data ключ 'sortten', и если нет, то возвращает false.
- Если ключ 'sortten' присутствует в массиве $data, то функция возвращает его значение.
- Определяется функция set_cookie, которая принимает имя куки $name, значение $value и необязательный срок истечения действия куки $expire.
- Функция set_cookie вызывает функцию setcookie() для установки куки с заданным именем, значением и сроком истечения.
Если метод запроса на сервер является POST ($_SERVER['REQUEST_METHOD'] === 'POST'), то выполняется следующее:
- вызывается функция process_form_data с массивом данных формы $_POST в качестве аргумента;
- если функция process_form_data возвращает не false, то вызывается функция set_cookie для установки куки с именем 'sortten' и значением, возвращенным функцией process_form_data.
Собственно, дело осталось за малым, нужно обвернуть вывод bitrix:catalog.section в div, который обновляет свое содержимое при получении ответа от формы, в моем случае это update_ajax_sortline. И нужно добавить параметры сортировки из установленных COOKIE
<div class="update_ajax_sortline">
<?
if (count($_COOKIE['sortten']) > '0') {
$sort = $_COOKIE['sortten'];
} else {
$sort = $arParams["ELEMENT_SORT_FIELD"];
}
$intSectionID = $APPLICATION->IncludeComponent(
"bitrix:catalog.section",
"section",
array(
//... сокращен catalog.section
"ELEMENT_SORT_FIELD" => $sort,
"ELEMENT_SORT_ORDER" => ($_COOKIE['sortten'] === 'show_counter') ? 'desc' : 'asc',
//... сокращен catalog.section
),
$component
);
?>
</div>
Если сортировка еще не выбиралась, значит в COOKIE нет ключа ['sortten'], тогда используем сортировку из настроек компонента. Если ключ есть, используем параметр сортировки из него.
Обратите внимение: направление для сортировки по просмотрам перевернуто ("по убыванию"), так что бы более просматриваемые товары были в начале. Для остальных сортировок используется параметр "по возрастанию"
id - ID элемента;
sort - индекс сортировки;
timestamp_x - дата изменения;
name - название;
active_from или date_active_from - начало периода действия элемента;
active_to или date_active_to - окончание периода действия элемента;
status - код статуса элемента в документообороте;
code - мнемонический код элемента;
iblock_id - числовой код информационного блока;
modified_by - код последнего изменившего пользователя;
active - признак активности элемента;
show_counter - количество показов элемента (учитывается функцией CIBlockElement::CounterInc);
show_counter_start - время первого показа элемента (учитывается функцией CIBlockElement::CounterInc);
shows - усредненное количество показов (количество показов / продолжительность показа);
rand - случайный порядок;
xml_id или external_id - внешний код;
tags - теги;
created - время создания;
created_date - дата создания без учета времени;
cnt - количество элементов (только при заданной группировке)
SCALED_PRICE_<ID> - по ID типа цены