Produkt-Konfigurator in Schritten: vollständiger Leitfaden

Überblick

Der Produkt-Konfigurator in Schritten ergänzt die Produktseite um einen geführten Ablauf: Der Kunde wählt seine Optionen (Größe, Ausführung, Farbe, Rahmen…), gibt einen Text ein, lädt eine Datei hoch, und der Preis aktualisiert sich bei jeder Auswahl. Der Aufschlag wird serverseitig berechnet und von einer nativen PrestaShop-Personalisierung getragen; er begleitet also Warenkorb, Bestellung und Rechnung.

Das Modul ersetzt Kombinationen, wenn ein Produkt viele Optionen kombiniert: Es wird keine Kombination angelegt, jede Option trägt ihren eigenen Preis und ihr Gewicht, und ein Konfigurator kann einen ganzen Katalog bedienen.

• Konfigurator: eine Gruppe von Feldern, verknüpft mit einem oder mehreren Produkten und bei Bedarf mit Kategorien.
• Feld: ein Schritt des Ablaufs (Liste, Radiobuttons, Farbfelder, Vorschaubilder, Text, Upload…).
• Option: eine Auswahl in einem Feld, mit Preis, Gewicht, Artikelnummer und Bild.

Installation und Update

1. Öffnen Sie im Backoffice Module → Modulmanager → Modul hochladen und laden Sie das ZIP des Moduls hoch.
2. Klicken Sie auf Konfigurieren, um die Anzeigeeinstellungen und die Demodaten zu erreichen.
3. Die Konfiguratoren verwalten Sie unter Module → Produktkonfiguratoren.

Für ein Update laden Sie einfach das neue ZIP hoch. Datenbankschema, Hooks und Caches werden automatisch aktualisiert, auch wenn die Dateien von Hand ohne den Modulmanager kopiert wurden. Bestehende Konfiguratoren bleiben erhalten.

Anzeigeeinstellungen

Die Seite Konfigurieren des Moduls enthält die Einstellungen für alle Konfiguratoren:

• Anzeigemodus: in die Produktseite eingebetteter Block (empfohlen mit einem Page Builder), Button „Konfigurieren“ mit Vollbild-Popup oder vollständige Ersetzung der Produktseite.
• Platzierung: automatisch (Hook displayProductAdditionalInfo des Themes) oder manuell (Sie platzieren den Konfigurator selbst, siehe Abschnitt Creative Elements).
• Nativen Warenkorb-Button des Themes ausblenden: verhindert das Hinzufügen ohne Konfigurator.
• Mengenauswahl im Konfigurator: im eingebetteten Modus erscheint die Menge neben dem Button „In den Warenkorb“ des Konfigurators, die des Themes wird ausgeblendet.
• Name und Beschreibung des Konfigurators anzeigen: deaktivieren, wenn Produkttitel und -text bereits vom Theme oder Page Builder verwaltet werden.
• Schrittleiste anzeigen und Schritte nummerieren: die Reihe der Schritt-Buttons über den Feldern und die Nummern vor jedem Titel lassen sich getrennt ausblenden.
• Nach dem Hinzufügen zum Warenkorb: Popup mit den Personalisierungsdetails, natives Theme-Popup (Warenkorbmodul ps_shoppingcart) oder einfache Meldung unter dem Button.

Einen Konfigurator anlegen

Klicken Sie unter Module → Produktkonfiguratoren auf Neuer Konfigurator. Auf der Produktseite im Backoffice (alte Produktseite) füllt der Button „Konfigurator für dieses Produkt erstellen“ das Produkt vorab aus.

Verknüpfte Produkte und Kategorien

• Verknüpfte Produkte: Name, Artikelnummer oder ID eingeben und auf das Ergebnis klicken. Fügen Sie beliebig viele Produkte hinzu; das Kreuz an einem Eintrag entfernt das Produkt.
• Verknüpfte Kategorien: Kreuzen Sie die Kategorien an, deren Produkte alle den Konfigurator erhalten sollen. Der Filter über der Liste findet eine Kategorie nach Namen. Die Option Unterkategorien einbeziehen erweitert die Verknüpfung auf den ganzen Baum.

Jedes Produkt behält seinen eigenen Grundpreis. Ist ein Produkt mit mehreren aktiven Konfiguratoren verknüpft, gewinnt die direkte Produktverknüpfung vor der Kategorieverknüpfung, danach der älteste Konfigurator. Eine Warnung nennt die betroffenen Produkte.

Allgemeine Einstellungen

• Interner Name (optional): hilft, den Konfigurator in der Liste zu finden. Bleibt er leer, erhält er den Namen des ersten verknüpften Produkts. Auf der Produktseite erscheint er nur, wenn die entsprechende Einstellung aktiv ist.
• Aktiv: Ein inaktiver Konfigurator erscheint bei keinem Produkt.
• Hinzufügen blockieren, wenn ungültig: Der Button „In den Warenkorb“ bleibt deaktiviert, solange ein Pflichtfeld leer ist.
• Preismodus: Produktpreis + Optionen (Normalfall) oder eigener Grundpreis + Optionen.

Die Felder

Klicken Sie auf Feld hinzufügen, wählen Sie den Typ, geben Sie die Bezeichnung in jeder Sprache ein (Sprachauswahl oben im Formular) und haken Sie bei Bedarf Pflichtfeld an. Unter dem Titel kann ein Hilfetext erscheinen.

Feldtypen

• Dropdown, Radiobuttons, Farbfelder, Vorschaubilder: eine Auswahl unter mehreren Optionen.
• Checkboxen: mehrere Auswahlen möglich (Veredelungen, Geschenkverpackung…).
• Textfeld, Textbereich, Zahl, Datum, Datei-Upload: freie Eingabe. Eine einzige „tragende“ Option legt dann den Preis fest (zum Beispiel 0,20 € pro Zeichen).

Optionen

Jede Option hat eine mehrsprachige Bezeichnung, einen Preisaufschlag mit Typ (Festbetrag, Prozent vom Grundpreis, pro Zeichen, pro Einheit, Formel), eine Farbe für Farbfelder, ein Bild für Vorschaubilder, ein Gewicht in kg, eine Artikelnummer, den Status „Standard“ und die Verfügbarkeit. Eine nicht verfügbare Option bleibt sichtbar, aber ausgegraut.

Felder und Optionen sortieren

Ziehen Sie ein Feld an seinem Griff, um die Reihenfolge der Schritte zu ändern; der Button Alle einklappen erleichtert das bei einem langen Konfigurator. Optionen werden ebenso an ihrem Griff sortiert. Die Reihenfolge wird mit dem Konfigurator gespeichert.

Nur anzeigen, wenn…

Ein Feld kann nur erscheinen, wenn eine bestimmte Option eines anderen Feldes gewählt ist. Beispiel: Das Feld „Rahmen“ erscheint nur, wenn unter „Ausführung“ „Gerahmter Druck“ gewählt ist. Wählen Sie im Block Nur anzeigen, wenn… die auslösende Option oder Optionen (Strg oder Cmd + Klick für mehrere: Das Feld erscheint, wenn eine davon gewählt ist). Ohne Auswahl ist das Feld immer sichtbar.

Verkettete Abhängigkeiten werden berücksichtigt: Ist ein auslösendes Feld ausgeblendet, sind auch die davon abhängigen Felder ausgeblendet. Ein ausgeblendetes Feld zählt weder im Preis noch in der Bestellung, auch wenn es ein Pflichtfeld ist.

Info-Link (Fenster)

Jedes Feld kann rechts neben seinem Titel einen Link wie „Materialratgeber“ oder „Größentabelle“ zeigen. Ein Klick öffnet ein Fenster über der Seite.

• Linktext: die angezeigte Bezeichnung, in jeder Sprache. Leer: kein Link.
• Fensterinhalt: HTML (Text, Tabelle, Bilder) und die Tags {hook …} und {widget …}, die wie im Shortcode-Widget von Creative Elements ausgeführt werden. Für ein aufwendiges Layout gestalten Sie das Fenster als gespeicherte Vorlage in Creative Elements und fügen deren Shortcode ein.

Preis und Gewicht

Aufschläge werden netto in der Standardwährung eingegeben. Die Produktseite zeigt Grundpreis, Optionssumme und Bruttosumme, bei jeder Auswahl aktualisiert. Diese Summe ist nur eine Anzeige: Der echte Preis wird serverseitig aus der Auswahl des Kunden neu berechnet und von der nativen PrestaShop-Personalisierung getragen. Änderungen an Seite oder Anfragen im Browser ändern den berechneten Preis nicht.

Das Gewicht der gewählten Optionen addiert PrestaShop zum Warenkorbgewicht. Die Gewichtsstufen Ihrer Versanddienste gelten also wie gewohnt, und Optionspreise zählen zur Summe für die Schwelle des kostenlosen Versands.

Visuelle Vorschau (optional)

Aktivieren Sie im Block Visuelle Vorschau des Konfigurators die Vorschau und laden Sie ein Hintergrundbild hoch (transparentes PNG empfohlen). Jedes Feld kann dann eine Bildebene setzen, die Silhouette einfärben oder den Text des Kunden in einer Zone zeigen, die Sie mit der Maus zeichnen. Der Kunde kann Schrift, Größe und Farbe seines Textes wählen, und Farben lassen sich mit einem anderen Feld verknüpfen. Beim Hinzufügen zum Warenkorb wird das finale Motiv zusammengesetzt und mit der Bestellung gespeichert.

Vorschau aus: Es wird keine Vorschau angezeigt, die Bilder des Themes oder Page Builders werden nie verändert, und die Vorschau-Einstellungen der Felder sind im Editor ausgeblendet (sie bleiben gespeichert, wenn Sie die Vorschau wieder aktivieren).

Creative Elements und Page Builder

1. Wählen Sie in den Moduleinstellungen den Modus Eingebettet und die Platzierung Manuell.
2. Schalten Sie im Konfigurator die Vorschau ab: Die Bilder der Produktseite bleiben die des Page Builders.
3. Fügen Sie in der Produktseiten-Vorlage von Creative Elements ein Widget Module ein, wählen Sie das Modul DataFirefly Konfigurator und geben Sie den Hook displayDfProductConfigurator ein. Alternativ nutzen Sie ein Widget Shortcode mit {hook h='displayDfProductConfigurator'}.
4. Platzieren Sie dieses Widget an der gewünschten Stelle, zum Beispiel unter Titel und Preis. Bei Produkten ohne Konfigurator zeigt das Widget nichts an.
5. Schalten Sie bei Bedarf Nummerierung, Schrittleiste und Konfiguratorname ab und aktivieren Sie die integrierte Mengenauswahl, wenn das Widget „In den Warenkorb“ von Creative Elements nicht auf der Seite ist.

In einem Theme wird derselbe Hook mit {hook h='displayDfProductConfigurator' product=$product} aufgerufen. Der Konfigurator wird nur einmal pro Seite ausgegeben.

Nach dem Hinzufügen zum Warenkorb

Mit der Standardeinstellung öffnet sich ein Popup: Produktbild, Stückpreis, Details jeder Auswahl (zum Beispiel Ausführung: Gerahmter Druck, Größe: 40 × 60 cm, Rahmen: Nussbaum), Menge, dann Anzahl der Artikel, Zwischensumme, Versand und Warenkorbsumme, mit den Buttons Weiter einkaufen und Zur Kasse. Die Vorlage views/templates/front/cart_modal.tpl kann im Theme überschrieben werden.

Die Einstellung „Natives Theme-Popup“ nutzt das Popup des Warenkorbmoduls; es zeigt die Personalisierungsdetails nicht. Die Einstellung „Meldung“ zeigt einen Link zum Warenkorb unter dem Button.

Warenkorb, Bestellung und Produktion

Jede bestätigte Konfiguration erzeugt eine native PrestaShop-Personalisierung: Zwei unterschiedliche Konfigurationen ergeben zwei getrennte Warenkorbzeilen. Die lesbare Zusammenfassung (Größe: 40 × 60 cm · Ausführung: Gerahmter Druck · Rahmen: Nussbaum) erscheint in Warenkorb, Bestellung, Rechnung und Backoffice. Das Bestelldetail im Backoffice zeigt ein Panel Personalisierungen mit der Zusammenfassung Feld für Feld, den Dateien des Kunden und, bei aktiver Vorschau, dem finalen Motiv.

Im Classic-Theme lädt eine Mengenänderung einen Teil der Produktseite per AJAX neu: Der Konfigurator bleibt an seinem Platz und behält die Auswahl des Kunden.

Einen Konfigurator duplizieren

Öffnen Sie in der Liste das Zeilenmenü und klicken Sie auf Duplizieren (der Button steht auch unten im Editor). Die Kopie übernimmt Einstellungen, Felder, Optionen, Übersetzungen und Bilder. Bedingungen „Nur anzeigen, wenn…“ und verknüpfte Farben werden mit den kopierten Feldern neu verknüpft. Die Kopie wird inaktiv und ohne verknüpftes Produkt oder Kategorie angelegt, damit sie das Original nicht verdrängt: Verknüpfen Sie Ihre Produkte und aktivieren Sie sie.

Demodaten

Die Seite Konfigurieren bietet drei Importe, die ohne Duplikate erneut ausgeführt werden können:

• Tasse, Vase, T-Shirt: zusammengesetzte Vorschau, gravierter Text, formabhängige Farben, Preisformel, Upload.
• Stickerei (Patch und Mütze): über mehrere Elemente verknüpfte Farben.
• Fotobild (Wandkunst): Vorschau aus, Link „Materialratgeber“, Größen mit Gewicht, Ausführung als Vorschaubilder, Foto des Kunden, Hintergrundfarbe, Rahmen nur beim gerahmten Druck.

Fehlerbehebung

Der Konfigurator erscheint nicht

• Prüfen Sie, ob der Konfigurator aktiv und mit dem Produkt verknüpft ist, direkt oder über eine Kategorie.
• Bei manueller Platzierung prüfen Sie, ob der Hook displayDfProductConfigurator in der Produktseiten-Vorlage steht.
• Bei automatischer Platzierung prüfen Sie, ob das Theme displayProductAdditionalInfo aufruft (das Classic-Theme tut es).
• Leeren Sie den Cache (Erweiterte Einstellungen → Leistung).

Eine Option fehlt in „Nur anzeigen, wenn…“

Sie ist noch nicht gespeichert. Speichern Sie den Konfigurator und kehren Sie zum Feld zurück.

Der Info-Link erscheint nicht

Linktext und Fensterinhalt müssen beide in der angezeigten Sprache ausgefüllt sein.

Der Button „In den Warenkorb“ bleibt grau

Ein sichtbares Pflichtfeld ist leer: Die Meldung unter der Summe nennt es. Deaktivieren Sie „Hinzufügen blockieren, wenn ungültig“, damit der Button aktiv bleibt und die Fehler beim Klick erscheinen.

Die Versandkosten ändern sich nicht mit den Optionen

Prüfen Sie, ob die Optionen ein Gewicht haben und ob der Versanddienst nach Gewicht (nicht nach Preis) abrechnet.

Versionsverlauf

• 1.3.0: PrestaShop 1.7.7 und 1.7.8, mehrere Produkte und Kategorien pro Konfigurator, Duplizieren, Bedingungen aus einer Optionsliste, Info-Links im Fenster, eigener Hook für Page Builder, Warenkorb-Popup, Anzeigeeinstellungen, Drag-and-drop, Fotobild-Demo.
• 1.2.1: Vorschau identisch mit dem finalen Motiv, übersetzte Frontend-Meldungen, Zonen-Editor mit korrekten Proportionen.
• 1.2.0: verknüpfte Farben, Neueinfärbung von Motiven, Demos mit einem Klick, immer sichtbare Vorschau.
• 1.1.0: Schrift, Größe und Farbe nach Wahl des Kunden, Platzierungszonen mit der Maus, finales Motiv und Bestellpanel, drei Anzeigemodi.
• 1.0.0: erste Version.