Интеграция AR-примерки товаров на 1С-Битрикс

Интеграция AR-примерки товаров на 1С-Битрикс

Однажды к нам обратился владелец интернет-магазина очков. Мобильный трафик составлял 60%, но конверсия на мобильных была в два раза ниже десктопа — покупатели просто не могли представить, как очки сидят на лице. Мы предложили внедрить AR-примерку на базе WebXR. Через месяц после запуска конверсия на мобильных выросла на 25%, а доля возвратов снизилась на 30%. Расскажу, как повторить этот результат на 1С-Битрикс: от выбора SDK до интеграции в карточку товара.

AR-примерка решает проблему визуализации — камера смартфона накладывает модель товара в реальном времени. Мы регулярно сталкиваемся с запросами на интеграцию такого функционала в Битрикс. Правильный выбор поставщика SDK и грамотная связка данных каталога с 3D-моделями — ключ к быстрому запуску. Реализуем под ключ: от анализа до внедрения. На рынке несколько SDK: WebXR, Snap Camera Kit, Banuba, Visage. Выбор зависит от типа товара и бюджета. Мы поможем подобрать оптимальный вариант под ваш каталог.

Как выбрать SDK для быстрой интеграции?

WebXR + Three.js — браузерный, не требует приложения. Работает в Chrome на Android (iOS — Safari с ограничениями). 3D-модели в формате .glb или .usdz. Подходит для мебели, очков, крупных предметов. По охвату устройств WebXR лучше Snap Camera Kit в 10 раз — не нужна установка дополнительного ПО. Snap Camera Kit / Meta Spark — SDK для создания AR-масок/эффектов. Интеграция через iframe или нативное приложение. Хорошо работает для украшений, очков, аксессуаров. Требует лицензии и загрузки моделей на серверы Snap. Banuba / Visage Technologies — SDK для примерки очков, макияжа, причёсок. Даёт точное наложение по точкам лица. Есть REST API для передачи параметров модели. Лицензия оплачивается отдельно, но точность наложения выше, чем у WebXR. Fit Analytics / True Fit — специализированные сервисы для одежды с рекомендацией размера на основе параметров пользователя. Не AR в строгом смысле, но решают ту же задачу снижения возвратов.

Архитектура интеграции с Битрикс

Суть интеграции — передать AR-виджету идентификатор и параметры товара из каталога Битрикс. Схема:

Карточка товара (catalog.element)
  → JavaScript передаёт product_id и SKU в AR-виджет
    → Виджет запрашивает 3D-модель по product_id
      → /api/ar/model/{product_id} (эндпоинт Битрикс)
        → Возвращает URL файла .glb/.usdz из b_file
          → WebXR/SDK отображает модель через камеру

Как организовать хранение 3D-моделей в каталоге?

Для хранения 3D-моделей создайте свойство инфоблока:

• Код: AR_MODEL_GLB
• Тип: Файл
• Формат: .glb (для Android/WebXR)

И второе свойство для iOS:

• Код: AR_MODEL_USDZ
• Тип: Файл
• Формат: .usdz

Загрузка — стандартная через административный интерфейс или массовая через скрипт импорта (CFile::SaveFile()).

API-эндпоинт для AR-виджета

Создайте обработчик в Битрикс:

// /local/api/ar/model.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$productId = (int)$_GET['product_id'];
if (!$productId) { http_response_code(400); exit; }

\Bitrix\Main\Loader::includeModule('iblock');

$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props   = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']);

$glbFile  = $props['AR_MODEL_GLB']['VALUE']  ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE'])  : null;
$usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null;

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad');

header('Content-Type: application/json');
echo json_encode([
    'model_url'   => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile),
    'product_id'  => $productId,
    'ar_supported' => (bool)$glbFile,
]);

Как подключить WebXR в шаблоне карточки товара?

В шаблоне компонента catalog.element (или result_modifier.php) добавьте:

// Проверяем поддержку WebXR
if ('xr' in navigator && $arModelUrl) {
    const arButton = document.createElement('a');
    arButton.rel    = 'ar';
    arButton.href   = $arModelUrl; // URL файла .usdz для iOS Quick Look

    // Для Android/WebXR — используем <model-viewer>
    const modelViewer = document.createElement('model-viewer');
    modelViewer.setAttribute('src', $arModelUrlGlb);
    modelViewer.setAttribute('ar', '');
    modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
    modelViewer.setAttribute('camera-controls', '');
    document.getElementById('ar-container').appendChild(modelViewer);
}

Библиотека @google/model-viewer (подключается через CDN) обеспечивает поддержку всех трёх AR-режимов: WebXR (Chrome Android), Scene Viewer (Android нативный), Quick Look (iOS Safari).

Интеграция через внешние SDK (Banuba, Snap)

Если используете сторонний SDK с лицензией:

// Передаём параметры товара в SDK
window.BANUBA_SDK.init({
    clientToken: 'YOUR_TOKEN',
    onReady: () => {
        window.BANUBA_SDK.tryOn({
            productId: <?= $arResult['ID'] ?>,
            sku:       '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>',
            category:  'eyewear', // glasses, rings, watches
        });
    }
});

SDK сам запрашивает модель со своих серверов по productId — для этого нужно предварительно загрузить модели в их CDN через их API или административную панель.

Как выполнить массовую загрузку 3D-моделей?

Для каталога 500+ товаров с AR-моделями нужен скрипт импорта:

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file

foreach ($csv as $row) {
    $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']);
    if (!$element) continue;

    $glbId  = \CFile::SaveFile(['name' => $row['glb_file'],  'tmp_name' => '/models/' . $row['glb_file'],  ...], 'catalog_ar');
    $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar');

    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId,  'AR_MODEL_GLB');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ');
}

Как отслеживать эффективность AR-примерки?

Подключите отслеживание: сколько пользователей запустили AR-примерку, как это влияет на конверсию.

// При запуске AR-примерки
modelViewer.addEventListener('ar-status', (event) => {
    if (event.detail.status === 'session-started') {
        ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', {
            product_id: productId,
            category:   productCategory,
        });
    }
});

Сравниваете конверсию сессий с AR-примеркой и без — это основной KPI, который обосновывает затраты на подготовку 3D-моделей. По данным Google ARCore, AR-примерка увеличивает конверсию на 20–30%. Настроим A/B-тест для вашего магазина и предоставим отчёт.

Что входит в работу

• Выбор оптимального SDK под ваш тип товаров и бюджет.
• Настройка хранения 3D-моделей в инфоблоках.
• Разработка API-эндпоинта для выдачи моделей.
• Интеграция AR-виджета в шаблон карточки товара.
• Настройка аналитики и A/B-теста.
• Обучение менеджеров загрузке моделей.
• Документация и код в вашем репозитории.

Состав работ и сроки

Основная трудоёмкость проекта — создание 3D-моделей товаров. Интеграция кода без подготовки моделей занимает 3–5 недель. Получите консультацию по вашему проекту — оценим возможность внедрения AR-примерки за один день. Свяжитесь с нами для обсуждения деталей.

CommerceML: почему стандартный обмен — и спасение, и ловушка

Стандартный обмен через CommerceML 2.0 на типовой «Управлении торговлей» или «Комплексной автоматизации» заводится за день-два. Товары, цены, остатки, заказы — всё через XML-файлы по расписанию. Для магазина на 3 000 позиций с парой обновлений в сутки этого хватает с запасом. Но как только каталог перерастает 30 000 SKU, начинаются проблемы: интеграция 1С с Битрикс на больших объёмах требует нестандартных решений.

Почему CommerceML тормозит на каталогах свыше 100 000 товаров?

bitrix_1c_exchange.php генерирует XML на стороне Битрикса, 1С забирает и парсит. На больших каталогах парсер активно пишет во временную таблицу b_xml_tree — MySQL может встать колом. Мы видели проект, где стандартный обмен 180 000 товаров занимал 6 часов и полностью блокировал сервер: ни админка, ни фронт не открывались. Решение — инкрементальный обмен. В настройках узла обмена на стороне 1С ставим «Выгружать только изменённые» и разбиваем выгрузку на пакеты по 500–1000 элементов. На стороне Битрикса — кастомный обработчик, который не пересоздаёт b_xml_tree каждый раз, а работает через CIBlockXMLFile::ReadXMLToDatabase() с контролем порций. Каталог в 200 000 SKU обновляется за 8–12 минут.

Ещё один подводный камень — EXTERNAL_ID. При повторном импорте Битрикс сопоставляет элементы инфоблоков по внешнему коду. Если в 1С товар удалён и создан заново с новым GUID, на сайте появляется дубль — со старыми отзывами на одной карточке и нулевыми на другой. Лечится жёсткой привязкой по артикулу через кастомный обработчик события OnBeforeIBlockElementAdd.

Как избежать дублей при повторном импорте?

Привязываем товары не по GUID, а по артикулу. Проверка на уникальность выполняется до записи в инфоблок — дубликаты исключаются даже после пересоздания номенклатуры в 1С. На одном проекте с 50 000 товаров такая схема предотвратила появление 300 дублей в месяц и сэкономила контент-менеджерам около 20 часов ручной чистки.

Кастомные конфигурации 1С: когда CommerceML пасует

«У нас типовая конфигурация» — говорит каждый второй клиент, а потом мы открываем базу и видим 200 кастомных обработок, переименованные реквизиты и самописные документы реализации. CommerceML работает с фиксированной структурой XML. Если в 1С изменили состав реквизитов номенклатуры или добавили нестандартный документ — обмен молча пропускает эти данные. Или падает с непонятной ошибкой в журнале регистрации 1С, а в Битрикс ничего не пишется.

В таких случаях делаем кастомную выгрузку. На стороне 1С пишем обработку, которая формирует JSON (парсить быстрее, отлаживать проще) и отправляет через REST API Битрикса. Полный контроль: какие поля берём, как трансформируем, что делаем при конфликте. Для тяжёлых случаев — D7 API с прямой работой через \Bitrix\Catalog\ProductTable и \Bitrix\Sale\Order.

Когда нужен кастомный REST вместо CommerceML?

Кастомный REST оправдан при:

• нестандартных реквизитах номенклатуры;
• множественных типах цен (розница, опт, дилерская, акционная, региональная, валютная) — стандартный обмен передаёт только один тип;
• мультискладе с разными остатками и необходимостью выбора склада на сайте.

Цены, остатки и мультисклад

Стандартный обмен умеет передавать один тип цены. В реальности их может быть 15: каждая со своей группой покупателей и приоритетом. Маппинг между ценовыми группами 1С и группами пользователей Битрикса — отдельная инженерная задача. Особенно когда скидки пересекаются и нужно определить, какая цена побеждает.

Мультисклад добавляет ещё один слой: товар есть на складе в Москве, нет в Питере, и «под заказ» в Новосибирске. На сайте нужно показать наличие по каждой точке, подключить выбор пункта самовывоза и рассчитать доставку от ближайшего склада, где товар физически есть. Стандартный модуль складского учёта Битрикс (catalog.store) справляется с отображением, но логику «откуда отгружать» пишем отдельно. Для одного производственного холдинга мы реализовали кастомный агрегатор остатков, который за 2 секунды рассчитывал баланс по 8 складам — это сократило количество ошибок отгрузки на 80%.

Заказы и документооборот

Заказ с сайта улетает в 1С, формируется реализация, товар резервируется. Статусы возвращаются обратно. Главный нюанс — частичная отгрузка: клиент заказал 5 позиций, 3 есть на складе, 2 придут через неделю. 1С формирует два документа реализации. Битрикс из коробки не умеет разбивать один заказ на несколько отгрузок — дорабатываем обработчик OnSaleOrderSaved, который создаёт дочерние заказы и синхронизирует статусы по каждому.

Документы в личном кабинете — счета, акты, накладные из 1С — отдаём через REST, PDF генерируется на стороне 1С и кэшируется на CDN. Покупатель скачивает не из 1С напрямую (это убило бы сервер), а из кэша.

Рекомендация CommerceML: пакетный импорт с контролем порций снижает нагрузку на MySQL и исключает блокировки (источник: Wikipedia).

Мониторинг: не «настроил и забыл»

Обмен может сломаться тихо: скрипт отработал, ошибок в логе нет, но 200 товаров не обновились из-за невалидного UTF-8 в названии. Или 1С поменяла формат даты в очередном обновлении — все цены пришли нулевыми.

Минимальный набор, который ставим на каждом проекте:

• Алерт в Telegram, если время обмена выросло в 3+ раза от среднего.
• Проверка расхождения остатков: скрипт сравнивает b_catalog_product.QUANTITY с тем, что отдаёт 1С, и оповещает при дельте больше 5 %.
• Дашборд: последняя синхронизация, количество обработанных позиций, очередь, ошибки.

Для проектов с высокой нагрузкой добавляем асинхронные очереди на Redis или RabbitMQ. Обмен не блокирует веб-сервер, данные не теряются при кратковременном падении 1С. На одном интернет-магазине с оборотами 2 млн заказов в год мы внедрили такую схему — время восстановления после сбоев сократилось с 3 часов до 10 минут.

Связка с Битрикс24 для автоматизации документооборота

Если кроме сайта есть корпоративный портал на Битрикс24 — связываем и его. Контрагенты из CRM летят в 1С, счета из 1С появляются в карточке сделки. Менеджер видит дебиторку и взаиморасчёты, не переключаясь между окнами. Закрыли сделку — документы сформировались сами.

Оплата поступила в 1С → логист получает задачу на отгрузку в Битрикс24. Товар отгружен → менеджер видит уведомление. Автоматические задачи по событиям из 1С — через вебхуки Битрикс24 REST API. Такая связка сокращает ручной ввод на 70% и исключает забытые отгрузки.

Как мы настраиваем интеграцию: пошаговый процесс

1. Аудит конфигурации 1С. Смотрим структуру справочников, документов, реквизитов. Выявляем кастомные доработки. Оцениваем объём данных (количество SKU, заказов, складов).
2. Проектирование схемы обмена. Согласовываем набор данных: товары, цены, остатки, заказы, документы. Определяем интервал синхронизации и механизм — CommerceML или кастомный REST.
3. Настройка стандартного обмена. Настраиваем CommerceML, пакетный режим, привязку по артикулу. Проверяем корректность передачи данных на тестовом каталоге.
4. Расширенная интеграция. Для сложных конфигураций пишем кастомные обработчики на стороне 1С и Битрикса. Подключаем мультисклад, множественные цены, частичную отгрузку.
5. Мониторинг и гарантия. Устанавливаем алерты, дашборд, документацию. Обучаем операторов. После запуска — гарантийная поддержка.

Сроки и что входит в работу

Результат работы включает: документированную схему обмена, настроенные сценарии синхронизации, дашборд мониторинга, обучение операторов и гарантийную поддержку после запуска. Стоимость рассчитывается индивидуально — она зависит от сложности конфигурации 1С, объёма каталога и необходимой степени автоматизации. Оценим ваш проект за 1 день — пишите, обсудим. Закажите интеграцию — получите стабильный обмен за 1–2 недели.

Мы провели более 50 интеграций 1С для интернет-магазинов и производственных компаний. Средний опыт команды — 7 лет, у нас есть сертифицированные специалисты 1С-Битрикс. Наш опыт гарантирует, что обмен не сломается в первый же месяц и будет стабильно работать годами. Например, на проекте с каталогом 50 000 товаров автоматизация обмена сэкономила клиенту около 200 000 рублей в год на операционных затратах.

Свяжитесь с нами для бесплатного аудита вашей конфигурации 1С — найдём узкие места и предложим оптимальное решение.