Produkt-Konfigurator in Schritten — Vollständiger Leitfaden

Überblick

DF Product Configurator verwandelt eine PrestaShop-Produktseite in einen geführten Schritt-für-Schritt-Konfigurator: Der Kunde wählt eine Farbe, fügt eine Gravur hinzu, wählt ein Zubehör, sieht das zusammengesetzte Ergebnis in Echtzeit auf dem Produktfoto entstehen, und der passende Preisaufschlag wird im Warenkorb angewendet — serverseitig, manipulationssicher.

Das Modul beruht auf zwei einfachen Konzepten:

• Schritt: eine Frage an den Kunden, einem Produkt zugeordnet. Es gibt zwei Typen: Visuelle Auswahl (der Kunde klickt eine Option an) und Text / Gravur (der Kunde gibt einen Freitext ein).
• Option: eine mögliche Antwort eines Schritts vom Typ visuelle Auswahl, mit ihrem Visual (Foto-Miniatur oder Farbmuster), ihrer Vorschau-Ebene und ihrem Preisaufschlag.

Installation

1. Öffnen Sie im PrestaShop-Backoffice Module → Modul-Manager → Modul hochladen.
2. Laden Sie dfproductconfigurator.zip hoch und klicken Sie auf Installieren.
3. Unter Katalog erscheinen zwei neue Tabs: Konfigurator — Schritte und Konfigurator — Optionen.

Einen Schritt anlegen

1. Öffnen Sie Katalog → Konfigurator — Schritte und klicken Sie auf Hinzufügen.
2. Wählen Sie das Produkt: Geben Sie mindestens 3 Zeichen in das Suchfeld ein und klicken Sie auf ein Ergebnis — die Produkt-ID wird automatisch ausgefüllt.
3. Wählen Sie den Schritttyp: Visuelle Auswahl oder Text / Gravur.
4. Geben Sie die Bezeichnung in jeder Sprache ein (zum Beispiel „Farbe“, „Gravur“, „Zubehör“). Das ist der im Stepper angezeigte Text.
5. Aktivieren Sie Pflicht, wenn der Kunde diesen Schritt beantworten muss, bevor er in den Warenkorb legen kann.
6. Stellen Sie die Position ein, um die Schritte zu ordnen.

Gravurspezifische Felder

Bei einem Schritt vom Typ Text / Gravur erscheinen zusätzliche Felder:

• Maximale Länge: Anzahl erlaubter Zeichen (auch serverseitig validiert).
• Preisaufschlag: Aufschlag, sobald der Kunde einen Text eingibt (0 für eine kostenlose Gravur).
• X- / Y-Position: Textposition in der Vorschau, in Prozent der Bildbreite und -höhe (50 / 50 = Mitte).
• Textgröße und -farbe: Overlay-Größe in Pixeln und Hexadezimalfarbe.
• Platzhalter: übersetzbarer Hinweistext im Eingabefeld.

Die Optionen eines Schritts anlegen

1. Klicken Sie in der Schrittliste auf die Zeilenaktion Optionen des betreffenden Schritts (oder öffnen Sie Katalog → Konfigurator — Optionen).
2. Klicken Sie auf Hinzufügen und geben Sie die mehrsprachige Bezeichnung der Option ein.
3. Definieren Sie ihren Preisaufschlag netto: positiv (Aufschlag), negativ (Rabatt) oder null (inklusive).
4. Wählen Sie das Visual der Optionskarte: entweder eine hexadezimale Farbe (als rundes Muster angezeigt) oder eine Foto-Miniatur (automatisch auf 400 px skaliert).
5. Laden Sie bei Bedarf eine transparente PNG-Ebene hoch (bis 1600 px): Sie wird in der zusammengesetzten Vorschau auf das Produktfoto gestapelt.
6. Aktivieren Sie Standard, um diese Option vorauszuwählen — nur eine Standardoption pro Schritt, das Modul stellt das sicher.

So funktioniert der Preis

Die Preisaufschläge werden netto, in der Standardwährung des Shops definiert. Auf der Produktseite rechnet das Modul sie in die Währung des Besuchers um und zeigt sie je nach Kundengruppe brutto oder netto an, mit live neu berechneter Summe.

Diese angezeigte Summe ist rein indikativ. Im Warenkorb wird der tatsächliche Aufschlag vom nativen Preisberechnungs-Hook von PrestaShop serverseitig angewendet, auf Basis der in der Datenbank gespeicherten Konfiguration: Währungsumrechnung zum Wechselkurs, MwSt. des Kundenkontexts, Rundung auf die Dezimalstellen der Währung. Ein Kunde, der DOM oder Requests manipuliert, kann den berechneten Preis nicht ändern.

Kundenerlebnis auf der Produktseite

Der Konfigurator-Block erscheint automatisch auf der Produktseite (Hook für Zusatzinformationen), sobald mindestens ein aktiver Schritt für das Produkt existiert. Der Kunde:

1. navigiert über den Stepper zwischen den Schritten (abgeschlossene Schritte sind abgehakt);
2. klickt seine Optionen an oder gibt seine Gravur ein — die zusammengesetzte Vorschau und die Summe aktualisieren sich sofort;
3. klickt auf In den Warenkorb: Das Modul validiert die Pflichtschritte, speichert die Konfiguration serverseitig und lässt dann das Hinzufügen zum Warenkorb normal weiterlaufen.

Ist ein Pflichtschritt unvollständig, öffnet sich der Konfigurator auf diesem Schritt mit einer klaren Meldung, und das Hinzufügen zum Warenkorb wird blockiert.

Warenkorb, Bestellung und Rechnung

Jede validierte Konfiguration erzeugt eine native PrestaShop-Personalisierung: Zwei verschiedene Konfigurationen desselben Produkts ergeben zwei getrennte Warenkorbzeilen, jede mit eigenem Preis. Die lesbare Zusammenfassung (zum Beispiel Farbe: Ozeanblau · Gravur: Lea · Zubehör: Bambusdeckel) erscheint unter dem Produktnamen im Warenkorb, in der Bestellung, auf der Rechnung und im Bestelldetail des Backoffice — ohne zusätzliche Einstellung.

Bei der Bestellvalidierung wird die Konfiguration in einer eigenen Tabelle archiviert. Konfigurationen verlassener Warenkörbe werden nach 60 Tagen automatisch bereinigt.

Varianten, Gäste und Multi-Währung

• Varianten: Der Konfigurator folgt der gewählten Variante — die Vorschau wird neu aufgebaut und der angezeigte Basispreis ist der der Variante.
• Gastkunden: Beim Speichern der Konfiguration wird bei Bedarf automatisch ein Warenkorb angelegt.
• Multi-Währung: Die Umrechnung nutzt den Wechselkurs des Shops, sowohl bei der Anzeige als auch bei der serverseitigen Berechnung.

Deinstallation und Bereinigung

Das Modul räumt hinter sich auf:

• beim Löschen eines Produkts werden seine Schritte, Optionen und Optionsbilder entfernt;
• bei der Deinstallation werden die Modultabellen gelöscht und die angelegten Personalisierungsfelder freigegeben (die Produktzähler werden dekrementiert).

Fehlerbehebung

Der Konfigurator-Block wird nicht angezeigt

• Prüfen Sie, ob mindestens ein aktiver Schritt dem richtigen Produkt zugeordnet ist (korrekte Produkt-ID).
• Leeren Sie den PrestaShop-Cache (Erweiterte Einstellungen → Leistung).
• Prüfen Sie, ob Ihr Theme den Hook displayProductAdditionalInfo aufruft (das Classic-Theme und praktisch alle Themes tun das).

Die zusammengesetzte Vorschau ist versetzt

Die PNG-Ebene hat nicht denselben Bildausschnitt wie das Titelfoto. Exportieren Sie die Ebene erneut mit demselben Seitenverhältnis und derselben Produktposition wie das Hauptbild.

Der Aufschlag erscheint nicht im Warenkorb

• Prüfen Sie, ob die gewählte Option tatsächlich einen Aufschlag ungleich null trägt.
• Der Warenkorbpreis wird von PrestaShop neu berechnet: Cache leeren und mit einem frischen Warenkorb erneut testen.

Zwei identische Hinzufügungen erzeugen zwei Zeilen

Das ist das erwartete Verhalten, wenn sich die Konfigurationen unterscheiden. Sind sie strikt identisch und werden in derselben Sitzung hinzugefügt, verwendet das Modul dieselbe Personalisierung wieder und erhöht die Menge.