Réponse rapide
360° sur Laravel : publier dans Studio (nom = SKU, Actif) → @stack('scripts') dans le head du layout Blade, @push widget.js sur la vue fiche avec {{ $product->sku }} → data-key + data-sku (AUTO si sku JSON-LD ; URL si les stacks Livewire/Inertia ne se relancent pas). Chargement différé et modal. Tester une fiche en ligne, pas la liste.
Les galeries Laravel font défiler des photos fixes. L'acheteur ne peut toujours pas tourner l'article. Vous pouvez ajouter une rotation 360° photographiée sans paquet Composer : héberger les vues dans Spinnify et coller un script.
Ce guide concerne Laravel avec Blade. Le même extrait widget.js fonctionne sur la fiche produit comme sur les autres sites HTML. Vous n'installez pas de paquet Composer fourni par Spinnify. Ne mettez pas widget.js dans Vite app.js.
3 étapes des photos à la fiche Laravel en ligne
Le travail, c'est l'intégration : un script sur la vue fiche produit, puis une correspondance avec le SKU du catalogue.
1. Préparer dans Spinnify Studio
Avant de modifier les vues Blade :
- Créer un compte Spinnify Studio.
- Créer un produit et envoyer une série de photos (24–36 vues, 4:3 pour les photos PC).
- Important : le nom du produit dans Studio doit égaler le SKU Laravel que vous affichez (espaces et tirets comptent, la casse non).
- Laisser le produit Actif. Un produit masqué n'affiche pas le bouton.
2. Ajouter le code sur Laravel
Deux façons de coller le même extrait Studio. Copiez-le depuis Installation du widget → Afficher le code.
Méthode A : Blade @stack (le plus rapide pour tout le catalogue). Dans resources/views/layouts/app.blade.php placez @stack('scripts') dans <head>. widget.js utilise defer, donc le head est le bon endroit. Dans products/show.blade.php entourez l'extrait de @push('scripts') … @endpush avec data-sku="{{ $product->sku }}". Ne le collez pas sur la liste (index.blade.php). N'importez pas widget.js dans Vite app.js ; gardez l'URL CDN du script.
Méthode B : AUTO ou URL. Utiliser data-sku="AUTO" si la Blade de la fiche imprime déjà du JSON-LD Product Schema.org avec sku. Si la page est Livewire ou Inertia et que les stacks ne se relancent pas après le premier chargement complet, utiliser data-sku="URL" et régler l'URL de base du site dans les réglages du widget.
3. Configurer la liaison
Le code ressemble à : <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="{{ $product->sku }}" defer></script>
- data-key : votre clé widget Studio. Ne la changez pas.
- data-sku : {{ $product->sku }}, ou AUTO pour lire sku dans le JSON-LD, ou URL si les stacks Livewire/Inertia ne se relancent pas (enregistrer le chemin de page dans Studio).
Pourquoi ça reste rapide
Un script tiers sur une vue Laravel soulève des questions de PageSpeed, car Blade peint déjà galerie et CSS du layout. Spinnify garde le travail lourd hors du premier affichage : les vues restent sur le CDN jusqu’au clic. La galerie Blade s’affiche d’abord ; la couche 360 s’ouvre ensuite en modal.
- Chargement différé : le navigateur n'envoie pas la série de vues tant que l'acheteur n'a pas cliqué.
- Isolation : la visionneuse s'ouvre en modal et ne remplace pas la galerie Laravel au premier affichage.
- CDN : les vues sont en WebP/AVIF redimensionné, pas de fichiers en plus dans le storage Laravel.
Liste : le bouton n'apparaît pas ?
Si le bouton 3D View manque, parcourez cette liste sur une URL produit en ligne, pas dans l'aperçu Admin.
- @stack('scripts') est-il dans le <head> du layout ? Sans stack, @push ne fait rien. Si les vues sont compilées, lancez php artisan view:clear.
- Êtes-vous sur la vue fiche ? Ne chargez pas le script sur index.blade.php.
- Noms identiques ? Le nom Studio et le SKU affiché doivent correspondre (espaces et tirets inclus).
- Le produit Studio est-il Actif ?
- data-key copié depuis votre compte ?
- Un script par page : ne collez pas l'extrait deux fois.
- Livewire ou Inertia : si les stacks ne se relancent pas après le premier chargement, passez data-sku en URL et réglez l'URL de base du site dans les réglages du widget. N'ajoutez pas widget.js à Vite app.js.
Puis-je personnaliser l'apparence du bouton ?
Oui. Le bouton se stylise dans Studio, pas dans le CSS du thème. Vous pouvez l’aligner sur la vitrine sans modifier le modèle produit :
- Position : droite, gauche ou centre.
- Couleurs et libellé alignés sur le thème Laravel.
- Format : icône flottante ronde ou onglet fin.
Ensuite Laravel sert toujours la galerie. La couche 360° s'ouvre quand quelqu'un la demande.
Tourner les vues : créer une vue 360. Boutiques HTML Magento : guide Magento 2. Tilda Zero Block.
