Краткий ответ
360° в OpenCart 3/4: опубликовать в Studio (имя = поле Model, Активен), вставить widget.js в Design → Theme Editor на шаблоне карточки Twig, указать ключ и артикул вручную (AUTO, если на странице есть артикул в JSON-LD). Отложенная загрузка и окно. Обновить кэш темы. Проверять живую карточку, не предпросмотр в админке.
Галерея OpenCart листает плоские фото. Покупатель всё равно не может повернуть вещь. Вращение 360° из серии кадров можно добавить без модуля OpenCart: кадры хранятся в Spinnify, на сайт вставляется один скрипт.
Гайд для OpenCart 3 и 4 (Theme Editor на Twig). В OpenCart 1.5 и 2.x шаблоны другие. Тот же фрагмент widget.js работает на карточке товара. Отдельное расширение OpenCart от Spinnify ставить не нужно.
3 шага от фото до живой карточки OpenCart
Вся работа вокруг кода встраивания: один скрипт на карточке и совпадение с полем Model в каталоге (это обычный артикул).
1. Подготовить в Spinnify Studio
До входа в админку OpenCart:
- Зарегистрироваться в Spinnify Studio.
- Создать товар и загрузить серию фото (24–36 кадров, 4:3 для блока «ПК фото»).
- Важно: имя товара в Studio должно совпадать с полем Model в OpenCart (пробелы и дефисы важны, регистр нет).
- Оставить товар активным. Скрытый товар кнопку не покажет.
2. Добавить код в OpenCart
Два способа вставить один и тот же фрагмент из Studio. Копируйте его в «Установка виджета» → «Показать код».
Первый способ: Theme Editor (удобнее для карточек). Design → Theme Editor, откройте шаблон карточки товара на Twig. В OpenCart 4 путь тот же, в каталоге шаблонов карточки. Вставьте скрипт рядом с галереей, сохраните, обновите кэш темы. Theme Editor пишет правку в базу, не в файл на диске. Артикул в коде ставьте вручную: он должен совпасть с полем Model. Если поле пустое, впишите имя из Studio.
Второй способ: шаблон шапки плюс режим AUTO, только если тема уже выводит JSON-LD Schema.org с артикулом. Тогда скрипт грузится на всех страницах. Лучше держать код на шаблоне карточки.
3. Настроить связь
Вставьте скопированный из Studio скрипт widget.js. Ключ виджета не меняйте. Артикул в фрагменте должен совпасть с полем Model в OpenCart; режим AUTO читает разметку страницы; режим по адресу страницы берёт сохранённый путь.
- Ключ виджета из Studio не меняют.
- Артикул в коде: значение из поля Model, либо AUTO чтобы взять его из JSON-LD, либо режим по адресу страницы, если в Studio сохранён путь.
Почему страница остаётся быстрой
Чужой скрипт в OpenCart обычно вызывает вопросы про скорость, потому что шаблон карточки уже тащит галерею и JS темы. Spinnify не грузит кадры в первую отрисовку: они остаются на CDN, пока покупатель не попросит крутить. Галерея OpenCart рисуется первой; слой 360 открывается после клика в отдельном окне.
- Отложенная загрузка: браузер не качает кадры, пока покупатель не нажал.
- Изоляция: просмотр открывается в окне и не подменяет галерею OpenCart при первой отрисовке.
- CDN: кадры отдаются как WebP/AVIF, без лишних файлов в хранилище картинок OpenCart.
Чеклист: кнопки нет?
Если кнопки 3D View нет, пройдите список по живой ссылке на товар, а не в предпросмотре админки.
- Обновили кэш темы? Шестерёнка на главной админки: отключить или сбросить кэш темы. Extensions → Modifications: обновить, если стоят модификации. У темы Journal свой кэш.
- Открыта живая ссылка на товар? Предпросмотр в админке плохо проверяет скрипты витрины.
- Theme Editor против файла: Theme Editor важнее FTP. Если правили шаблон на диске и ничего не изменилось, закройте правку в Theme Editor или сбросьте кэш.
- Имена совпадают? Имя в Studio и поле Model в OpenCart должны быть одинаковыми (включая пробелы и дефисы).
- Товар в Studio активен?
- Ключ виджета скопирован из вашего аккаунта?
- Один скрипт на страницу: не вставляйте фрагмент дважды и не кладите его в шаблон шапки, если не хотите AUTO на всех страницах.
Можно ли настроить вид кнопки?
Да. Внешний вид кнопки задаётся в Studio, а не в CSS темы. Можно подогнать её под витрину, не правя шаблон карточки:
- Положение: справа, слева или по центру.
- Цвета и подпись под тему OpenCart.
- Формат: круглая плавающая иконка или узкая вкладка.
Галерея OpenCart при этом остаётся на месте. Слой 360° открывается, когда его запросили.
Снять вращение: гайд со смартфоном. Другие HTML-магазины: Tilda Zero Block. Полный гайд Spinnify.
