Mehr erfahren

E-Commerce-Integration - vom Design zur Bestellung

Bette Alter Product auf deiner Website ein: WordPress + WooCommerce oder API

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.

Suchst du eine genaue Installationsanleitung für das Plugin?Öffne die Dokumentation für WordPress + WooCommerce: Voraussetzungen, Permalinks, Auto Connect und Fehlerbehebung.

Zwei Wege zum eigenen Shop mit Personalisierung

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.

Plugin oder eigene Integration?

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.

Welche Teile der Integration bereitstehen und welche du selbst entwickelst
BereichWordPress + WooCommerceEigenes System über die API
EinrichtungPlugin-Installation und Verbindungsassistent im WordPress-Backend.Implementierung der Backend-Anbindung und der Einbettung auf der Website.
Produkte und VariantenZuordnung 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 BestellungenFertige 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 AssetsLokale 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.

Welches Werkzeug sollen Kunden verwenden?

Wähle das Werkzeug danach, was Kunden auf der Website tun sollen. Projekt und Personalisierungsregeln bereitest du zuvor im Designer vor.

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.

Configurator: Variante auswählen

Auswahl vorbereiteter Produktoptionen, etwa Größe, Farbe oder Material. Kunden sehen die Änderung am Modell und übertragen die Konfiguration in den Warenkorb.

Customizer: eigenes Druckmotiv erstellen

Personalisierung mit den freigegebenen Werkzeugen, Grafiken, Texten und Vorlagen. Das gespeicherte Kundendesign wird mit einem Warenkorb- oder Bestellposten verknüpft.

Designer: Angebot vorbereiten

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.

WordPress + WooCommerce: von der Installation zum fertigen Produkt

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.

Voraussetzungen: WordPress, WooCommerce, HTTPS und Business-Tarif

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.

  • Betreibe den Shop über HTTPS mit einem gültigen SSL/TLS-Zertifikat für seine Domain. Dies ist für den korrekten Betrieb der eingebetteten Werkzeuge auf einer öffentlichen Website erforderlich.
  • Aktiviere benutzerfreundliche WordPress-Permalinks gemäß der Installationsanleitung.
  • Stelle auf deinem Hosting Platz für Modelle, Grafiken, Projekte und Bestelldateien bereit. Die Shopbibliothek nutzt die Ressourcen deines Servers.

Warum sind HTTPS und ein SSL/TLS-Zertifikat erforderlich?

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.

  1. Aktiviere bei deinem Hostinganbieter ein SSL/TLS-Zertifikat und prüfe, ob es für die Shopdomain gültig ist.
  2. Stelle die WordPress-Website-Adressen und die Integrationsdomain auf HTTPS um. Aktiviere die Weiterleitung von HTTP zu HTTPS.
  3. Öffne die Produktseite über HTTPS und prüfe, ob der Browser Probleme mit dem Zertifikat oder über HTTP geladenen Ressourcen meldet.

Verbinde den Shop mit Auto Connect

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.

  1. Gehe in WordPress zu Plugins → Installieren, suche nach Alter Product und installiere und aktiviere das Plugin.
  2. Öffne das Alter-Product-Backend und wähle Auto Connect. Melde dich beim richtigen Alter-Product-Konto an, prüfe den Shop und bestätige die Verbindung.
  3. Kehre zu WordPress zurück. Wähle ein Ausgangsmodell und lade die benötigten Assets herunter. Warte, bis Download und Bereitschaftsprüfung abgeschlossen sind.
  4. Prüfe die erstellten Werkzeugseiten und Anzeigeeinstellungen und beginne anschließend mit der Produktvorbereitung.
Ansicht Connect Alter Product im WordPress-Backend mit der Schaltfläche Auto connect
Die Kontoverbindung startest du im WordPress-Backend. Der Ausschnitt aus der Integrationspräsentation zeigt die automatische Verbindungsoption.

Projekt zuordnen und Varianten synchronisieren

Ö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.

  1. Bereite bei einem variablen Produkt Attribute wie Größen und die zugehörigen WooCommerce-Varianten vor.
  2. Verwende im Designer Sync variants, um die Projektoptionen mit den Produktvarianten zu verknüpfen. Prüfe auch Standardauswahlen, die in WooCommerce keine Variantenattribute sind.
  3. Speichere Projekt und Produkt. Wähle das auf der Seite angezeigte Werkzeug und wie es geöffnet wird.
  4. Prüfe das Ergebnis auf der Produktseite: Wähle mehrere Varianten, erstelle ein Design und gehe zum Warenkorb.
Aus einem WooCommerce-Produkt geöffneter Designer und das Fenster Sync variants mit Einstellungen für Material und Druckverfahren
Die Synchronisierung verbindet WooCommerce-Produktvarianten mit den Projektoptionen. Im Bild werden Standardeinstellungen vor dem Bestätigen mit Sync gewählt.

Deine Bibliothek auf dem WordPress-Server

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.

Was wird lokal gespeichert?

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.

Wo du die für deinen Shop benötigten Materialien vorbereitest
Bereich im BackendWas du dort machst
AssetsDu 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.
ModellgeneratorDu erstellst lokale Projekte auf Grundlage von Vorlagen und arbeitest mit Modellen, die mit dem Generator verknüpft sind.
Produktprojekte / DesignerDu erstellst oder importierst ein Design, bearbeitest es und ordnest es einem Shopprodukt zu.
WooCommerce-BestellungenDu verwendest gespeicherte Kundendesigns, Vorschauen und Dateien zur Abwicklung der Bestellung.
Alter-Product-Assetbereich in WordPress mit Modellbibliothek und Importoptionen
Die Shopbibliothek verwaltest du im WordPress-Backend. Importierte Assets und eigene Materialien verwendest du in lokalen Projekten.

Du bestimmst, was im Angebot und in den Kundenwerkzeugen erscheint

Bibliothek und Projekte verwaltest du mit den entsprechenden Berechtigungen im WordPress-Backend. Kunden verwenden die in deinem Shop freigegebenen Werkzeuge und Materialien, ohne Zugriff auf die administrative Bearbeitung der Bibliothek.

Du entscheidest, welches Projekt du einem Produkt zuordnest, wo das eingebettete Werkzeug erscheint und welche Personalisierungsmöglichkeiten du freigibst. Prüfe auch die Assets in der Bibliothek des eingebetteten Customizers. Nach der Projektzuordnung kann die Einbettung auf der Produktseite standardmäßig aktiviert sein; ihre Anzeige steuerst du in den Produkteinstellungen.

Lokale Dateien, eingebettete Alter-Product-Anwendung

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.

Personalisierung auf der Website deiner Marke

Die Einbettung kann Teil einer Produktseite oder einer separaten WordPress-Seite sein. Kunden bleiben im Kaufprozess deines Shops; WooCommerce übernimmt Warenkorb und Bestellung.

Produktseite, Werkzeugseite oder Block

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.

  • Zeige den Viewer dort, wo Kunden das Produktmodell ansehen sollen.
  • Verwende den Configurator, wenn du vorbereitete Varianten und Optionen verkaufst.
  • Wähle den Customizer, wenn Kunden Text oder Bilder hinzufügen oder die Druckkomposition ändern sollen.
Auf einer Shopseite eingebetteter Customizer mit Textbearbeitung auf einem T-Shirt und Warenkorb-Schaltfläche
Der Kunde personalisiert das Produkt im eingebetteten Werkzeug. Das Bild zeigt die Textbearbeitung, die 3D-Modellansicht und den 2D-Druckbereich.

Eigene Hintergründe, Logos und Sprache

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.

  • Szenenhintergrund, Oberflächenfarben und das vorbereitete Projektdesign helfen, ein einheitliches Erscheinungsbild mit dem Shop zu bewahren.
  • Anwendung und Plugin unterstützen 22 Sprachen. Die Sprache des WordPress-Backends stellst du für den Benutzer ein, die Sprache der Website in den Website-Einstellungen.
  • Eigene Produktnamen, Drucktexte und Angebotsbeschreibungen erstellst du in den Sprachen deiner Kunden. Die Unterstützung einer Oberflächensprache bedeutet keine automatische Übersetzung der Shopinhalte.

Vom Kundendesign zum Bestellposten

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.

  1. Der Kunde öffnet das Produkt oder das zugeordnete Werkzeug und wählt Optionen.
  2. Bei einer Personalisierung speichert er das Design und legt das Produkt in den Warenkorb.
  3. Im Warenkorb prüft er Produkt, Konfiguration und verfügbare Designvorschau und durchläuft anschließend den WooCommerce-Checkout.
  4. Im Bestellbereich öffnet der Shopbetreiber das gespeicherte Design und bereitet die Ausführung vor.

Bestellabwicklung, POD und optionale KI

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.

Printify oder Printful verbinden

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.

PrintifyPrintful
  • Passe Druckflächen und Dateiformat an das konkrete Produkt und den Anbieter an.
  • Prüfe die erzeugten Dateien und die bestellte Variante vor der Übergabe an die Produktion.
  • Nutze die Aktualisierung von Bestellstatus und Versanddaten im Plugin.
  • Wenn du selbst produzierst, lade PDF-, SVG- oder PNG-Dateien entsprechend den Projektmöglichkeiten und Exporteinstellungen herunter.

KI zur Grafikerstellung im Betreiber-Backend

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.

Einbettungssitzungen: Gültigkeitsdauer und Limitverbrauch

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.

Wie lange ist ein Sitzungsschlüssel gültig?

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.

Verbraucht das Neuladen der Seite eine weitere Sitzung?

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.

Typische Kundenaktionen und Anzahl ausgestellter Sitzungen
SituationWas geschieht mit der Sitzung?Auswirkung auf das Limit
Erstes Öffnen des Werkzeugs ohne passende SitzungDie 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 bearbeitenDie 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 ConfiguratorDas 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 ladenDer 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 ArbeitskontextEine 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.

Wie berücksichtigst du Sitzungen bei Shopkosten und Tarifwahl?

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.

  • Starte das Werkzeug dort, wo Kunden es tatsächlich nutzen. Für Produktlisten kannst du normale Bilder und fertige Mockups verwenden.
  • Vermeide in einer eigenen API-Integration, bei jedem Komponentenrendering oder jeder Optionsänderung eine neue Sitzung anzulegen. Verwende eine gültige Sitzung nur in ihrem passenden Kontext.
  • Plane das Sitzungslimit getrennt von Kosten für POD-Ausführung und KI-Generierung, die durch die Nutzung dieser externen Dienste entstehen.

Eigene Integration über die API

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.

Verbinde Alter Product mit deiner Technologie

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.

JavaScript und TypeScript / Node.js

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.

Python

Verbinde eine vorhandene Python-Anwendung, etwa Django oder FastAPI, über HTTP-Anfragen mit Alter-Product-Produkten, -Sitzungen und -Bestellungen.

PHP

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.

Java

Integriere die Werkzeuge in ein Java-Backend, etwa Spring, und verknüpfe Projektdaten mit deinem Produktkatalog und deiner Bestellabwicklung.

C# / .NET

Nutze ein .NET-Backend, etwa ASP.NET Core, zur Autorisierung, Sitzungserstellung und Datenübergabe an vorhandene Shopprozesse.

Go

Entwickle die Anbindung in einem Go-Dienst. Der Standard-HTTP-Client ermöglicht die Verarbeitung von API-Anfragen und JSON-Antworten.

Ruby

Ergänze eine Ruby-Anwendung, etwa Ruby on Rails, um die Integration und verwende dein eigenes Modell für Produkte, Warenkorb und Bestellabwicklung.

Rust

Verbinde dein Rust-Backend über einen HTTP-Client und JSON-Verarbeitung. Sitzungen und Kaufereignisse kannst du in deine Dienstarchitektur einbinden.

Frontend passend zu deiner Website

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.

ReactVue.jsAngularJavaScriptTypeScript

Was stellt die API bereit und was übernimmt dein System?

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.

Verantwortlichkeiten in einer eigenen Integration
EbeneAufgabe
Frontend deiner WebsiteZeigt den iframe an, reagiert auf die Werkzeugkommunikation und aktualisiert die Shopoberfläche.
Dein BackendAuthentifiziert Public-API-Anfragen, erstellt Sitzungen, kontrolliert den Kundenzugriff und speichert Verknüpfungen mit deinem Warenkorb oder deinen Bestellungen.
Alter Product Public APIBietet Funktionen für Verbindung, Produkte, Werkzeugzuordnungen, Bestellungen sowie Datei- und Assetzugriff.
Eingebettetes WerkzeugZeigt das Modell an und ermöglicht Konfiguration oder Personalisierung gemäß dem gewählten Modus und vorbereiteten Projekt.
Beispiel einer eigenen Integration: Codeeditor und Verpackungs-Customizer auf einer Website
Beispiel einer Anwendung mit eigener Integration. Aktuelle Sitzungs- und Kommunikationsparameter findest du in der verlinkten API- und postMessage-Dokumentation.

Von der Autorisierung zum eigenen Warenkorb

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.

  1. Richte API-Zugangsdaten und Shopdomain ein. Prüfe die Verbindung mit einer Anfrage aus dem Backend.
  2. Verknüpfe dein Shopprodukt mit dem Projekt und dem passenden Alter-Product-Werkzeug.
  3. Bette den iframe ein und implementiere den Kommunikationsstart. Erstelle die kurzlebige Sitzung auf dem Server und übergib sie gemäß Dokumentation an das Werkzeug.
  4. Verarbeite das Konfigurations- oder Personalisierungsereignis und speichere die benötigten Daten in deinem Warenkorb.
  5. Synchronisiere nach dem Kauf Bestellung sowie erforderliche Daten und Dateien mit deinem eigenen Abwicklungssystem.

Zur Anleitung für dein 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.

Prüfe den gesamten Ablauf vor dem Verkaufsstart

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.

Kurze Checkliste

Durchlaufe nach der Vorbereitung eines Produkts den gesamten Prozess. Übertrage erst danach die geprüfte Einrichtung auf weitere Katalogartikel.

  • Prüfe ein aktives Business-Abonnement oder höher sowie den HTTPS-Betrieb der Domain mit gültigem SSL/TLS-Zertifikat.
  • Prüfe die Sichtbarkeit der Werkzeugseiten, die Projektzuordnung und die gewählte Einbettungsart.
  • Wähle verschiedene Größen und Farben. Vergleiche die Projektoptionen mit Varianten und Preisen im Shop.
  • Füge im Customizer Text oder Grafik hinzu, speichere das Design und lege es in den Warenkorb. Prüfe auch die Bearbeitung einer bereits hinzugefügten Personalisierung.
  • Prüfe Vorschau, Menge und Konfiguration im Warenkorb und nach einer Testbestellung.
  • Öffne das Design bei der Bestellung und prüfe die erzeugten Druckdateien. Wenn du POD verwendest, teste auch die Anbieterzuordnung und einen kontrollierten Ablauf zur Übermittlung des Auftrags.
  • Prüfe die für Kunden verfügbare Bibliothek, Sprache, Branding und das Verhalten der Website auf dem Smartphone.