Пример фильтра товаров на Vue.js и 1С-Битрикс

Одна из задач, которую я часто решаю, — это создание удобного фильтра для товаров, который динамически обновляет список продуктов без перезагрузки страницы. Для этого я использую Vue.js на стороне фронтенда и 1С-Битрикс для обработки данных на сервере. Расскажу, о том как реализовать простой компонент.

API на стороне 1С-Битрикс

Создам кастомный компонент, который будет отдавать данные о товарах в формате JSON.

Настраиваю API на стороне 1С-Битрикс

В Битриксе для этого удобно использовать пользовательский компонент или скрипт. Я создаю кастомный компонент, который будет отдавать данные о товарах в формате JSON.

//local/components/custom/product.filter/class.php

class ProductFilterComponent extends CBitrixComponent
{
public function executeComponent()
{
Loader::includeModule('iblock');
$request = Application::getInstance()->getContext()->getRequest();
$filterParams = $request->get('filter');
$filter = [
"IBLOCK_ID" => 2, // ID инфоблока
"ACTIVE" => "Y",
];
if (!empty($filterParams['price_min'])) {
$filter[">=CATALOG_PRICE_1"] = $filterParams['price_min'];
}
if (!empty($filterParams['price_max'])) {
$filter["<=CATALOG_PRICE_1"] = $filterParams['price_max']; } $products = []; $res = CIBlockElement::GetList([], $filter, false, false, ["ID", "NAME", "DETAIL_PAGE_URL", "CATALOG_PRICE_1"]); while ($item = $res->GetNext()) {
$products[] = $item;
}
echo json_encode($products);
die();
}
}


Регистрирую компонент:

Создаю файл component.php в папке компонента:

$component = new ProductFilterComponent();
$component->executeComponent();


Теперь есть API-эндпоинт, который возвращает список товаров в зависимости от фильтра.

Vue.js

На фронтенде я использую Vue.js для управления интерфейсом. Создаю Vue-компонент, который будет отображать фильтр и обновлять товары.

new Vue({
el: '#product-filter',
data() {
return {
filters: {
price_min: '',
price_max: ''
},
products: []
};
},
methods: {
applyFilter() {
axios.get('/local/components/custom/product.filter/', {
params: { filter: this.filters }
})
.then(response => {
this.products = response.data;
})
.catch(error => {
console.error('Ошибка при загрузке товаров:', error);
});
}
},
mounted() {
this.applyFilter(); // Загружаю все товары при загрузке страницы
}
});

После настройки компонента и подключения Vue.js я тестирую функционал. Захожу на страницу с фильтром, проверяю, как изменения параметров фильтра обновляют список товаров без перезагрузки страницы.

Такой подход позволяет быстро реализовать фильтрацию товаров с использованием Vue.js и 1С-Битрикс. Сервер обрабатывает запросы, а фронтенд мгновенно обновляет данные, создавая удобный для пользователей интерфейс.