Розробка каталогу товарів на 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 (показуємо скелетон одразу) — суб'єктивно сприймається як миттєва реакція. Перше завантаження зі сторінки розділу — серверний рендеринг Бітрікс для коректної індексації.

Терміни виконання