Краткий ответ
360° в Laravel: опубликовать в Studio (имя = артикул, Активен), в layout в head поставить @stack('scripts'), на шаблоне карточки @push с widget.js и поле артикула в шаблоне, указать ключ и артикул (AUTO, если на странице есть артикул в JSON-LD; режим по адресу страницы, если стеки Livewire/Inertia не запускаются снова). Отложенная загрузка и окно. Проверять живую карточку, не список.
Галерея Laravel листает плоские фото. Покупатель всё равно не может повернуть вещь. Вращение 360° из серии кадров можно добавить без пакета Composer: кадры хранятся в Spinnify, на сайт вставляется один скрипт.
Гайд для Laravel с Blade. Тот же фрагмент widget.js работает на карточке товара, как на других HTML-сайтах. Пакет Composer от Spinnify ставить не нужно. Не собирайте widget.js в Vite app.js.
3 шага от фото до живой карточки Laravel
Вся работа вокруг кода встраивания: один скрипт на шаблоне карточки и совпадение с артикулом каталога.
1. Подготовить в Spinnify Studio
До правок шаблонов Blade:
- Зарегистрироваться в Spinnify Studio.
- Создать товар и загрузить серию фото (24–36 кадров, 4:3 для блока «ПК фото»).
- Важно: имя товара в Studio должно совпадать с артикулом Laravel, который выводит шаблон (пробелы и дефисы важны, регистр нет).
- Оставить товар активным. Скрытый товар кнопку не покажет.
2. Добавить код в Laravel
Два способа вставить один и тот же фрагмент из Studio. Копируйте его в «Установка виджета» → «Показать код».
Первый способ: стек Blade (быстрее всего для всего каталога). В resources/views/layouts/app.blade.php внутри head поставьте @stack('scripts'). У widget.js стоит defer, поэтому head подходит. В шаблон карточки show.blade.php оберните фрагмент в @push('scripts') … @endpush и подставьте артикул через поле артикула в шаблоне. Не вставляйте это на список (index.blade.php). Не импортируйте widget.js в Vite app.js; оставьте официальный адрес скрипта на CDN.
Второй способ: AUTO или режим по адресу страницы. Ставьте AUTO, если шаблон карточки уже выводит JSON-LD Schema.org с артикулом. Если страница на Livewire или Inertia и стеки после первой полной загрузки не запускаются снова, включите режим по адресу страницы и задайте базовый адрес сайта в настройках виджета.
3. Настроить связь
Вставьте скопированный из Studio скрипт widget.js. Ключ виджета не меняйте. Артикул в фрагменте берите из поле артикула в шаблоне; режим AUTO читает разметку страницы; режим по адресу страницы берёт сохранённый путь, если стеки Livewire или Inertia не запускаются снова.
- Ключ виджета из Studio не меняют.
- Артикул в коде: поле артикула в шаблоне, либо AUTO чтобы взять его из JSON-LD, либо режим по адресу страницы, если стеки Livewire/Inertia не запускаются снова.
Почему страница остаётся быстрой
Чужой скрипт на карточке Laravel обычно вызывает вопросы про скорость, потому что Blade уже рисует галерею и стили макета. Spinnify не грузит кадры в первую отрисовку: они остаются на CDN, пока покупатель не попросит крутить. Галерея Blade рисуется первой; слой 360 открывается после клика в отдельном окне.
- Отложенная загрузка: браузер не качает кадры, пока покупатель не нажал.
- Изоляция: просмотр открывается в окне и не подменяет галерею Laravel при первой отрисовке.
- CDN: кадры отдаются как WebP/AVIF, без лишних файлов в хранилище Laravel.
Чеклист: кнопки нет?
Если кнопки 3D View нет, пройдите список по живой ссылке на товар, а не в предпросмотре админки.
- Стоит ли @stack('scripts') в head layout? Без стека @push ничего не делает. Если шаблоны скомпилированы, выполните php artisan view:clear.
- Открыт шаблон карточки? Не подключайте скрипт на index.blade.php.
- Имена совпадают? Имя в Studio и артикул, который выводит шаблон, должны быть одинаковыми (включая пробелы и дефисы).
- Товар в Studio активен?
- Ключ виджета скопирован из вашего аккаунта?
- Один скрипт на страницу: не вставляйте фрагмент дважды.
- Livewire или Inertia: если стеки после первой загрузки не запускаются снова, включите режим по адресу страницы и задайте базовый адрес сайта в настройках виджета. Не добавляйте widget.js в Vite app.js.
Можно ли настроить вид кнопки?
Да. Внешний вид кнопки задаётся в Studio, а не в CSS темы. Можно подогнать её под витрину, не правя шаблон карточки:
- Положение: справа, слева или по центру.
- Цвета и подпись под тему Laravel.
- Формат: круглая плавающая иконка или узкая вкладка.
Галерея Laravel при этом остаётся на месте. Слой 360° открывается, когда его запросили.
Снять вращение: как сделать обзор 360°. HTML-магазины Magento: гайд Magento 2. Tilda Zero Block.
