Verwendungsanleitung#

Diese Anleitung erklärt, wie Sie die Farbanzeigefunktionalität in Ihrem Shopware-Shop einrichten und verwenden.

Einrichtung von Produkteigenschaften#

Schritt 1: Eigenschaftsgruppen erstellen#

Navigieren Sie zu Kataloge > Eigenschaften in Ihrer Shopware Administration
Klicken Sie auf Eigenschaftsgruppe hinzufügen
Geben Sie einen Namen für Ihre Farb-Eigenschaftsgruppe ein (z.B. "Produktfarben", "Hauptfarbe", "Akzentfarbe")
Konfigurieren Sie die Gruppeneinstellungen:
Anzeigetyp: Wählen Sie, wie Eigenschaften in Filtern angezeigt werden sollen
Sortierungstyp: Legen Sie fest, wie Farboptionen sortiert werden sollen
Filterbar: Aktivieren Sie dies, wenn Kunden nach Farben filtern können sollen

Schritt 2: Farbeigenschaften hinzufügen#

Öffnen Sie Ihre neu erstellte Eigenschaftsgruppe
Klicken Sie auf Eigenschaft hinzufügen, um einzelne Farboptionen hinzuzufügen
Für jede Farbeigenschaft:
Name: Geben Sie den Farbnamen ein (z.B. "Rot", "Blau", "Waldgrün")
Farb-Hex-Code: Setzen Sie optional einen spezifischen Hex-Code (dies überschreibt die integrierten Farben des Plugins)
Position: Legen Sie die Anzeigereihenfolge fest
Medien: Fügen Sie optional ein Farbmuster-Bild hinzu

Schritt 3: Plugin-Einstellungen konfigurieren#

Gehen Sie zu Erweiterungen > Meine Erweiterungen > Topdata Colors > Konfigurieren
Wählen Sie im Feld Farben Eigenschaften die von Ihnen erstellten Eigenschaftsgruppen aus
Konfigurieren Sie andere Einstellungen nach Bedarf (siehe Konfigurationseinstellungen-Anleitung)
Speichern Sie die Konfiguration

Schritt 4: Eigenschaften zu Produkten zuweisen#

Bearbeiten Sie ein Produkt unter Kataloge > Produkte
Gehen Sie zum Tab Eigenschaften
Wählen Sie die entsprechenden Farbeigenschaften für dieses Produkt aus
Speichern Sie das Produkt

Verstehen der Farbanzeige-Logik#

Grundlegende Farbzuordnung#

Das Plugin ordnet Eigenschaftsnamen automatisch Farben zu über: 1. Integrierte Farbdatenbank (200+ vordefinierte Farben) 2. Eigenschafts-Hex-Codes (falls in der Eigenschaftskonfiguration gesetzt) 3. Benutzerdefinierte Farbüberschreibungen (in der Plugin-Konfiguration definiert)

Farbnamen-Zuordnung#

Farbnamen werden case-insensitiv zugeordnet. Diese funktionieren alle gleich: - "Rot" → entspricht der integrierten roten Farbe - "rot" → entspricht der integrierten roten Farbe
- "ROT" → entspricht der integrierten roten Farbe

Mehrfarben-Syntax#

Das Plugin unterstützt erweiterte Farbkombinationen:

Anzahl-Präfixe#

3x rot → Zeigt 3 rote Punkte an
2x blau → Zeigt 2 blaue Punkte an

Farbkombinationen#

rot+blau → Zeigt rote und blaue Punkte zusammen an
rot/blau → Alternative Syntax für Farbkombinationen
rot+blau+grün → Zeigt drei Farben zusammen an

Komplexe Beispiele#

2x rot+blau → Zeigt 2 Kombinationspunkte an (jeweils mit rot und blau)
3x mehrfarbig → Zeigt 3 mehrfarbige Punkte an
rot, blau, grün → Zeigt separate Farbgruppen an (kommagetrennt)

Produkteinrichtungsbeispiele#

Beispiel 1: Einfaches einfarbiges Produkt#

Produkt: Rotes T-Shirt Eigenschaftszuweisung: "Rot" aus der Gruppe "Produktfarben" Ergebnis: Einzelner roter Punkt wird angezeigt

Beispiel 2: Mehrfarbiges Produkt#

Produkt: Gestreiftes Hemd Eigenschaftszuweisung: "Rot+Blau" aus der Gruppe "Produktfarben" Ergebnis: Rote und blaue Punkte werden zusammen angezeigt

Beispiel 3: Produkt mit mehreren Farboptionen#

Produkt: In mehreren Farben verfügbar Eigenschaftszuweisung: "Rot", "Blau", "Grün" aus der Gruppe "Produktfarben" Ergebnis: Drei separate Farbpunkte werden angezeigt

Beispiel 4: Produkt mit Farbvariationen#

Produkt: Jacke mit Akzentfarben Eigenschaftszuweisung: - "Schwarz" aus der Gruppe "Hauptfarbe" - "Rot" aus der Gruppe "Akzentfarbe" Ergebnis: Schwarzer Punkt und roter Punkt werden angezeigt

Best Practices#

Eigenschaftsbenennung#

Verwenden Sie Standardfarbnamen wenn möglich (rot, blau, grün, etc.)
Seien Sie konsistent in Ihrem Produktkatalog
Verwenden Sie beschreibende Namen für benutzerdefinierte Farben (z.B. "Waldgrün" statt "Grün1")
Berücksichtigen Sie Übersetzungen wenn Sie in mehreren Sprachen operieren

Organisation von Eigenschaftsgruppen#

Erstellen Sie spezifische Gruppen für verschiedene Farbtypen:
"Hauptfarbe" für primäre Produktfarben
"Akzentfarbe" für sekundäre Farben
"Musterfarben" für mehrfarbige Muster
Halten Sie Gruppen fokussiert - mischen Sie Farbeigenschaften nicht mit anderen Attributen
Verwenden Sie klare Benennung, die für Ihr Team sinnvoll ist

Farbüberschreibungsstrategie#

Beginnen Sie mit integrierten Farben bevor Sie benutzerdefinierte Überschreibungen hinzufügen
Dokumentieren Sie benutzerdefinierte Farben für Ihr Team
Verwenden Sie Hex-Codes konsistent (#ff0000 Format)
Testen Sie Farbkombinationen bevor Sie live gehen

Anzeigeorte#

Farben erscheinen automatisch in:

Produktlistenseiten#

Kategorienseiten
Suchergebnisse
Markenseiten
Tag-Seiten

Produktdetailseiten#

Hauptproduktinformationsbereich
Variantenauswahl (falls zutreffend)

Cross-Selling-Bereiche#

Verwandte Produkte
Empfohlene Produkte
Kürzlich angesehene Produkte

Vergleichsfunktionen#

Produktvergleichs-Popups
Wunschlistenanzeigen

Fehlerbehebung häufiger Probleme#

Farben erscheinen nicht#

Überprüfen Sie die Eigenschaftsgruppenauswahl in der Plugin-Konfiguration
Überprüfen Sie die Eigenschaftszuweisung zu Produkten
Leeren Sie den Cache nach Konfigurationsänderungen
Überprüfen Sie die Farbnamen-Schreibweise gegen die integrierte Datenbank

Falsche Farben werden angezeigt#

Überprüfen Sie Eigenschaftsnamen gegen Farbdatenbankeinträge
Überprüfen Sie benutzerdefinierte Farbüberschreibungen auf Konflikte
Überprüfen Sie Eigenschafts-Hex-Codes in der Eigenschaftskonfiguration
Testen Sie mit einfachen Farbnamen zuerst

Performance-Optimierung#

Begrenzen Sie Eigenschaftsgruppen auf nur die für Farben benötigten
Verwenden Sie einfache Farbnamen statt komplexer Überschreibungen wenn möglich
Vermeiden Sie übermäßige benutzerdefinierte SVG-Komplexität
Überwachen Sie Seitenladezeiten bei vielen Farbeigenschaften

Erweiterte Verwendung#

Benutzerdefinierte Farbdefinitionen#

Für Farben, die nicht in der integrierten Datenbank enthalten sind, fügen Sie sie zu den Farbüberschreibungen hinzu:

firmen-blau|#1e3a8a
marken-rot|#dc2626
benutzerdefiniert-grün|#059669

Muster- und Verlaufsfarben#

Erstellen Sie spezielle visuelle Effekte:

regenbogen|linear-gradient(45deg, #ff0000, #00ff00, #0000ff)
streifen|repeating-linear-gradient(45deg, #000, #000 2px, #fff 2px, #fff 4px)

Mehrsprachige Unterstützung#

Definieren Sie Farbnamen in mehreren Sprachen:

rot|#ff0000
rouge|#ff0000
rojo|#ff0000

Integration mit Themes#

Das Plugin funktioniert mit den meisten Shopware-Themes. Falls Sie das Erscheinungsbild anpassen müssen:

Überschreiben Sie Templates in Ihrem Theme falls nötig
Fügen Sie benutzerdefiniertes CSS hinzu, um Farbanzeigen zu stylen
Verwenden Sie bereitgestellte CSS-Klassen für das Styling:
.topdata-color - Hauptcontainer
.color - Einzelne Farbelemente
.group - Farbgruppen-Container

Testen Ihrer Einrichtung#

Erstellen Sie Testprodukte mit verschiedenen Farbkombinationen
Überprüfen Sie verschiedene Seitentypen (Listing, Detail, Suche)
Testen Sie mit verschiedenen Geräten und Bildschirmgrößen
Überprüfen Sie die Farbgenauigkeit entspricht Ihren Erwartungen
Testen Sie die Performance mit realistischen Produktkatalogen

Durch das Befolgen dieser Anleitung sollten Sie in der Lage sein, die Farbanzeigefunktionalität erfolgreich in Ihrem Shopware-Shop zu implementieren und zu verwenden.