Produktkonfigurator Step-by-Step

Einleitung

Wichtig: Zusatzplugin – benötigt den Produktkonfigurator (SwpProductOptionsSix). Dieses Plugin ist eine Erweiterung des Basis-Plugins Produktkonfigurator und funktioniert nur zusammen mit ihm. Ohne den installierten, aktiven und separat erworbenen Produktkonfigurator ab Version 6.7.12 hat dieses Plugin keine Funktion.

Produktkonfigurator Step-by-Step führt deine Kundschaft Schritt für Schritt durch den Produktkonfigurator: Statt alle Optionsgruppen gleichzeitig auf der Produktseite zu zeigen, erscheint immer nur die Gruppe, die gerade an der Reihe ist.

Das Plugin ist eine Erweiterung des Produktkonfigurators SwpProductOptionsSix. Ohne dieses Basis-Plugin funktioniert es nicht — die Preisberechnung, die Optionsgruppen und die Übergabe in den Warenkorb bleiben vollständig dort.

Was du mit diesem Plugin erreichst

• Deine Kunden sehen pro Schritt genau eine Optionsgruppe statt einer langen Liste. Das wirkt aufgeräumt, gerade auf dem Handy.
• Erst wenn alle Pflichtangaben eines Schrittes ausgefüllt sind, geht es weiter — falsch konfigurierte Bestellungen werden seltener.
• Abgeschlossene Schritte bleiben als schmale Zeile mit der getroffenen Auswahl sichtbar, zum Beispiel Material ¹ : Bio-Baumwolle (+5,00 €). Der Überblick geht nicht verloren.
• Die Preisübersicht Berechnung Ihrer Konfiguration erscheint wahlweise erst am Ende oder nach jedem Schritt — du entscheidest, wie früh der Preis sichtbar wird.
• Du schaltest die Ansicht global für alle Produkte ein und legst sie bei einzelnen Produkten abweichend fest.

Für wen ist dieses Plugin?

Für Shops, die Artikel mit vielen Optionen verkaufen — Möbel, Textildruck, Bauteile, Werbeartikel, alles mit langen Auswahllisten. Je mehr Optionsgruppen ein Produkt hat, desto größer der Nutzen. Bei Produkten mit ein oder zwei Gruppen lohnt sich die Schrittansicht meist nicht.

Installation

Nach dem Kauf steht dir das Plugin direkt in deiner Administration zur Verfügung — du musst nichts herunterladen.

Wichtig vorab: Der Produktkonfigurator SwpProductOptionsSix muss installiert und aktiv sein. Er ist die Grundlage, auf der dieses Plugin aufsetzt.

1. Melde dich in deiner Shopware-Administration an (DeinShop.de/admin)
2. Öffne Erweiterungen → Meine Erweiterungen
3. Klicke neben Produktkonfigurator Step-by-Step auf Installieren
4. Aktiviere das Plugin anschließend über den Schalter neben dem Eintrag — fertig.

Taucht Produktkonfigurator Step-by-Step nicht in der Liste auf, ist dein Shopware-Account noch nicht mit dem Shop verbunden. Das erledigst du unter Erweiterungen → Meine Erweiterungen über die Anmeldung mit deinem Shopware-Konto.

Nach der Aktivierung ändert sich im Shop zunächst nichts. Welche Produkte die Schrittansicht bekommen, legst du in den Einstellungen fest (Kapitel 3 und 4).

Erste Schritte

In drei Handgriffen ist die Schrittansicht im Shop sichtbar.

1. Einstellungen öffnen: Einstellungen → Erweiterungen → Produktkonfigurator Step-by-Step

2. Verkaufskanal wählen: Ganz oben steht die Auswahl Verkaufskanal. Mit Alle Verkaufskanäle gelten deine Angaben überall; wählst du einen einzelnen Kanal, gelten sie nur dort.

3. Schrittansicht einschalten: Aktiviere den Schalter Step-by-Step global aktivieren und klicke oben rechts auf Speichern.

4. Ergebnis prüfen: Öffne im Shop ein Produkt, dem Optionen zugeordnet sind. Unter der Überschrift Optionsauswahl siehst du jetzt nur noch die erste Optionsgruppe, darunter den Button Weiter.

Bleibt die Produktseite unverändert, hilft Kapitel 6 weiter.

Einstellungen

Die Einstellungen findest du unter Einstellungen → Erweiterungen → Produktkonfigurator Step-by-Step. Alle drei Angaben stehen in der Karte Einstellungen und gelten für den Verkaufskanal, den du oben ausgewählt hast.

Abb. 1: Die Einstellungen des Plugins in der Administration

Über den Button zur Dokumentation oberhalb der Einstellungen erreichst du jederzeit diese Anleitung im Netz — in der Sprache, in der du die Administration bedienst.

Plugin für diesen Verkaufskanal aktivieren

Mit Plugin für diesen Verkaufskanal aktivieren bestimmst du, ob das Plugin in diesem Shop überhaupt wirkt. Standardmäßig ist der Schalter eingeschaltet. Schaltest du ihn aus, zeigt dieser Verkaufskanal wieder den unveränderten Produktkonfigurator — alle Optionsgruppen untereinander, ohne Schritte.

Wozu das gut ist: Du betreibst einen B2C- und einen B2B-Kanal. Privatkunden führst du durch die Schritte, dein Fachhandel bekommt weiterhin die vollständige Liste auf einen Blick. Dafür musst du das Plugin nicht deinstallieren, sondern nur in einem Kanal ausschalten.

Step-by-Step global aktivieren

Mit Step-by-Step global aktivieren legst du die Schrittansicht als Standard für alle Produkte fest, bei denen du keine abweichende Anzeige hinterlegt hast. Ist der Schalter aus, bleibt es überall beim gewohnten Konfigurator — außer bei den Produkten, bei denen du die Schrittansicht ausdrücklich ausgewählt hast (siehe Abschnitt 5.2).

Wozu das gut ist: Du willst die Schrittansicht ohne Einzelpflege in deinem ganzen Sortiment ausrollen. Einmal einschalten genügt; Ausnahmen regelst du danach am einzelnen Produkt.

Zusammenfassung anzeigen

Mit Zusammenfassung anzeigen steuerst du, wann deine Kundschaft die Preisübersicht Berechnung Ihrer Konfiguration zu sehen bekommt. Du hast zwei Möglichkeiten:

• Zusammenfassung wird am Ende der Schritte angezeigt — die Übersicht erscheint erst, wenn alle Schritte abgeschlossen sind. Das ist die Voreinstellung.
• Zusammenfassung wird nach jedem Schritt angezeigt — die Übersicht wird nach jedem abgeschlossenen Schritt neu aufgebaut und wächst mit.

Wozu das gut ist: Bei teuren Zusatzoptionen schafft die laufende Anzeige Vertrauen — der Kunde sieht sofort, was ein Aufpreis kostet. Bei sehr vielen Schritten wirkt die Übersicht am Ende ruhiger, weil sich unterwegs nichts bewegt.

Wichtig: Nach jeder Änderung oben rechts auf Speichern klicken. Erscheint im Shop weiterhin die alte Ansicht, leere einmal den Cache (Kapitel 6).

So nutzt du die Funktionen

So schaltest du die Schrittansicht für dein ganzes Sortiment ein

Was dir das bringt: Jedes Produkt mit zugeordneten Optionen führt deine Kundschaft ab sofort durch die Schritte — ohne dass du jedes Produkt einzeln anfassen musst.

Schritt für Schritt

1. Gehe zu Einstellungen → Erweiterungen → Produktkonfigurator Step-by-Step
2. Wähle oben den Verkaufskanal, für den die Ansicht gelten soll
3. Schalte Step-by-Step global aktivieren ein
4. Klicke auf Speichern

Produkte, bei denen du eine eigene Anzeige hinterlegt hast, behalten diese. Die globale Einstellung gilt nur für alle übrigen.

So legst du die Ansicht für ein einzelnes Produkt fest

Was dir das bringt: Du entscheidest je Produkt, ob es Schritt für Schritt geführt wird — unabhängig davon, was global eingestellt ist.

Abb. 2: Die Anzeigeeinstellung im Reiter „Produktkonfigurator” eines Produkts

Schritt für Schritt

1. Öffne Kataloge → Produkte und wähle das gewünschte Produkt
2. Wechsle auf den Reiter Produktkonfigurator
3. In der Karte Zugeordnete Produktkonfigurationen findest du oben die Auswahl Anzeigeeinstellung
4. Wähle dort Optionen Schritt für Schritt unter Medien / Kaufen
5. Klicke oben rechts auf Speichern

Damit erscheinen die Optionen dieses Produkts als Schritte unterhalb der Produktbilder und des Kaufbereichs — auch dann, wenn Step-by-Step global aktivieren ausgeschaltet ist.

Soll ein einzelnes Produkt umgekehrt nicht in Schritten geführt werden, obwohl global eingeschaltet ist, wählst du in derselben Auswahl eine der übrigen Anzeigeeinstellungen des Produktkonfigurators aus.

Tipp: Der Schalter Status in derselben Zeile gehört zum Produktkonfigurator selbst. Steht er auf aus, werden dem Produkt gar keine Optionen angezeigt — dann hilft auch die Schrittansicht nicht.

Das erlebt deine Kundschaft im Shop

Was dir das bringt: Du weißt, wie die Führung aus Kundensicht abläuft, und kannst sie im eigenen Shop nachvollziehen.

Schritt 1 — nur die erste Gruppe ist offen. Unter der Überschrift Optionsauswahl steht die erste Optionsgruppe, alle weiteren sind noch nicht sichtbar. Ist die Gruppe eine Pflichtangabe, trägt ihre Überschrift die hochgestellte ¹; unterhalb der Optionen steht der Hinweis ¹ wird benötigt.

Abb. 3: Der erste Schritt auf der Produktdetailseite

Schritt 2 und folgende — der Weg wird sichtbar. Nach einem Klick auf Weiter klappt der erledigte Schritt zusammen und die nächste Gruppe öffnet sich. In der zusammengeklappten Zeile steht die getroffene Auswahl, zum Beispiel Material ¹ : Bio-Baumwolle (+5,00 €).

Abb. 4: Der zweite Schritt; der erste zeigt die getroffene Auswahl in seiner Kopfzeile

Am Ende — Übersicht und Kauf. Sind alle Schritte abgeschlossen, stehen die Auswahlzeilen untereinander und darunter erscheint die Preisübersicht Berechnung Ihrer Konfiguration mit dem ursprünglichen Artikelpreis, jedem Aufpreis einzeln und dem Endbetrag. Erst jetzt lässt sich In den Warenkorb anklicken.

Abb. 5: Alle Schritte abgeschlossen, Preisübersicht und Warenkorb-Button aktiv

Tipp: Möchtest du, dass die Preisübersicht schon unterwegs mitläuft, stellst du Zusammenfassung anzeigen auf Zusammenfassung wird nach jedem Schritt angezeigt (Kapitel 4).

So ändert deine Kundschaft eine bereits getroffene Auswahl

Was dir das bringt: Wer sich umentscheidet, muss die Seite nicht neu laden — und bekommt trotzdem nie eine widersprüchliche Konfiguration in den Warenkorb.

Am rechten Rand jeder abgeschlossenen Schritt-Zeile sitzt ein Stift-Symbol. Ein Klick darauf klappt den Schritt wieder auf, die Auswahl lässt sich ändern.

Wichtig zu wissen: Beim Klick auf Weiter werden alle nachfolgenden Schritte zurückgesetzt — deren Eingaben und die Kurzübersicht in der Kopfzeile werden geleert, und der Weg wird von dieser Stelle an neu gegangen. Das ist Absicht: Eine später gewählte Option kann von der geänderten Angabe abhängen und würde sonst unbemerkt stehen bleiben.

Schritte vor der geänderten Stelle bleiben unangetastet.

So wirken Pflichtangaben in einem Schritt

Was dir das bringt: Unvollständige Konfigurationen kommen gar nicht erst bis in den Warenkorb — das spart Rückfragen im Kundenservice.

Klickt jemand auf Weiter, ohne die Pflichtangaben des Schrittes ausgefüllt zu haben, bleibt der Schritt offen und im Schritt erscheint ein gelber Hinweis:

Dieser Schritt enthält Pflichtfelder. Bitte wählen bzw. füllen Sie diese aus, damit dieser Schritt abgeschlossen werden kann.

Sobald die fehlende Angabe gemacht ist, führt Weiter wie gewohnt zum nächsten Schritt. Welche Gruppen Pflicht sind, legst du wie gewohnt im Produktkonfigurator fest; im Shop sind sie an der hochgestellten ¹ erkennbar.

So arbeitet die Schrittansicht mit Optionsabhängigkeiten zusammen

Was dir das bringt: Optionsgruppen, die für die getroffene Auswahl gar nicht gelten, halten den Kunden nicht auf.

Setzt du zusätzlich die Abhängigkeits-Erweiterung für den Produktkonfigurator ein, arbeiten beide Plugins zusammen: Eine Gruppe, die aufgrund einer früheren Auswahl ausgeblendet ist, wird als Schritt übersprungen. Sie blockiert den Fortschritt nicht und verlangt keine Eingabe. Optionen, die durch die aktuelle Auswahl wieder zulässig werden, stehen im jeweiligen Schritt zur Verfügung.

Ohne die Abhängigkeits-Erweiterung durchläuft deine Kundschaft schlicht alle Gruppen der Reihe nach — ohne diese Erweiterung fehlt keine Funktion der Schrittansicht.

Fehlerbehebung

Auf der Produktseite erscheinen weiterhin alle Optionen untereinander

Woran es liegt: Meistens ist die Schrittansicht für dieses Produkt nicht ausgewählt, der Verkaufskanal ist abgeschaltet, oder die Seite kommt noch aus dem Zwischenspeicher.

So behebst du es:

1. Prüfe unter Einstellungen → Erweiterungen → Produktkonfigurator Step-by-Step, ob Plugin für diesen Verkaufskanal aktivieren eingeschaltet ist — und ob oben der richtige Verkaufskanal ausgewählt war, als du gespeichert hast
2. Prüfe, ob Step-by-Step global aktivieren eingeschaltet ist
3. Öffne das Produkt, Reiter Produktkonfigurator, und sieh nach, ob unter Anzeigeeinstellung eine andere Ansicht hinterlegt ist — eine Angabe am Produkt hat immer Vorrang vor der globalen Einstellung
4. Leere den Cache: Einstellungen → System → Caches & Indizes → Cache leeren

Das Plugin lässt sich nicht installieren oder aktivieren

Woran es liegt: Der Produktkonfigurator SwpProductOptionsSix fehlt, ist nicht aktiv oder liegt in einer zu alten Fassung vor.

So behebst du es: Öffne Erweiterungen → Meine Erweiterungen und stelle sicher, dass der Produktkonfigurator installiert, aktiv und auf dem aktuellen Stand ist. Danach lässt sich Produktkonfigurator Step-by-Step installieren.

Die Schritte sind sichtbar, aber der Button „Weiter” reagiert nicht

Woran es liegt: Fast immer fehlen im Schritt Pflichtangaben, oder ein veraltetes Storefront-Skript liegt noch im Cache.

So behebst du es:

1. Sieh nach, ob im Schritt der gelbe Hinweis auf Pflichtfelder erscheint — dann fehlt eine Angabe
2. Leere den Cache: Einstellungen → System → Caches & Indizes → Cache leeren
3. Lade die Produktseite im Browser neu

Der Button „In den Warenkorb” bleibt grau

Woran es liegt: Das ist so gewollt, solange nicht alle Schritte abgeschlossen sind.

So behebst du es: Arbeite die Schritte bis zum letzten durch. Sobald die Preisübersicht Berechnung Ihrer Konfiguration erscheint, ist der Kauf-Button wieder anklickbar.

Eine Auswahl aus einem späteren Schritt ist plötzlich leer

Woran es liegt: In einem früheren Schritt wurde etwas geändert. Alle nachfolgenden Schritte werden dann bewusst zurückgesetzt (Abschnitt 5.4).

So behebst du es: Nichts — das ist das vorgesehene Verhalten. Die betroffenen Schritte werden einfach erneut durchlaufen.

FAQ

F: Brauche ich für dieses Plugin noch ein weiteres Plugin?

A: Ja. Der Produktkonfigurator SwpProductOptionsSix muss installiert und aktiv sein. Dieses Plugin ändert nur die Darstellung seiner Optionsgruppen.

F: Ändert sich etwas an Preisen, Aufpreisen oder am Warenkorb?

A: Nein. Preisberechnung und Warenkorb bleiben unverändert beim Produktkonfigurator. Die Schrittansicht ändert ausschließlich, wie die Optionen gezeigt und abgefragt werden.

F: Kann ich die Schrittansicht nur in einem von mehreren Shops nutzen?

A: Ja. Wähle in den Einstellungen oben den gewünschten Verkaufskanal und setze die Schalter dort. Mit Plugin für diesen Verkaufskanal aktivieren schaltest du das Plugin je Kanal komplett ab.

F: Gilt die globale Einstellung auch für Produkte, bei denen ich schon eine Ansicht gewählt habe?

A: Nein. Eine Angabe unter Anzeigeeinstellung am Produkt hat immer Vorrang. Step-by-Step global aktivieren wirkt nur auf Produkte ohne eigene Angabe.

F: In welchen Sprachen erscheinen die Texte im Shop?

A: Der Button Weiter und der Hinweis auf fehlende Pflichtangaben liegen in Deutsch, Englisch und Niederländisch vor. Sie erscheinen automatisch in der Sprache des Shops. Die Namen der Optionsgruppen kommen aus dem Produktkonfigurator und werden dort gepflegt.

F: Wie viele Schritte sind möglich?

A: So viele, wie das Produkt Optionsgruppen hat — jede Gruppe ist genau ein Schritt. Eine Obergrenze gibt es nicht.

F: Funktioniert die Schrittansicht auf dem Handy?

A: Ja. Gerade dort wirkt sie am stärksten, weil pro Bildschirm nur eine Gruppe zu sehen ist statt einer sehr langen Liste.

F: Was passiert, wenn ich das Plugin wieder deinstalliere?

A: Die Einstellungen des Plugins werden entfernt, und Produkte, die auf die Schrittansicht eingestellt waren, fallen auf die Standardansicht des Produktkonfigurators zurück. Deine Optionsgruppen, Preise und Produktdaten bleiben unangetastet.

F: Nach einem Update erscheint ein Hinweis in der Administration. Muss ich etwas tun?

A: Es ist eine Erinnerung, deine Plugin-Einstellungen einmal durchzusehen. Wirf einen Blick auf die Einstellungsseite; ist dort alles wie gewünscht, ist nichts weiter zu tun.

Für Administratoren / Technische Details

Dieser Abschnitt richtet sich an technische Administratoren. Für die normale Nutzung brauchst du ihn nicht.

Systemanforderungen

• Shopware: 6.7 (jeder Patchstand dieser Reihe)
• PHP: 8.2 oder neuer
• Datenbank: MySQL 8.0 / MariaDB 10.11 oder neuer
• Voraussetzung: Produktkonfigurator SwpProductOptionsSix ab Version 6.7.12, installiert und aktiv
• Optional: die Abhängigkeits-Erweiterung SwpProductOptionsSixDependencies

Installation über die Kommandozeile (Composer)

composer require swp/productoptions-six-stepbystep
php bin/console plugin:refresh
php bin/console plugin:install SwpProductOptionsSixStepByStep --activate
php bin/console cache:clear

Einordnung für Theme- und Template-Anpassungen

Das Plugin bringt keine eigenen Datenbanktabellen, keine eigenen Controller und keine eigenen Schnittstellen mit. Es erweitert die Templates des Produktkonfigurators und ergänzt ein Storefront-Skript, das die Schritte öffnet, schließt und prüft. Für ein abgeleitetes Theme heißt das: Die gewohnten Erweiterungspunkte des Produktkonfigurators bleiben bestehen, die Schrittansicht setzt darauf auf.

Die Schrittzähler, das Zurücksetzen nachfolgender Schritte und die Prüfung der Pflichtangaben laufen vollständig im Browser. Serverseitig verändert das Plugin weder Preisberechnung noch Warenkorb.

Automatisches Weiterspringen

Für Pflichtgruppen, die ausschließlich aus Auswahlknöpfen (Radiobuttons) bestehen, kann das Storefront-Skript direkt nach der Auswahl zum nächsten Schritt springen, ohne dass auf Weiter geklickt werden muss. Diese Betriebsart wird über ein Attribut am Konfigurator-Bereich (data-step-automatic) eingeschaltet und ist damit eine Anpassung im Theme, nicht in der Plugin-Konfiguration. Im Auslieferungszustand führt der Button Weiter durch die Schritte.

Deinstallation

Beim Deinstallieren ohne Erhalt der Nutzerdaten entfernt das Plugin seine Einträge aus der Systemkonfiguration und setzt die Anzeigeeinstellung aller Produkte zurück, die auf die Schrittansicht eingestellt waren. Ist der Produktkonfigurator zu diesem Zeitpunkt bereits entfernt, wird dieser Schritt übersprungen, ohne dass die Deinstallation abbricht.

---

Diese Anleitung wurde für Produktkonfigurator Step-by-Step Version 6.7.3 erstellt.