Viewer: Produkt ansehen
Präsentation des 3D-Modells und seines Aussehens. Geeignet, wenn das Produkt vor allem aus verschiedenen Blickwinkeln gezeigt werden soll, ohne die Bearbeitung des Druckmotivs anzubieten.
E-Commerce-Integration - vom Design zur Bestellung
Ergänze deine Website um 3D-Präsentation, Variantenauswahl und Produktpersonalisierung. Kunden sehen sich das Produkt an, wählen Optionen und erstellen ihr Design in deinem Shop. Du verwaltest Angebot und Bestellungen in deinem eigenen System.
Wähle das Plugin für WordPress mit installiertem WooCommerce, um die Einrichtung ohne eigenen Integrationscode durchzuführen. Wenn du eine eigene Website oder einen Shop entwickelst, verbinde die eingebetteten Werkzeuge über die Public API und postMessage-Ereignisse mit Backend und Warenkorb.
Die Abbildungen zeigen die tatsächliche Oberfläche aus Aufzeichnungen und dem Plugin-Backend. Die Schaltflächenbezeichnungen sind auf Englisch; das Aussehen des Werkzeugs hängt von der Shopkonfiguration ab.
Dasselbe Produktprojekt lässt sich für Präsentation, Konfiguration oder Bearbeitung des Druckmotivs vorbereiten. Die Anbindung an den Shop richtet sich nach deiner Website und dem Umfang der Entwicklungsarbeit.
Das Plugin bietet eine fertige Anbindung an WordPress und WooCommerce. Mit der API kannst du eine eigene Verbindung zu einer anderen Plattform, einer Headless-Anwendung oder einem vorhandenen Bestellsystem entwickeln.
| Bereich | WordPress + WooCommerce | Eigenes System über die API |
|---|---|---|
| Einrichtung | Plugin-Installation und Verbindungsassistent im WordPress-Backend. | Implementierung der Backend-Anbindung und der Einbettung auf der Website. |
| Produkte und Varianten | Zuordnung eines Projekts zu einem WooCommerce-Produkt und Synchronisierung der Varianten. | Verknüpfung von Produkt- und Options-IDs mit den Daten deines eigenen Shops. |
| Warenkorb und Bestellungen | Fertige Unterstützung für Konfiguration, Kundendesign und Vorschaubilder in WooCommerce. | Verarbeitung der Ereignisse des eingebetteten Werkzeugs und Synchronisierung der Bestellungen im eigenen System. |
| Dateien und Assets | Lokale Bibliothek, Projekte und Bestelldateien auf dem WordPress-Server. | Speicherung und Datenzugriff gemäß dem gewählten Integrationsmodus. Bei eigenem Storage musst du dessen Anbindung selbst bereitstellen. |
Wähle das Werkzeug danach, was Kunden auf der Website tun sollen. Projekt und Personalisierungsregeln bereitest du zuvor im Designer vor.
Präsentation des 3D-Modells und seines Aussehens. Geeignet, wenn das Produkt vor allem aus verschiedenen Blickwinkeln gezeigt werden soll, ohne die Bearbeitung des Druckmotivs anzubieten.
Auswahl vorbereiteter Produktoptionen, etwa Größe, Farbe oder Material. Kunden sehen die Änderung am Modell und übertragen die Konfiguration in den Warenkorb.
Personalisierung mit den freigegebenen Werkzeugen, Grafiken, Texten und Vorlagen. Das gespeicherte Kundendesign wird mit einem Warenkorb- oder Bestellposten verknüpft.
Arbeitsbereich des Shopbetreibers. Hier bereitest du Komposition, Varianten, Druckbereiche und Werkzeugeinstellungen für Kunden vor. Der Zugriff auf die administrative Bearbeitung ist von der Shopnutzung getrennt.
Alter Product ist ein WordPress-Plugin. Für die Shopintegration muss WooCommerce installiert und aktiviert sein. Die übliche Einrichtung erfolgt im Backend, ohne dass du eine eigene API- und Warenkorbanbindung entwickelst.
Um Alter Product auf deiner eigenen Website einzubetten, benötigst du ein aktives Business-Abonnement oder einen höheren Tarif mit dieser Funktion. Das gilt sowohl für das WordPress- und WooCommerce-Plugin als auch für eine eigene API-Integration. Personal FREE und Personal enthalten keine Einbettung in deinen Shop.
Für das Plugin benötigst du WordPress mit installiertem und aktiviertem WooCommerce sowie ein Alter-Product-Konto. Die Speicherung auf eigenem Hosting ersetzt das erforderliche Abonnement nicht: Alter Product stellt weiterhin die Anwendung bereit und autorisiert ihren Start.
Alter Product läuft in einem eingebetteten iframe auf der Shopseite. Browser schränken den Zugriff auf einige Funktionen der Anwendung ein, wenn die Seite keinen sicheren Kontext bietet. HTTPS verschlüsselt die Verbindung; ein gültiges Zertifikat ermöglicht dem Browser die Überprüfung der Domain.
Der Browser prüft auch die Seite, die den iframe umgibt. Deshalb reicht die HTTPS-Adresse der Alter-Product-Anwendung allein nicht aus, wenn der Shop über HTTP läuft. Auch deine Website, auf der das Werkzeug eingebettet ist, muss HTTPS verwenden. Das folgt aus den Sicherheitsregeln der Browser für eingebettete Anwendungen.
Die automatische Verbindung führt durch die Autorisierung des Alter-Product-Kontos und die Shopeinrichtung. Bei diesem Weg musst du keine API-Schlüssel manuell übertragen.

Öffne beim Bearbeiten des WooCommerce-Produkts den Reiter Alter Product. Erstelle ein neues Projekt oder wähle ein vorhandenes und öffne anschließend den Designer. Stelle Druckmotiv, verfügbare Optionen und Druckbereiche für dieses Produkt ein.

Modelle, Projekte, Grafiken und Bestelldateien speicherst du auf dem Hosting, auf dem WordPress läuft. Lokal hinzugefügte Assets dienen deinem Shop und werden dadurch nicht zu Einträgen der öffentlichen Alter-Product-Bibliothek für andere Shops.
Das Plugin speichert Modell-, Bibliotheks-, Projekt-, Mockup- und Bestelldateien im WordPress-Speicherbereich. Daten der Generatorprojekte und ihrer Revisionen werden ebenfalls in der Datenbank dieser Installation gespeichert.
Du kannst eigene Materialien hinzufügen und ausgewählte Assets aus Alter Product importieren. Nach dem Download verwendest du eine lokale Kopie. Import, Aktualisierungsprüfung und Download neuer Versionen sind getrennte Vorgänge.
| Bereich im Backend | Was du dort machst |
|---|---|
| Assets | Du verwaltest unter anderem Modelle, Grafiken, Vorlagen, Hintergründe, Logos, Texturen und Umgebungen. Welche Möglichkeiten zum Hinzufügen verfügbar sind, hängt vom Assettyp ab. |
| Modellgenerator | Du erstellst lokale Projekte auf Grundlage von Vorlagen und arbeitest mit Modellen, die mit dem Generator verknüpft sind. |
| Produktprojekte / Designer | Du erstellst oder importierst ein Design, bearbeitest es und ordnest es einem Shopprodukt zu. |
| WooCommerce-Bestellungen | Du verwendest gespeicherte Kundendesigns, Vorschauen und Dateien zur Abwicklung der Bestellung. |

Die Assets speicherst du selbst; die Werkzeugoberfläche wird von Alter Product in einem eingebetteten iframe geladen. Der Alter-Product-Dienst prüft Kontozugriff, Tarif und Sitzungen und stellt den Importkatalog bereit. Die Integration benötigt eine Verbindung zu diesem Dienst.
Bewahre bei Backups die Datenbank, das Dateiverzeichnis sowie die WordPress-Schlüssel und -Salts auf, die zum Lesen verschlüsselter Plugin-Daten nötig sind. So kannst du neben den sichtbaren Grafiken auch die für die weitere Arbeit erforderlichen Daten wiederherstellen.
Die Einbettung kann Teil einer Produktseite oder einer separaten WordPress-Seite sein. Kunden bleiben im Kaufprozess deines Shops; WooCommerce übernimmt Warenkorb und Bestellung.
Passe die Anzeige an das Shoplayout an: Werkzeug auf der Produktseite, Schaltfläche zu einer eigenen Seite oder Einbettung über verfügbare Blöcke und Shortcodes. Viewer, Configurator und Customizer erfüllen unterschiedliche Aufgaben, deshalb musst du Kunden nicht alle gleichzeitig anbieten.

Passe die Produktpräsentation an deine Marke an. Im Plugin verwaltest du lokale Hintergründe und Logos sowie das Aussehen der eingebetteten Werkzeuge. Die Verfügbarkeit einzelner Optionen hängt vom Tarif ab.
Kunden wählen eine Variante und erstellen ihre Personalisierung. Das Plugin verknüpft Konfiguration und gespeichertes Design mit dem Warenkorbposten und später mit der WooCommerce-Bestellung. Verfügbare Mockups helfen, das bestellte Druckmotiv zu erkennen.
Die Verbindung des Shops mit den 3D-Werkzeugen ist der Anfang des Prozesses. Aus dem vorbereiteten Design kannst du Dateien für die eigene Produktion herunterladen oder die im Plugin verfügbare Integration mit einem Print-on-Demand-Anbieter nutzen.
Richte in den Plugin-Einstellungen die Verbindung zum gewählten Anbieter ein. Verknüpfe anschließend Produkt, Varianten und Druckpositionen mit dem Angebot des Anbieters, bereite Dateien vor und beauftrage die Ausführung der Bestellung aus WooCommerce.
Du kannst eine eigene Verbindung zu einem KI-Anbieter einrichten und beim Gestalten die verfügbaren Funktionen zur Grafikerstellung oder -verbesserung nutzen. Anfragen des Plugins werden von WordPress an den gewählten Anbieter gesendet und über dein dortiges Konto abgerechnet.
Eine Sitzung ist eine zeitlich begrenzte Berechtigung, ein bestimmtes Werkzeug in deinem Shop zu öffnen. Sie ermöglicht die sichere Bereitstellung von Produkten für Kunden und ist die Einheit, die im monatlichen Limit für Einbettungssitzungen gezählt wird. Sie ist nicht mit einem einzelnen Klick, einem eindeutigen Besucher oder einer Bestellung gleichzusetzen.
Beim Start eines eingebetteten Werkzeugs erhält die Integration einen kurzlebigen Token, also einen Sitzungsschlüssel. Dauerhafte Kontozugangsdaten verbleiben auf dem Server. Kunden müssen keine Schlüssel kopieren und sich nicht beim Alter-Product-Konto des Betreibers anmelden.
Die Standardgültigkeit eines Tokens beträgt in der aktuellen Implementierung 15 Minuten. Der Server kann eine andere Dauer festlegen; deshalb verwendet die Integration das Ablaufdatum der erhaltenen Sitzung. Eine erneute Nutzung des Tokens verlängert diese Frist nicht. Für eine weitere Autorisierung nach Ablauf wird eine neue Sitzung benötigt.
Das hängt vom Werkzeug und davon ab, ob es noch eine passende gültige Sitzung besitzt. Das Plugin verwendet keine gemeinsame Sitzung für alle Besucher und Produkte. Die folgenden Regeln beschreiben sein aktuelles Verhalten.
| Situation | Was geschieht mit der Sitzung? | Auswirkung auf das Limit |
|---|---|---|
| Erstes Öffnen des Werkzeugs ohne passende Sitzung | Die Integration fordert einen neuen Token für das Werkzeug und den Produktkontext an. | Die erfolgreiche Ausstellung eines neuen Tokens verbraucht eine Sitzung. |
| Modell drehen, Farbe ändern oder Text im geöffneten Werkzeug bearbeiten | Die Arbeit erfolgt innerhalb der gestarteten Sitzung. | Diese Aktionen führen für sich genommen nicht zur Ausstellung weiterer Tokens. |
| Vollständiges Neuladen einer Seite mit Viewer oder Configurator | Das Plugin erhält nach dem Neuladen der Seite in der Regel einen neuen Token. Der Sitzungsspeicher dieser Werkzeuge bleibt bei vollständigem Neuladen nicht erhalten. | Jede weitere erfolgreiche Tokenausstellung verbraucht eine weitere Sitzung. |
| Customizer im selben Tab neu laden | Der Customizer kann eine gespeicherte Sitzung wiederverwenden, wenn sie zu Shop, Produkt, Bestellung und Arbeitsmodus passt und nicht kurz vor dem Ablauf steht. | Wiederverwendung erhöht den Zähler nicht. Sind die Bedingungen nicht erfüllt, wird eine neue Sitzung benötigt. |
| Tokenablauf, anderes Produkt oder veränderter Arbeitskontext | Eine neue Autorisierung und ein neuer Token können erforderlich sein. Auch die Verfügbarkeit des Browserspeichers beeinflusst die Wiederverwendung. | Ein neu ausgestellter Token erhöht den Limitverbrauch. |
Der Zähler steigt, wenn die API erfolgreich einen neuen Token ausstellt. Die Nutzung eines bereits ausgestellten gültigen Tokens ist keine weitere Ausstellung. Berücksichtige bei der Tarifwahl deshalb Werkzeugstarts, Neuladungen und erneutes Öffnen, nicht nur Bestellungen oder Besucher.
Eingebettete Werkzeuge desselben Shops teilen sich ein monatliches Sitzungslimit. Der Zähler wird für jeden Shop separat nach Kalendermonaten in UTC geführt. Neue Sitzungen des eingebetteten Designers und Modellgenerators im WordPress-Backend erhöhen diesen Zähler ebenfalls. Das bloße Herunterladen eines verfügbaren Modells über die Import-API öffnet keine Editorsitzung.
Nach Erreichen des Limits verweigert das System die Ausstellung weiterer Sitzungen. Dies ist ein Nutzungslimit innerhalb des Abonnements; den aktuellen Umfang findest du in deinem Tarif.
Du betreibst einen eigenen Shop, eine Headless-Anwendung oder ein eigenes Bestellsystem? Du kannst eine eigene Integrationsschicht mit der Alter Product Public API entwickeln und die benötigten Werkzeuge auf deiner Website einbetten. Dieser Weg erfordert Entwicklungsarbeit.
Die Public API verwendet HTTP-Anfragen und JSON-Daten. Du kannst deine Integration daher in der Sprache und Umgebung deines Backends entwickeln. Du musst den Shop nicht auf WordPress umstellen, um Alter-Product-Werkzeuge einzubetten.
Im Folgenden findest du Beispieltechnologien für eine serverseitige Anbindung. In jeder setzt du dieselben Schritte um: API-Autorisierung, Erstellung einer Werkzeugsitzung und Verknüpfung von Produkten, Warenkorb und Bestellungen mit deinem System.
Ergänze dein Node.js-Backend um die Integration, etwa mit Express oder NestJS. Rufe die API vom Server aus auf und stelle dem Frontend die zur Einbettung benötigten Daten bereit.
Verbinde eine vorhandene Python-Anwendung, etwa Django oder FastAPI, über HTTP-Anfragen mit Alter-Product-Produkten, -Sitzungen und -Bestellungen.
Nutze PHP in deinem eigenen Shop oder deiner Anwendung, etwa mit Laravel oder Symfony. Du kannst unabhängig vom fertigen WordPress-Plugin eine eigene API-Integration entwickeln.
Integriere die Werkzeuge in ein Java-Backend, etwa Spring, und verknüpfe Projektdaten mit deinem Produktkatalog und deiner Bestellabwicklung.
Nutze ein .NET-Backend, etwa ASP.NET Core, zur Autorisierung, Sitzungserstellung und Datenübergabe an vorhandene Shopprozesse.
Entwickle die Anbindung in einem Go-Dienst. Der Standard-HTTP-Client ermöglicht die Verarbeitung von API-Anfragen und JSON-Antworten.
Ergänze eine Ruby-Anwendung, etwa Ruby on Rails, um die Integration und verwende dein eigenes Modell für Produkte, Warenkorb und Bestellabwicklung.
Verbinde dein Rust-Backend über einen HTTP-Client und JSON-Verarbeitung. Sitzungen und Kaufereignisse kannst du in deine Dienstarchitektur einbinden.
Im Browser kannst du React, Vue, Angular oder einfaches HTML und JavaScript verwenden. TypeScript eignet sich ebenfalls für die Kommunikation. Die Website bettet einen iframe ein, verarbeitet postMessage-Ereignisse und kommuniziert mit deinem Backend.
Das Frontend ist für Seitengestaltung und Warenkorbverhalten zuständig, das Backend für authentifizierte Public-API-Aufrufe. Bei Frameworks, die beide Ebenen verbinden, etwa Next.js, müssen dauerhafte Schlüssel und Sitzungserstellung ausschließlich im serverseitigen Teil verarbeitet werden.
Du kannst deinen eigenen Checkout, Zahlungsdienst, dein CMS und deinen Bestellprozess beibehalten. Bei der Umsetzung verbindest du diese Elemente mit den Projektdaten und Ereignissen des gewählten Alter-Product-Werkzeugs.
Alter Product stellt 3D-Werkzeuge, Projektdaten und Sitzungsmechanismen bereit. Dein Backend verbindet diese mit Produkten, Kundenkonten, Warenkorb und Bestellabwicklung. Du kannst eigene vermittelnde Endpunkte für dein Frontend erstellen, ohne Alter-Product-Zugangsdaten im Browser offenzulegen.
| Ebene | Aufgabe |
|---|---|
| Frontend deiner Website | Zeigt den iframe an, reagiert auf die Werkzeugkommunikation und aktualisiert die Shopoberfläche. |
| Dein Backend | Authentifiziert Public-API-Anfragen, erstellt Sitzungen, kontrolliert den Kundenzugriff und speichert Verknüpfungen mit deinem Warenkorb oder deinen Bestellungen. |
| Alter Product Public API | Bietet Funktionen für Verbindung, Produkte, Werkzeugzuordnungen, Bestellungen sowie Datei- und Assetzugriff. |
| Eingebettetes Werkzeug | Zeigt das Modell an und ermöglicht Konfiguration oder Personalisierung gemäß dem gewählten Modus und vorbereiteten Projekt. |

Richte zuerst Verbindung und Einbettungssitzung für ein Produkt ein. Ergänze anschließend die Verarbeitung von Konfiguration, Designspeicherung und Bestellungen passend zum gewählten Werkzeug.
Die Einbettungsanleitungen enthalten Parameter und Beispiele. Die postMessage-Kapitel erklären die Kommunikation mit der Website; die API-Dokumentation beschreibt die vom Backend ausgeführten Operationen.
Teste das Produkt aus Kundensicht: vom Öffnen der Seite bis zum Design, das bei der Bestellung erscheint. Teste auf Computer und Smartphone, auch ohne Anmeldung im Administrationsbereich.
Durchlaufe nach der Vorbereitung eines Produkts den gesamten Prozess. Übertrage erst danach die geprüfte Einrichtung auf weitere Katalogartikel.