Produkt-Galerie Beispiel

So funktioniert es

Jedes Produkt bekommt sein eigenes data-stl-viewer div mit dem Pfad zur 3D-Datei. Das Script stl-viewer.js wird nur einmal am Ende der Seite eingebunden - es findet und aktiviert automatisch alle Viewer auf der Seite.

<!-- Produkt 1 -->
<div data-stl-viewer data-stl="modelle/ring-gold.stl" style="height:350px"></div>

<!-- Produkt 2 -->
<div data-stl-viewer data-stl="modelle/kette-silber.glb" style="height:350px"></div>

<!-- Produkt 3, 4, 5... beliebig viele -->
<div data-stl-viewer data-stl="modelle/armband.stl" style="height:350px"></div>

<!-- Script NUR EINMAL am Ende -->
<script src="js/stl-viewer.js"></script>

Neues Produkt hinzufuegen

Wenn du ein neues Produkt hinzufuegst, brauchst du nur:

1. Die 3D-Datei in deinen Modelle-Ordner hochladen
2. Ein neues <div data-stl-viewer data-stl="modelle/neues-produkt.stl"> einfuegen
3. Fertig - kein Code aendern, kein Script neu laden

Ordnerstruktur fuer viele Produkte

deine-website.de/
  js/stl-viewer.js           ← Viewer (einmal)
  modelle/
    ring-gold.stl            ← Produkt 1
    kette-silber.glb         ← Produkt 2
    armband.stl              ← Produkt 3
    puzzle.stl               ← Produkt 4
    figur-capybara.glb       ← Produkt 5
    ...                      ← beliebig viele
  produkte.html              ← Deine Shop-Seite

Jedes Produkt individuell gestalten

Du kannst fuer jedes Produkt andere Farben und Hintergruende waehlen:

<!-- Goldring: goldene Farbe, warmer Hintergrund -->
<div data-stl-viewer data-stl="modelle/ring.stl"
     data-color="#FFD700" data-background="warm"></div>

<!-- Silberkette: silberne Farbe, Studio-Licht -->
<div data-stl-viewer data-stl="modelle/kette.glb"
     data-color="#C0C0C0" data-background="studio"></div>

<!-- Puzzle: bunte Farbe, dunkler Hintergrund -->
<div data-stl-viewer data-stl="modelle/puzzle.stl"
     data-color="#e91e63" data-background="dark"></div>

WordPress / WooCommerce

Bei WordPress mit WooCommerce brauchst du nur bei jedem Produkt die STL-URL eintragen. Der Viewer erscheint automatisch auf der Produktseite.

<!-- Shortcode pro Produkt -->
[stl_viewer stl="modelle/ring-gold.stl" color="#FFD700" background="warm"]

<!-- Oder per Admin-Dashboard: -->
Produkt bearbeiten → 3D-Viewer → STL-URL eintragen → Speichern
Neues Produkt? Gleicher Ablauf - beliebig oft wiederholen.