Schnelle Antwort
360° in Laravel: in Studio veröffentlichen (Name = SKU, Aktiv) → @stack('scripts') im Blade-Layout-Head, widget.js per @push auf der Produktdetail-View mit {{ $product->sku }} → data-key + data-sku (AUTO bei JSON-LD-sku; URL wenn Livewire/Inertia-Stacks nicht erneut laufen). Lazy Load und Modal. Live-Produktseite testen, nicht die Listing-Seite.
Laravel-Galerien blättern Standfotos. Kundinnen und Kunden können den Artikel trotzdem nicht drehen. Sie können eine fotografierte 360°-Drehung ohne Composer-Paket einbauen: Frames in Spinnify hosten und ein Skript einfügen.
Diese Anleitung gilt für Laravel mit Blade. Dasselbe widget.js-Snippet funktioniert auf der Produktdetailseite wie auf anderen HTML-Sites. Sie installieren kein Composer-Paket von Spinnify. widget.js nicht in Vite app.js bündeln.
3 Schritte von den Fotos zur live Laravel-Seite
Die Arbeit steckt im Embed: ein Skript auf der Produktdetail-View, dann die Zuordnung zur Katalog-SKU.
1. In Spinnify Studio vorbereiten
Bevor Sie Blade-Views bearbeiten:
- Bei Spinnify Studio anmelden.
- Produkt anlegen und eine Fotoserie hochladen (24–36 Frames, 4:3 für PC-Fotos).
- Wichtig: der Produktname in Studio muss der Laravel-SKU entsprechen, die Sie ausgeben (Leerzeichen und Bindestriche zählen, Groß/Klein nicht).
- Produkt auf Aktiv lassen. Ein verstecktes Produkt zeigt den Button nicht.
2. Code in Laravel einfügen
Zwei Wege für dasselbe Studio-Snippet. Kopieren unter Widget-Installation → Code anzeigen.
Methode A: Blade @stack (am schnellsten für den ganzen Katalog). In resources/views/layouts/app.blade.php @stack('scripts') in <head> setzen. widget.js nutzt defer, deshalb gehört es in den Head. In products/show.blade.php das Snippet mit @push('scripts') … @endpush und data-sku="{{ $product->sku }}" einfügen. Nicht auf die Listing-Seite (index.blade.php) setzen. widget.js nicht in Vite app.js importieren; die CDN-Skript-URL behalten.
Methode B: AUTO oder URL. data-sku="AUTO" nutzen, wenn die Produkt-Blade bereits Schema.org-Product-JSON-LD mit sku ausgibt. Ist die Seite Livewire oder Inertia und laufen Stacks nach dem ersten vollen Load nicht erneut, data-sku="URL" nutzen und die Site-Basis-URL in den Widget-Einstellungen setzen.
3. Die Bindung einstellen
Der Code sieht so aus: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="{{ $product->sku }}" defer></script>
- data-key: Ihr Studio-Widget-Schlüssel. Nicht ändern.
- data-sku: {{ $product->sku }}, oder AUTO zum Lesen von sku aus JSON-LD, oder URL wenn Livewire/Inertia-Stacks nicht erneut laufen (Seitenpfad in Studio speichern).
Warum es schnell bleibt
Ein Fremdskript in einer Laravel-Produktsicht weckt PageSpeed-Fragen, weil Blade Galerie und Layout-CSS schon malt. Spinnify hält die Extra-Arbeit vom ersten Paint fern: Frames bleiben auf dem CDN, bis jemand drehen will. Die Blade-Galerie rendert zuerst; die 360-Schicht öffnet sich danach im Modal.
- Lazy Loading: der Browser lädt die Frames erst nach dem Klick.
- Isolation: der Viewer öffnet sich im Modal und ersetzt die Laravel-Galerie beim ersten Paint nicht.
- CDN: Frames kommen als WebP/AVIF, nicht als Extra-Dateien in Laravel Storage.
Checkliste: Button erscheint nicht?
Wenn der 3D-View-Button fehlt, gehen Sie die Liste auf einer Live-Produkt-URL durch, nicht in der Admin-Vorschau.
- Steht @stack('scripts') im Layout-<head>? Ohne Stack tut @push nichts. Bei kompilierten Views: php artisan view:clear.
- Sind Sie auf der Produktdetail-View? Das Skript nicht auf index.blade.php laden.
- Namen gleich? Studio-Produktname und die ausgegebene SKU müssen übereinstimmen (inkl. Leerzeichen und Bindestriche).
- Ist das Studio-Produkt Aktiv?
- Ist data-key aus Ihrem Konto kopiert?
- Ein Skript pro Seite: das Snippet nicht zweimal einfügen.
- Livewire oder Inertia: wenn Stacks nach dem ersten Load nicht erneut laufen, data-sku auf URL stellen und Site-Basis-URL in den Widget-Einstellungen setzen. widget.js nicht in Vite app.js aufnehmen.
Kann ich das Aussehen des Buttons anpassen?
Ja. Den Starter gestalten Sie in Studio, nicht in der Theme-CSS. So passen Sie ihn an, ohne die Produktvorlage zu ändern:
- Position: rechts, links oder mittig.
- Farben und Beschriftung passend zum Laravel-Theme.
- Format: rundes Schwebesymbol oder schmale Lasche.
Danach liefert Laravel weiter die Galerie. Die 360°-Ebene öffnet sich, wenn jemand danach fragt.
Spins aufnehmen: 360-Ansicht erstellen. Magento-HTML-Shops: Magento-2-Anleitung. Tilda Zero Block.
