Интеграция 3D-фото в карточку товара

Задача

Клиент снимает товары в 3D на сервисе Cappasity. Нужно было показывать эти 3D-модели в карточках товаров на InSales вместе с обычными фотографиями.

Cappasity дает iframe-код для вставки модели. Но в InSales нет стандартного поля для iframe, и непонятно, как встроить это в галерею изображений.

Анализ требований

Определили, что нужно:

Добавить поле для вставки iframe-кода в админке
Встроить 3D-фото в стандартную галерею товара
3D-фото должно быть первым в галерее
Остальные фото идут после 3D-модели

Добавление поля в админку

Создали дополнительное поле "Foto-3D" в настройках товара. Администратор вставляет туда iframe-код от Cappasity через стандартный редактор InSales.

Не нужно лезть в код темы. Просто открываешь карточку товара, находишь поле "Foto-3D" и вставляешь код.

Интеграция в галерею

Настроили тему так, чтобы 3D-фото автоматически становилось первым элементом галереи. Если поле "Foto-3D" заполнено — показывается 3D-модель, потом остальные фото.

Если поле пустое — галерея работает как обычно, показывает только фотографии.

Как это выглядит

Покупатель открывает карточку товара и видит:

3D-модель (если добавлена) — можно крутить мышкой или пальцем
Фото 1
Фото 2
Фото 3...

Переключение между 3D и фото работает так же, как между обычными фотографиями — через миниатюры или стрелки.

Техническая оптимизация

Плеер Cappasity

Подключили официальный плеер Cappasity. Он загружает 3D-модель и позволяет ей управлять: крутить, увеличивать, смотреть с разных ракурсов.

Убрали лишнее

Отключили автоматическое перелистывание галереи. Когда покупатель крутит 3D-модель, галерея не переключается случайно на следующее фото.

Убрали избыточные анимации при переходе от 3D к фото. Всё работает плавно, без рывков.

Тестирование

Проверили работу на:

Разных браузерах (Chrome, Firefox, Safari, Edge)
Мобильных устройствах (iOS и Android)
Планшетах
Десктопах с разными разрешениями

Настройки плеера

В iframe-коде можно настроить:

Автоматическое вращение модели
Скорость вращения
Кнопку полноэкранного режима
Зум изображения
AR-режим (дополненная реальность)

Результат

В карточках товаров теперь показываются 3D-модели вместе с обычными фото. Покупатель может рассмотреть товар со всех сторон.

Администратор добавляет 3D-фото через стандартный интерфейс InSales. Не нужно каждый раз вызывать программиста.

3D-модель всегда первая в галерее. Это важно, потому что покупатель сразу видит интерактивный элемент и может начать изучать товар.

Cappasity работает на всех устройствах. Модель можно крутить как мышкой на компьютере, так и пальцем на телефоне.