Novastrix Varianten-Anzeige

Überblick

Wenn deine Produkte drei oder mehr Eigenschaftsgruppen haben (z.B. Farbe, Größe, Material, Muster), wird Shopwares Standard-Variantenauswahl schnell unübersichtlich — alle nicht-kombinierbaren Optionen sehen gleich aus (durchgestrichen, leicht ausgegraut). Dieses Plugin ersetzt diese dezente Darstellung durch ein klares 3-Farben-System, das deinen Kunden auf einen Blick zeigt, welche Optionen sofort verfügbar sind, welche nur in anderen Konfigurationen existieren und welche gerade ausgewählt sind. Zusätzlich passt du alle Farben, Texte und das Verhalten komplett an dein Shop-Branding an.

Auf einen Blick

• 3-Farben-Codierung (Grün/Amber/Blau) für Variantenauswahl
• Unterstützung aller Darstellungsformen: Text, Farbmuster, Bild-Thumbnails, Dropdown-Select
• Konfigurierbarer Schwellenwert — Styling greift erst ab N Eigenschaftsgruppen
• 16 Farbvariablen, frei an Shop-Branding anpassbar
• Optionale Legende und Tooltips
• Gruppen mit nur 1 verbleibenden Option automatisch ausblendbar
• Optionale Sichtbarkeit von Varianten und Elternprodukten in der Suche

Voraussetzungen

• Shopware: 6.6.x oder 6.7.x (getestet mit 6.6.10 und 6.7.2)
• PHP: 8.1 oder höher

Hinweis: Auf Shopware 6.6 ergänzt das Plugin selbstständig die is-combinable / not-combinable CSS-Klassen, die sonst nur aktiv sind wenn das ACCESSIBILITY_TWEAKS-Feature-Flag an ist.

Installation

1. Im Admin unter Erweiterungen → Store nach "Novastrix Varianten-Anzeige" suchen und das Plugin laden
2. Unter Erweiterungen → Meine Erweiterungen installieren und aktivieren
3. Theme neu kompilieren:

bin/console theme:compile

Nach jeder Farbänderung im Plugin-Config muss das Theme erneut kompiliert werden, damit die SCSS-Variablen neu gerendert werden.

Konfiguration

Öffne Einstellungen → System → Erweiterungen → Novastrix Varianten-Anzeige → Konfigurieren (oder direkt unter Meine Erweiterungen den "Konfigurieren"-Link). Alle Farben, Texte und Schwellenwerte passt du hier an dein Shop-Branding an.

Die Einstellungen sind in sieben Bereiche aufgeteilt:

Suche

Steuert wie Varianten und Elternprodukte in der Shop-Suche erscheinen. Kategorien sind davon nicht betroffen.

Allgemein

Farben: Verfügbare Optionen (Grün)

Das Grün signalisiert: "Diese Option passt zu deiner aktuellen Auswahl und ist direkt wählbar."

Farben: Optionen in anderer Konfiguration (Amber)

Das Gelb-Orange signalisiert: "Diese Option existiert, aber deine anderen Auswahlen werden angepasst wenn du sie wählst." Klickbar — Shopware springt automatisch zur nächsten passenden Kombination.

Farben: Ausgewählte Option (Blau)

Das Blau markiert die Option, die der Kunde gerade aktiv ausgewählt hat.

Eigenschaftsgruppen-Karten

Rahmen und Hintergrund der einzelnen Gruppen-Container sowie der Legende.

Texte

Überschreibe die Standard-Texte der Legende und des Tooltips. Leer lassen, um die eingebauten Snippet-Übersetzungen (Deutsch/Englisch) zu nutzen.

Wichtig: Nach jeder Farbänderung muss das Theme neu kompiliert werden: bin/console theme:compile. Sonst greifen die SCSS-Variablen nicht.

Storefront-Verhalten

Das Plugin wirkt ausschließlich auf der Produktdetailseite von Artikeln mit Varianten. Sobald ein Produkt die konfigurierte Mindestanzahl an Eigenschaftsgruppen erreicht (Standard: 3), wird die erweiterte Darstellung aktiviert.

Beispiel: Produkt mit Varianten-Konfigurator

Jede Option bekommt je nach Status eine eindeutige Farbe:

• Grün — sofort verfügbar, passt zur aktuellen Auswahl
• Amber — existiert, wählt aber automatisch eine andere Kombination
• Blau — gerade ausgewählt
• Ausgeblendet — existiert in keiner aktiven Variante

Unterstützt werden alle vier Darstellungsformen: Text-Buttons, Farbmuster (Color Swatches), Bild-Thumbnails und Dropdown-Selects. Die Legende unter dem Konfigurator erklärt die Farbkodierung dem Kunden.

Produkte unter der Schwelle

Produkte mit weniger als der konfigurierten Gruppenanzahl werden nicht angefasst — sie behalten Shopwares Standard-Darstellung. So entstehen keine optischen Brüche zwischen einfachen und komplexen Artikeln.

Vollständige Produktseite

Use Cases

Mode-Shop mit Varianten in Farbe, Größe, Material

Du verkaufst Shirts in 5 Farben, 4 Größen und 3 Materialien — also 60 Kombinationen, aber nur 20 davon sind tatsächlich lieferbar. Ohne das Plugin sehen Kunden einen Wust aus gleichartig ausgegrauten Optionen. Mit dem Plugin:

So gehst du vor:

1. Plugin installieren und aktivieren
2. bin/console theme:compile ausführen
3. Schwellenwert in der Konfiguration auf 3 belassen (Standard)
4. Optional: Legenden-Texte an deine Shop-Sprache anpassen
5. Storefront-Produktseite aufrufen — der Konfigurator zeigt nun Grün für wählbare, Amber für wählbar-aber-andere-Konfig, Blau für aktuelle Auswahl

Möbel-Shop mit Dimensionen, Holzart, Beschlag-Farbe

Bei hochpreisigen Produkten mit mehreren konfigurierbaren Dimensionen ist die Wahl-Psychologie entscheidend. Der Kunde soll nicht das Gefühl haben, dass seine Auswunschkombination unmöglich ist.

So gehst du vor:

1. Schwellenwert auf 3 (oder niedriger) setzen
2. Amber-Farbe auf eine warme Akzentfarbe deines Brandings stellen (z.B. #c2410c für erdiges Orange)
3. Tooltip-Text anpassen: "Verfügbar – andere Merkmale werden automatisch angepasst"

B2B-Shop mit vielen Varianten (Lagerbestand wechselt)

Im B2B verschwinden einzelne Kombinationen je nach Lager. Statt dem Kunden leere Gruppen zu zeigen:

So gehst du vor:

1. Option "Gruppen mit nur 1 verbleibenden Option ausblenden" aktivieren
2. Der Kunde sieht nur Gruppen mit echter Auswahl
3. Wenn das Lager wieder aufgefüllt wird, erscheint die Gruppe automatisch wieder

FAQ

Wann sehe ich den Effekt des Plugins?

Nur auf Produkten mit mindestens drei Eigenschaftsgruppen (Standardschwelle). Unter dieser Schwelle bleibt Shopwares Standard-UI aktiv. Du kannst die Schwelle in der Konfiguration unter "Min. Eigenschaftsgruppen für erweiterten Modus" anpassen.

Warum ändern sich die Farben nicht, obwohl ich sie im Admin angepasst habe?

Die Farben werden als SCSS-Variablen ins Theme injiziert. Nach jeder Farbänderung muss bin/console theme:compile laufen, damit das Stylesheet neu kompiliert wird. Im Dockware-Container:

docker exec shopware-plugins-shopware-1 bin/console theme:compile

Beeinflusst das Plugin die Performance?

Minimal. Pro Produktdetailseite entsteht etwa 5ms Overhead durch einen zusätzlichen Subscriber. Es werden keine zusätzlichen Datenbank-Abfragen gemacht — die Daten kommen aus den bereits geladenen Page-Informationen. Auf Produkten unter der Gruppenschwelle ist der Overhead null. Die Storefront-Ausgabe ist HTTP-Cache-kompatibel.

Was passiert mit Varianten die komplett ausverkauft sind?

Shopware entfernt komplett nicht-existierende Optionen aus dem DOM. Das Plugin stylt nur was Shopware ausliefert. Wenn du zusätzlich Gruppen verstecken willst, die nach Shopwares Bereinigung nur noch eine Option enthalten, aktiviere "Gruppen mit nur 1 verbleibenden Option ausblenden".

Funktioniert das Plugin mit Color Swatches und Bildern?

Ja. Farbmuster und Thumbnails behalten ihr ursprüngliches Aussehen — der Status wird über Rahmenfarbe und ein kleines Badge (Punkt/Haken) angezeigt. Bei Text-Optionen und Dropdowns wird zusätzlich der Hintergrund eingefärbt.

Wird die Suche beeinflusst?

Nur wenn du die entsprechenden Schalter im Bereich "Suche" aktivierst. Standardmäßig bleibt Shopwares Gruppierungsverhalten in der Suche unverändert — das Plugin wirkt nur auf der Produktdetailseite. Kategorie-Listings sind niemals betroffen.

Kann ich eigene Texte statt der Standard-Snippets verwenden?

Ja. Im Bereich "Texte" in der Plugin-Konfiguration kannst du jeden Legenden- und Tooltip-Text überschreiben. Leere Felder fallen auf die eingebauten Deutsch-/Englisch-Snippets zurück.

Ist das Plugin mit Shopware 6.6 und 6.7 kompatibel?

Ja, beide Hauptversionen werden unterstützt (getestet mit 6.6.10 und 6.7.2). Auf Shopware 6.6 ergänzt das Plugin selbstständig die is-combinable / not-combinable CSS-Klassen, die sonst nur aktiv sind wenn das ACCESSIBILITY_TWEAKS-Feature-Flag an ist.

Troubleshooting

Plugin aktiviert, aber die Farben greifen nicht

Theme neu kompilieren:

bin/console theme:compile
bin/console cache:clear

Danach im Browser einen Hard-Reload machen (Strg+Shift+R), damit das neue CSS geladen wird.

Alle Optionen sehen noch gleich aus

Prüfe, ob das Produkt die Mindestgruppenanzahl erreicht (Standard 3). Produkte mit weniger Gruppen bleiben bei der Standard-Darstellung. Für Tests kannst du die Schwelle in der Konfiguration auf 2 oder 1 senken.

Konfigurationsänderungen sind nicht sichtbar

Shopware cached die System-Config-Werte. Nach Config-Änderungen einmal den Cache leeren:

bin/console cache:clear

Amber-Optionen sind nicht klickbar

Das ist ein Styling-Problem, kein Logik-Problem. Prüfe ob das Theme korrekt kompiliert wurde und kein eigenes CSS die pointer-events auf Amber-Optionen überschreibt.

Bekannte Limitierungen

Diese Einschränkungen sind aktuell bekannt und technisch bedingt — sie lassen sich nicht über Konfiguration lösen:

• Kategorie-Listings — das Plugin wirkt ausschließlich auf der Produktdetailseite. Listing-Boxen auf Kategorie- oder Startseiten zeigen weiterhin Shopwares Standard-Darstellung.
• Accessibility-Tweaks-Feature — auf Shopware 6.6 werden is-combinable / not-combinable CSS-Klassen nur gesetzt wenn das Feature-Flag ACCESSIBILITY_TWEAKS aktiv ist. Das Plugin kompensiert das durch ein Template-Override, was aber bei weiteren Theme-Overrides vom Shop-Betreiber kollidieren kann.
• Storefront-Cache — Farbänderungen greifen erst nach theme:compile plus cache:clear. Ein reiner Config-Save ohne Theme-Rebuild zeigt im Storefront weiterhin die alten Farben.

Update & Wartung

Aktualisieren

Neue Versionen erscheinen automatisch unter Erweiterungen → Meine Erweiterungen. Klicke dort auf Update — Shopware lädt die neue Version aus dem Store und installiert sie.

Danach einmal Theme kompilieren und Cache leeren:

bin/console theme:compile
bin/console cache:clear

Breaking Changes in Version 2.0.0

Version 2.0.0 ist das erste Release unter der Marke Novastrix UG (haftungsbeschränkt). Für dich als Shop-Betreiber entfallen alle manuellen Schritte — Shopware aktualisiert das Plugin über den Store, deine Einstellungen bleiben erhalten.

Betroffen sind nur Integratoren mit eigenem Code:

• PHP-Namespace: Pflaum\VariantDisplay\… heißt jetzt Novastrix\VariantDisplay\…. Wenn eigene Klassen Plugin-Services direkt per use einbinden, passe die Namespaces dort an.
• Composer-Paket: pflaum/variant-display heißt jetzt novastrix/variant-display. Ersetze den Paketnamen in deiner composer.json, falls du ihn dort referenzierst.
• Config-Prefix: System-Config-Keys heißen jetzt NovastrixVariantDisplay.config.* (vorher PflaumVariantDisplay.config.*). Wenn du Werte per system:config:get oder über eigene Imports setzt, passe den Prefix an.

Ab Version 2.0.0 folgt das Plugin Semantic Versioning: Breaking Changes erscheinen ausschließlich in Major-Releases.

Deinstallation

1. Im Admin öffnen: Erweiterungen → Meine Erweiterungen
2. Novastrix Varianten-Anzeige finden und Deaktivieren
3. Anschließend Deinstallieren anklicken

Was passiert mit deinen Daten?

Bei der Deinstallation fragt Shopware, ob User-Daten erhalten bleiben sollen:

• User-Daten behalten: Alle Config-Werte in system_config (NovastrixVariantDisplay.config.*) bleiben erhalten. Bei einer Neuinstallation stehen deine Farbeinstellungen wieder zur Verfügung.
• User-Daten löschen: Alle Config-Werte werden unwiderruflich aus system_config entfernt.

Das Plugin erstellt keine Custom Fields oder Custom Entities — der Storefront ändert sich nach Deinstallation automatisch zurück zum Shopware-Standard-Verhalten.

Changelog

Version 2.0.0 — 18.04.2026

Geändert:

• Erste offizielle Veröffentlichung unter der Marke Novastrix UG (haftungsbeschränkt) — damit freigegeben für Produktiv-Einsatz und den Shopware Store
• Einheitliches Plugin-Icon, Hersteller- und Support-Link sowie EULA
• Support läuft ab jetzt über das Kontaktformular
• Ab dieser Version gilt Semantic Versioning — Breaking Changes gibt es nur noch in Major-Releases

Breaking (nur für Integratoren):

• PHP-Namespace umbenannt zu Novastrix\VariantDisplay\…
• Composer-Paket umbenannt zu novastrix/variant-display
• System-Config-Prefix umbenannt zu NovastrixVariantDisplay.config.*

Shop-Betreiber müssen nichts manuell tun — das Update läuft über den Shopware Store, Einstellungen und Daten bleiben erhalten.

Version 1.1.0 — 11.04.2026

Hinzugefügt:

• Zwei Schalter im Bereich "Suche": "Varianten einzeln in der Suche anzeigen" und "Elternprodukte in der Suche anzeigen"
• ProductListingLoaderDecorator für konfigurierbares Such-Gruppierungsverhalten
• 10 Unit-Tests für den neuen Decorator

Geändert:

• Suche und Vorschläge können nun Varianten/Elternprodukte unterschiedlich behandeln. Kategorie-Listings bleiben unverändert.

Version 1.0.0 — 24.03.2026

Hinzugefügt:

• 3-Farben-Codierung (Grün/Amber/Blau) für Variantenauswahl
• Unterstützung für alle Darstellungsformen: Text, Farbmuster, Bilder, Dropdown
• Status-Badge (Punkt/Haken) an jeder Option
• Hover-Tooltip auf Amber-Optionen
• Verfügbarkeits-Legende unter dem Konfigurator
• Option, Gruppen mit nur einer verbleibenden Option auszublenden
• 16 konfigurierbare Farbvariablen
• Überschreibbare Legenden- und Tooltip-Texte
• Schwellenwert für minimale Gruppenanzahl (Standard: 3)
• Proper is-combinable / not-combinable CSS-Klassen auf Shopware 6.6
• Cleanup der Plugin-Konfiguration bei Uninstall (respektiert "Keep user data")
• Unit-Tests für VariantDisplaySubscriber und VariantDisplayStruct
• Deutsche (de-DE) und englische (en-GB) Snippet-Übersetzungen

Support & Kontakt

Fragen oder Probleme, die dir FAQ und Troubleshooting nicht beantworten?

→ Kontaktformular