Розробка сайту меблевої фабрики на 1С-Бітрікс

Розробка сайту меблевої фабрики на 1С-Bitrix

Меблева фабрика працює з номенклатурою, де один товар може мати десятки варіацій: диван у п'яти варіантах оббивки, трьох розмірах і двох конфігураціях каркаса — це 30 торгових пропозицій. Кухонний гарнітур збирається з модулів, і покупець хоче бачити результат перед замовленням. Сайт на 1С-Bitrix вирішує обидві задачі: каталог із торговими пропозиціями та фасетною фільтрацією для стандартної меблі, плюс 3D-конфігуратор для модульних систем. Інтеграція з 1С забезпечує актуальність цін та залишків без ручного оновлення.

Каталог меблі на торгових пропозиціях

Каталог будується на торговому каталозі Bitrix (модуль catalog) з використанням механізму SKU — торгових пропозицій. Структура розділів інфоблока: кухні, шафи-купе, дивани та крісла, ліжка, столи та стільці, меблі для ванної, офісна меблі.

Основний інфоблок «Меблі» містить товари, до кожного з яких прив'язаний інфоблок торгових пропозицій. Властивості товару:

• Колекція — прив'язка до довідника (інфоблок «Колекції»)
• Стиль — список: класика, сучасний, лофт, скандинавський, мінімалізм
• Матеріал каркаса — список: масив дуба, масив бука, ЛДСП, МДФ, метал
• Країна виробництва — список (для імпортної меблі в асортименті)
• Гарантія — числова властивість (місяці)
• 3D-модель — файл GLTF/GLB для конфігуратора (де застосовується)

Торгові пропозиції містять властивості, що формують конкретну варіацію:

• Колір — прив'язка до довідника з HEX-кодом і фото зразка
• Матеріал оббивки/фасаду — прив'язка до довідника з характеристиками
• Розмір — рядкова властивість (Ш×Г×В в мм)
• Артикул — унікальний код для синхронізації з 1С
• Ціна — через механізм цін модуля catalog (базова, роздрібна, дилерська)
• Залишок — через складський облік модуля catalog

Фасетна фільтрація

Фільтрація за параметрами — критичний елемент для каталогу з тисячами SKU. Bitrix підтримує фасетний індекс (модуль iblock, метод \Bitrix\Iblock\PropertyIndex\Manager::buildIndex()), який будує попередньо розраховані таблиці для миттєвої фільтрації.

Компонент bitrix:catalog.smart.filter виводить фільтр з параметрами:

• Матеріал — чекбокси з кількістю товарів у дужках
• Стиль — чекбокси
• Ціна — діапазон (повзунок)
• Розмір — діапазони за шириною, глибиною, висотою
• Колір — візуальні плашки з зразками
• Наявність — перемикач «В наявності / Під замовлення»

Фасетний індекс перебудовується при змінах товарів через обробник OnAfterIBlockElementUpdate. Для каталогу з 5000+ SKU це дає виграш у швидкості фільтрації на порядок у порівнянні з прямими SQL-запитами.

Інтеграція з 1С

Синхронізація працює через штатний модуль обміну catalog за протоколом CommerceML 2:

• Номенклатура — з 1С в Bitrix: товари, торгові пропозиції, властивості (колір, розмір, матеріал)
• Ціни — з 1С: базові, роздрібні, дилерські типи цін
• Залишки — з 1С: по складах, з агрегацією для відображення на сайті
• Замовлення — з Bitrix в 1С: замовлення з сайту виконуються як замовлення покупців
• Статуси замовлень — з 1С в Bitrix: оновлення статусу виробництва/доставки

Розклад обміну: ціни та залишки — кожні 30 хвилин (cron), номенклатура — раз на добу (нічний обмін), замовлення — кожні 15 хвилин.

B2B-розділ для дилерів

Дилерський розділ закритий авторизацією. Дилери реєструються через форму з підтвердженням менеджером (модерація через бізнес-процес модуля bizproc). Після підтвердження користувач додається до групи «Дилери», якій доступні:

• Дилерські ціни — окремий тип цін у модулі catalog, видимий тільки групі «Дилери»
• Розширений каталог — розділи інфоблока з правами доступу для дилерів
• Маркетингові матеріали — інфоблок з фото, рендерами, описами для каталогів дилерів
• Історія замовлень і взаємні розрахунки — дані з 1С, що виконуються в особистий кабінет

Deep-dive: 3D-конфігуратор меблі

Конфігуратор модульної меблі — ключева конкурентна перевага сайту. Покупець збирає кухню з модулів у 3D-просторі: вибирає нижні та верхні шафи, розміщує їх вздовж стін, вибирає фасади і стільницю, бачить загальну вартість. Технічно це інтеграція WebGL-додатка на Three.js з даними з каталогу Bitrix.

Архітектура взаємодії

Конфігуратор — клієнтське JavaScript-додаток, що завантажує дані з Bitrix через REST API. Схема:

1. При відкритті конфігуратора JS запитує /api/configurator/modules/ — список доступних модулів з параметрами (розміри, ціна, шлях до 3D-моделі)
2. Дані беруться з інфоблока «Модулі конфігуратора»: кожен елемент — окремий модуль (нижня шафа 600мм, верхня шафа 400мм, кутовий модуль тощо)
3. 3D-моделі зберігаються у форматі GLTF/GLB — оптимальний баланс між якістю та розміром файлу
4. При розміщенні модуля на сцені Three.js оновлює загальну специфікацію та вартість

Моделі та оптимізація

Кожен модуль існує як параметрична 3D-модель. Для кухонної шафи це: корпус (нерухомий), фасад (змінний — прив'язка до довідника фасадів), фурнітура (ручки — змінні). Завантаження моделей відбувається ледачим способом: при ініціалізації завантажуються тільки low-poly попередні перегляди, деталька модель завантажується при розміщенні на сцені.

Вимоги до моделей:

• Полігональність одного модуля — до 5000 полігонів (low-poly для реального часу)
• Текстури — 512×512 для модулів, 1024×1024 для фасадів
• GLTF з Draco-стиском — зменшення розміру файлу на 70–80%
• Групування: корпус, фасад, стільниця — окремі mesh для заміни матеріалів

Зміна матеріалів та фасадів

При виборі матеріалу фасаду (наприклад, «Натуральний дуб» → «Білий глянець») Three.js замінює текстуру на відповідному mesh модуля. Текстури зберігаються в Highload-інфоблоці «Матеріали конфігуратора» з полями: назва, тип (дерево, пластик, скло), текстура (файл PNG), карта нормалей (файл PNG), параметри PBR (шорсткість, металевість).

Заміна відбувається через THREE.TextureLoader з кешуванням завантажених текстур у Map. При першому виборі матеріалу текстура завантажується з сервера, при повторному — береться з кешу.

Розміщення в просторі

Користувач задає розміри приміщення (довжина стін, висота стелі) через введення у форму. Three.js будує каркас кімнати. Модулі прив'язуються до стін через snap-логіку: при перетаскуванні модуль «прилипає» до найближчої стіни та сусідного модуля. Колізії перевіряються через bounding box — модулі не можуть перетинатися.

Обмеження розміщення задаються у властивостях модуля в інфоблоці:

• UF_WALL_TYPE — список: нижня, верхня, пенал, кутова
• UF_SNAP_POINTS — JSON з координатами точок стикування
• UF_MIN_HEIGHT — мінімальна висота установки від підлоги (для верхніх модулів)

Формування замовлення

По завершенні конфігурації користувач натискає «Оформити замовлення». JavaScript формує JSON-специфікацію: масив модулів з координатами, обрані фасади та матеріали, рендер-скриншот сцени (генерується через renderer.domElement.toDataURL()).

JSON надсилається на сервер, де PHP-скрипт:

1. Створює замовлення в модулі sale з товарами-модулями з каталогу
2. Розраховує загальну вартість через прив'язку модулів до торгових пропозицій (фасад + розмір = конкретне SKU)
3. Зберігає скриншот і JSON-конфігурацію у властивостях замовлення
4. Виконує замовлення в 1С при наступному циклі обміну

Продуктивність

Конфігуратор з 15–20 модулями на сцені повинен працювати на 30+ FPS на середньому пристрої. Заходи оптимізації:

• Instancing для однакових модулів (THREE.InstancedMesh)
• Frustum culling — Three.js автоматично відсікає об'єкти за межами камери
• LOD — при віддаленні камери модулі переключаються на спрощену геометрію
• Тені вимкнені; освітлення — ambient + directional без shadow map

Технічні вимоги

Сайт розгортається на виданні «Бізнес» — необхідні модулі торгового каталогу, складського обліку та обміну з 1С. Серверні вимоги: PHP 8.1+, PostgreSQL або MySQL, мінімум 4 ГБ RAM (конвертація 3D-моделей при завантаженні через адмінку), SSD для зберігання GLTF-файлів. Композитний кеш для каталогу, CDN для статики та 3D-моделей.