respuesta rapida
360° en Laravel: publicar en Studio (nombre = SKU, Activo) → @stack('scripts') en el head del layout Blade, @push widget.js en la vista de ficha con {{ $product->sku }} → data-key + data-sku (AUTO si hay sku JSON-LD; URL si los stacks de Livewire/Inertia no se vuelven a ejecutar). Carga diferida y modal. Probar una ficha en vivo, no el listado.
Las galerías de Laravel pasan fotos fijas. Quien compra sigue sin poder girar el artículo. Puede añadir una rotación 360° fotografiada sin un paquete Composer: alojar los fotogramas en Spinnify y pegar un script.
Esta guía es para Laravel con Blade. El mismo fragmento widget.js funciona en la ficha de producto como en otros sitios HTML. No instala un paquete Composer de Spinnify. No empaquete widget.js en Vite app.js.
3 pasos de las fotos a la ficha Laravel en vivo
El trabajo es el embed: un script en la vista de ficha y luego el enlace al SKU del catálogo.
1. Preparar en Spinnify Studio
Antes de editar las vistas Blade:
- Crear una cuenta en Spinnify Studio.
- Crear un producto y subir una serie de fotos (24–36 fotogramas, 4:3 para fotos de PC).
- Importante: el nombre del producto en Studio debe coincidir con el SKU de Laravel que muestra (importan espacios y guiones; no importan mayúsculas).
- Dejar el producto Activo. Un producto oculto no muestra el botón.
2. Añadir código en Laravel
Dos formas de pegar el mismo fragmento de Studio. Cópielo en Instalación del widget → Mostrar código.
Método A: Blade @stack (el más rápido para todo el catálogo). En resources/views/layouts/app.blade.php ponga @stack('scripts') dentro de <head>. widget.js usa defer, así que el head es el sitio correcto. En products/show.blade.php envuelva el fragmento con @push('scripts') … @endpush y data-sku="{{ $product->sku }}". No lo pegue en el listado (index.blade.php). No importe widget.js en Vite app.js; conserve la URL CDN del script.
Método B: AUTO o URL. Use data-sku="AUTO" si la Blade de la ficha ya imprime JSON-LD Product de Schema.org con sku. Si la página es Livewire o Inertia y los stacks no se vuelven a ejecutar tras la primera carga completa, use data-sku="URL" y configure la URL base del sitio en los ajustes del widget.
3. Configurar el enlace
El código se ve así: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="{{ $product->sku }}" defer></script>
- data-key: su clave de widget de Studio. No la cambie.
- data-sku: {{ $product->sku }}, o AUTO para leer sku del JSON-LD, o URL si los stacks de Livewire/Inertia no se vuelven a ejecutar (guarde la ruta de la página en Studio).
Por qué sigue siendo rápido
Un script de terceros en una vista Laravel plantea dudas de PageSpeed porque Blade ya pinta galería y CSS del layout. Spinnify deja el trabajo extra fuera del primer pintado: los fotogramas quedan en el CDN hasta que alguien pide girar. La galería Blade pinta primero; la capa 360 se abre después en un modal.
- Carga diferida: el navegador no pide el conjunto de fotogramas hasta que alguien hace clic.
- Aislamiento: el visor se abre en un modal y no sustituye la galería Laravel en el primer pintado.
- CDN: los fotogramas van en WebP/AVIF redimensionado, no como archivos extra en el storage de Laravel.
Lista: ¿no aparece el botón?
Si falta el botón 3D View, recorra esta lista en una URL de producto en vivo, no en la vista previa de Admin.
- ¿Está @stack('scripts') en el <head> del layout? Sin stack, @push no hace nada. Si las vistas están compiladas, ejecute php artisan view:clear.
- ¿Está en la vista de ficha? No cargue el script en index.blade.php.
- ¿Coinciden los nombres? El nombre en Studio y el SKU que muestra deben coincidir (espacios y guiones incluidos).
- ¿El producto de Studio está Activo?
- ¿Copió data-key de su cuenta?
- Un script por página: no pegue el fragmento dos veces.
- Livewire o Inertia: si los stacks no se vuelven a ejecutar tras la primera carga, pase data-sku a URL y configure la URL base del sitio en los ajustes del widget. No añada widget.js a Vite app.js.
¿Puedo personalizar el aspecto del botón?
Sí. El lanzador se diseña en Studio, no en el CSS del tema. Puede alinearlo con la tienda sin editar la plantilla del producto:
- Posición: derecha, izquierda o centro.
- Colores y etiqueta acordes al tema Laravel.
- Formato: icono flotante redondo o pestaña fina.
Después Laravel sigue sirviendo la galería. La capa 360° se abre cuando alguien la pide.
Grabar giros: cómo crear una vista 360. Tiendas HTML Magento: guía Magento 2. Tilda Zero Block.
