Разработка каталога товаров на Vue.js для 1С-Битрикс

Разработка каталога товаров на Vue.js для 1С-Битрикс

Стандартный компонент bitrix:catalog.section отлично работает для простых каталогов, но как только появляются требования к динамической фильтрации, бесконечной прокрутке или мгновенному переключению между видами отображения — серверный рендеринг начинает тормозить. Vue-каталог решает эти задачи за счёт клиентской реактивности при сохранении серверного рендеринга для SEO.

Структура данных: API для каталога

Битрикс предоставляет данные через CIBlockElement::GetList() или D7 ORM. Оборачиваем в кастомный контроллер:

// local/components/vendor/catalog.api/ajax.php
use Bitrix\Main\Engine\Controller;
use Bitrix\Iblock\Elements\ElementProductTable;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter = [], int $page = 1, int $pageSize = 24): array
    {
        $offset = ($page - 1) * $pageSize;
        // Получение через D7 ORM ElementProductTable
        // Возврат JSON: items, pagination, facets
    }
}

Отвечает на POST /bitrix/services/main/ajax.php?action=catalog.getProducts.

Компоненты Vue-каталога

Минимальная структура компонентов:

• CatalogApp.vue — корневой компонент, управляет состоянием
• ProductGrid.vue / ProductList.vue — сетка и список товаров, переключение без перезагрузки
• ProductCard.vue — карточка товара с быстрым просмотром
• Pagination.vue или InfiniteScroll.vue — навигация по страницам
• SortBar.vue — переключение сортировки

SEO: гибридный рендеринг

SEO-важный первый экран рендерит Битрикс серверно. Vue берёт управление после гидратации:

// В шаблоне компонента
$initialProducts = json_encode($arResult['ITEMS']);
echo '<div id="catalog-app"
    data-initial-products="' . htmlspecialchars($initialProducts) . '"
    data-iblock-id="' . $arResult['IBLOCK_ID'] . '"
></div>';

Vue читает data-initial-products и рендерит первый экран без AJAX. Последующие запросы (пагинация, фильтрация) — уже через API.

Работа с ценами и наличием

Цены в Битрикс — из b_catalog_price через тип цены. Остатки — из b_catalog_store_product. Для реального времени (актуальное наличие в момент просмотра) добавьте отдельный быстрый endpoint:

// Запрос наличия для массива товаров
async function getAvailability(productIds) {
    return await api.post('/catalog/availability', { ids: productIds });
}

Вызывайте после рендеринга карточек, не блокируя начальную загрузку.

Случай из практики

Интернет-магазин строительных материалов: каталог с 80 000 позиций, фильтрация по 20+ параметрам. Стандартный AJAX-фильтр Битрикс при каждом изменении параметра делал запрос на 3–6 секунд (полный серверный рендеринг раздела). Vue-каталог с debounced-запросами (300 мс) и optimistic UI (показываем скелетон сразу) — субъективно воспринимается как мгновенная реакция. Первая загрузка со страницы раздела — серверный рендеринг Битрикс для корректной индексации.

Сроки выполнения