360°-Produktansicht (df360spin) — Dokumentation
Das 360°-Produktansicht-Modul df360spin installieren, konfigurieren und befüllen: Vorbereitung der Spin-Bilder, globale Einstellungen, Erstellen einer Sequenz und Best Practices für die Aufnahme.
Überblick
360°-Produktansicht (df360spin) ergänzt Ihre Produktseiten um einen interaktiven Viewer, der aus einer einfachen Bildsequenz eine vollständige Drehung des Artikels rekonstruiert. Besucher ziehen das Produkt mit Maus oder Finger, um es zu drehen, mit automatischer Wiedergabe, Vollbild, Bildzähler und Tastaturnavigation. Das Modul überschreibt kein Template: Es fügt sich über einen Anzeige-Hook ein, den Sie wählen.
Eine 360°-Ansicht ist kein 3D-Modell: Sie ist eine Reihe von Fotos, die rund um das Produkt aufgenommen werden. Die Qualität des Ergebnisses hängt zuerst von der Gleichmäßigkeit Ihrer Aufnahme ab.
Die Bilder vorbereiten
Fotografieren Sie das Produkt auf einem Drehteller mit einer gleichmäßigen Anzahl gleich beabstandeter Ansichten, im selben Bildausschnitt und bei gleicher Beleuchtung. Drehen Sie den Teller zwischen jeder Aufnahme um einen konstanten Winkel (zum Beispiel 10° für 36 Bilder, also 360° ÷ 36).
Empfohlene Bildanzahl
- 24 Bilder (15° pro Schritt): ordentliche Drehung, leichte Sequenz.
- 36 Bilder (10° pro Schritt): gutes Gleichgewicht aus Flüssigkeit und Gewicht, in den meisten Fällen empfohlen.
- 72 Bilder (5° pro Schritt): sehr flüssige Drehung für hochwertige Produkte, schwerere Sequenz.
Das Modul akzeptiert bis zu 120 Frames pro Sequenz. Unter 24 Bildern wirkt die Drehung ruckartig.
Benennung und Format
Benennen Sie die Dateien in Drehreihenfolge, mit führenden Nullen, um die korrekte Sortierung zu gewährleisten: frame_01.jpg, frame_02.jpg, … Das Modul sortiert die Bilder beim Upload automatisch nach Dateiname. Exportieren Sie als JPG, PNG oder WebP in einheitlicher Größe. Bilder, die breiter als die konfigurierte maximale Breite sind, werden serverseitig automatisch verkleinert.
Ein neutraler, gleichmäßiger Hintergrund (weiß oder hellgrau) und eine feste Beleuchtung ergeben die sauberste Drehung. Sperren Sie Belichtung und Weißabgleich der Kamera, um Helligkeitsschwankungen von Bild zu Bild zu vermeiden.
Installation
- Öffnen Sie im Back-Office Module > Modul-Manager, klicken Sie auf Ein Modul hochladen und wählen Sie die ZIP-Datei
df360spin. - Klicken Sie nach der Installation auf Konfigurieren, um die globalen Optionen einzustellen.
- Unter Katalog erscheint ein neuer Tab 360°-Spin-Ansichten zur Verwaltung Ihrer Sequenzen.
Globale Einstellungen
Auf der Konfigurationsseite des Moduls legen Sie das Standardverhalten aller Viewer fest:
- Anzeigeposition: unter den Produkt-Miniaturen (empfohlen), im Block für Zusatzinformationen oder im Fußbereich der Produktseite.
- Automatische Wiedergabe standardmäßig: startet die kontinuierliche Drehung beim Laden. Kann Sequenz für Sequenz überschrieben werden.
- Wiedergabegeschwindigkeit (ms pro Bild): wie lange jedes Bild bei der automatischen Wiedergabe angezeigt wird. Je niedriger der Wert, desto schneller die Drehung. Als Richtwert ergeben 60 ms bei 36 Bildern eine volle Umdrehung in etwa 2 Sekunden.
- Zieh-Empfindlichkeit: Anzahl der Zieh-Pixel, um ein Bild weiterzuschalten. Ein niedriger Wert macht die Drehung reaktionsfreudiger.
- Maximale Frame-Breite (px): über diese Breite hinaus werden hochgeladene Bilder automatisch verkleinert.
- Lazy Loading: lädt Bilder erst, wenn der Viewer in den sichtbaren Bereich des Bildschirms gelangt.
Eine 360°-Sequenz erstellen
- Öffnen Sie Katalog > 360°-Spin-Ansichten und klicken Sie dann auf Eine 360°-Sequenz hinzufügen.
- Geben Sie im Feld Produkt den Namen, die Referenz oder die ID des Produkts ein: Eine Vorschlagsliste erscheint, wählen Sie das richtige Produkt.
- Lassen Sie die Sequenz aktiv und wählen Sie den Autoplay-Modus (globale Einstellung verwenden, aktiviert oder deaktiviert).
- Speichern: Das Panel zur Frame-Verwaltung erscheint.
Ein Produkt kann pro Shop nur eine Sequenz haben. Im Multishop verwaltet jeder Shop seine eigene Sequenz für dasselbe Produkt.
Frames hochladen und ordnen
- Ziehen Sie Ihre Bilder per Drag-and-drop in die Ablagezone oder klicken Sie, um sie auszuwählen. Sie können mehrere auf einmal senden.
- Die Bilder werden in Stapeln mit einem Fortschrittsbalken hochgeladen und dann nach Dateiname sortiert.
- Ordnen Sie sie durch Ziehen der Miniaturen neu; die neue Reihenfolge wird automatisch gespeichert.
- Fahren Sie über eine Miniatur und klicken Sie auf das rote Kreuz, um ein Bild zu löschen.
- Klicken Sie auf Drehung in der Vorschau, um die Sequenz vor der Veröffentlichung direkt im Back-Office abzuspielen.
Erlebnis im Frontend
Auf der Produktseite ziehen Besucher das Produkt, um es in beide Richtungen zu drehen, mit Maus oder Finger, mit einer Trägheit am Ende der Bewegung. Die Steuerleiste bietet eine Wiedergabe-/Pause-Schaltfläche, einen Bildzähler und eine Vollbild-Schaltfläche. Über die Tastatur bewegen die Pfeiltasten links und rechts Bild für Bild weiter, und die Leertaste startet oder pausiert die Drehung. Die Systemeinstellung für reduzierte Bewegung wird berücksichtigt: Die automatische Wiedergabe startet nicht, wenn der Nutzer Bewegung in seinem System deaktiviert hat.
Fehlerbehebung
Der Viewer erscheint nicht
Prüfen Sie, ob die Sequenz aktiv ist, mindestens zwei Bilder enthält und ob die in den Einstellungen gewählte Anzeigeposition einem in Ihrem Theme vorhandenen Hook entspricht. Das Modul zielt auf Classic-basierte Themes ab.
Die Drehung ruckelt
Erhöhen Sie die Anzahl der Bilder in der Sequenz (streben Sie 36 oder mehr an) und prüfen Sie die Gleichmäßigkeit des Winkels zwischen den Aufnahmen.
Die Bilder laden langsam
Lassen Sie Lazy Loading aktiviert, verringern Sie die maximale Frame-Breite in den Einstellungen und bevorzugen Sie beim Export das WebP-Format.
Kompatibilität
- PrestaShop 8.0 bis 9.x, Classic-Theme und Child-Themes.
- Multishop: eine Sequenz pro Produkt und pro Shop.
- Touchscreen und Maus, Browser-Vollbild.
- Vanilla JS ohne jQuery, kein Template-Override.