DmfGuppyEmotionworldElements
Übersicht
Das DmfGuppyEmotionworldElements Plugin erweitert Shopware 6 um spezialisierte CMS-Elemente und -Blöcke für das Guppy-Theme. Es bietet eine umfangreiche Sammlung von responsiven, barrierefreien und konfigurierbaren Komponenten für moderne E-Commerce-Websites.
Inhaltsverzeichnis
CMS-Elemente im Detail
1. Accordion Element
Verwendung: FAQ-Sektionen, strukturierte Inhalte
Beschreibung:
Ein vollständig konfigurierbares Accordion-Element mit Schema.org-Strukturierung für optimale SEO und Barrierefreiheit.
Features:
- ✅ SEO-optimiert mit strukturierten Daten für Suchmaschinen
- ✅ Flexible Öffnungslogik - Items können einzeln oder mehrfach geöffnet werden
- ✅ Individuelle Farbgestaltung für Titel und Inhalte jedes Items
- ✅ Responsive Design passt sich automatisch an alle Bildschirmgrößen an
- ✅ Barrierefreiheit mit Skip-Links und Screen Reader-Unterstützung
- ✅ Vertikale Ausrichtung des gesamten Accordions konfigurierbar
Konfigurationsmöglichkeiten:
Accordion-Items:
- Überschrift: Titel des aufklappbaren Bereichs
- Überschrift-Stil: Wählen Sie zwischen verschiedenen Überschrift-Größen (H1-H6)
- Inhalt: Der Text, der beim Aufklappen angezeigt wird
- Hintergrundfarbe: Farbe des Inhaltsbereichs
- Titel-Hintergrundfarbe: Farbe des klickbaren Titel-Bereichs
- Textfarbe: Farbe für Überschrift und Inhaltstext
- Standardzustand: Bestimmen Sie, ob ein Item beim Laden bereits geöffnet ist
Allgemeine Einstellungen:
- Mehrere Items offen: Erlauben Sie das gleichzeitige Öffnen mehrerer Bereiche
- Vertikale Ausrichtung: Positionierung des Accordions (oben, zentriert, unten)
- Skip-Link: Aktivieren Sie einen "Überspringen"-Link für bessere Barrierefreiheit
- Skip-Link Text: Angezeigter Text für den Skip-Link
2. Banner Element
Verwendung: Hero-Banner, Call-to-Action-Bereiche
Beschreibung:
Ein vielseitiges Banner-Element mit vollständiger Responsive-Unterstützung und erweiterten Styling-Optionen.
Features:
- ✅ Responsive Höhenanpassung für optimale Darstellung auf allen Geräten
- ✅ Flexible Textpositionierung - platzieren Sie Text an 9 verschiedenen Positionen
- ✅ Overlay-Unterstützung für bessere Textlesbarkeit über Bildern
- ✅ Mehrere Buttons mit individueller Gestaltung und Zielverknüpfung
- ✅ Vollständige Barrierefreiheit mit Alt-Texten und ARIA-Labels
- ✅ Container-Optionen für verschiedene Seitenbreiten
Konfigurationsmöglichkeiten:
Hintergrund & Bild:
- Hintergrundfarbe: Grundfarbe des Banners
- Hintergrundbild: Wählen Sie ein Bild aus der Mediathek
- Bild-Alt-Text: Beschreibung des Bildes für Screen Reader
- Dekoratives Bild: Markieren Sie reine Schmuckbilder
Layout & Größe:
- Container-Breite: Volle Breite oder in Container eingeschränkt
- Höhe Smartphone: Mindesthöhe auf mobilen Geräten
- Höhe Tablet: Mindesthöhe auf Tablets
- Höhe Desktop: Mindesthöhe auf Desktop-Computern
Text & Inhalt:
- Überschrift: Haupttitel des Banners
- Überschrift-Stil: Größe und Stil der Überschrift
- Beschreibungstext: Zusätzlicher Informationstext
- Textposition: Wo der Text im Banner erscheinen soll (9 Positionen)
- Textausrichtung: Links, zentriert oder rechts ausgerichtet
- Maximale Textbreite: Begrenzung der Textbreite für bessere Lesbarkeit
Overlay & Farben:
- Overlay-Hintergrund: Farbige Ebene über dem Hintergrundbild
- Overlay-Textfarbe: Farbe für Text über dem Overlay
- Nur Text-Overlay: Overlay nur um den Text, nicht über das gesamte Banner
Buttons:
- Button-Text: Beschriftung der Schaltfläche
- Button-Ziel: Verknüpfung zu interner Seite oder externer URL
- Neuer Tab: Link in neuem Browser-Tab öffnen
- Button-Stil: Auswahl verschiedener Button-Designs
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen des Banners
- Skip-Link Text: Angezeigter Text für den Skip-Link
3. Category Card Element
Verwendung: Kategorievorschau, Navigationselemente
Beschreibung:
Ein spezialisiertes Element für die ansprechende Darstellung von Kategorien mit optimierter Performance.
Features:
- ✅ Automatisches Lazy Loading für bessere Ladezeiten
- ✅ Responsive Bildanpassung passt sich automatisch an
- ✅ SEO-optimierte Verlinkung zu Kategorieseiten
- ✅ Einheitliches Design im Guppy-Theme-Stil
- ✅ Optimierte Performance durch automatische Thumbnail-Generierung
Konfigurationsmöglichkeiten:
Kategorie-Auswahl:
- Kategorie: Wählen Sie die anzuzeigende Kategorie aus dem Kategoriebaum
- Bildanpassung: Bestimmen Sie, wie das Kategoriebild angezeigt wird:
- Einpassen: Bild wird vollständig angezeigt, kann Ränder haben
- Ausfüllen: Bild füllt den gesamten Bereich aus, kann beschnitten werden
4. Category Slider Element
Verwendung: Kategoriekarussell, Navigationsslider
Beschreibung:
Ein performanter Slider zur Darstellung mehrerer Kategorien in einem Karussell-Format.
Features:
- ✅ Responsive Slider passt sich automatisch an Bildschirmgröße an
- ✅ Autoplay-Funktion mit konfigurierbarer Geschwindigkeit
- ✅ Intelligente Duplikatentfernung verhindert doppelte Kategorien
- ✅ Flexible Navigation mit Endlosschleife oder Zurückspulen
- ✅ Benutzerfreundliche Bedienung mit Navigationspunkten
Konfigurationsmöglichkeiten:
Kategorie-Auswahl:
- Kategorien: Wählen Sie mehrere Kategorien für den Slider aus
- Duplikate entfernen: Automatisches Entfernen von doppelt ausgewählten Kategorien
Slider-Verhalten:
- Anzahl Desktop: Wie viele Kategorien gleichzeitig auf großen Bildschirmen angezeigt werden
- Anzahl Tablet: Anzahl der sichtbaren Kategorien auf Tablets
- Anzahl Smartphone: Anzahl der sichtbaren Kategorien auf Smartphones
- Automatisches Abspielen: Slider wechselt automatisch zwischen Kategorien
- Geschwindigkeit: Wie schnell der Übergang zwischen Slides erfolgt
- Verweilzeit: Wie lange eine Kategorie angezeigt wird (bei Autoplay)
Navigation:
- Endlosschleife: Nach der letzten Kategorie geht es zur ersten weiter
- Zurückspulen: Am Ende springt der Slider zurück zum Anfang
- Navigationspunkte: Punkte zur direkten Auswahl einer Kategorie anzeigen
- Kategorien pro Klick: Wie viele Kategorien bei einem Klick weitergeschaltet werden
Verlinkung:
- Link-Ziel: Wo sich die Kategorieseite öffnet (gleiches Fenster oder neuer Tab)
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen des Sliders
- Skip-Link Text: Angezeigter Text für den Skip-Link
5. Guppy Card Element
Verwendung: Spezielle Inhaltskarten, Teaser-Bereiche
Beschreibung:
Ein themenspezifisches Kartenlement mit erweiterten Gestaltungsmöglichkeiten im Guppy-Design.
Features:
- ✅ Themenspezifisches Design perfekt abgestimmt auf das Guppy-Theme
- ✅ Flexible Button-Konfiguration mit verschiedenen Stilen
- ✅ Overlay-Unterstützung für bessere Textlesbarkeit
- ✅ Responsive Medienintegration für alle Bildschirmgrößen
- ✅ Vollständige Barrierefreiheit mit Alt-Texten und ARIA-Labels
Konfigurationsmöglichkeiten:
Hintergrund & Bild:
- Hintergrundfarbe: Grundfarbe der Karte
- Hintergrundbild: Wählen Sie ein Bild aus der Mediathek
- Bild-Alt-Text: Beschreibung des Bildes für Screen Reader
- Dekoratives Bild: Markieren Sie reine Schmuckbilder
Text & Inhalt:
- Überschrift: Haupttitel der Karte
- Überschrift-Stil: Größe und Stil der Überschrift
- Beschreibungstext: Zusätzlicher Informationstext
- Textposition: Horizontale Ausrichtung des Textes
- Textausrichtung: Links, zentriert oder rechts ausgerichtet
- Textfarbe: Farbe für Überschrift und Beschreibungstext
Buttons:
- Button-Text: Beschriftung der Schaltfläche
- Button-Ziel: Verknüpfung zu interner Seite oder externer URL
- Neuer Tab: Link in neuem Browser-Tab öffnen
- Button-Stil: Auswahl verschiedener Button-Designs
6. Image Text Slider Element
Verwendung: Komplexe Slider mit Text-Bild-Kombinationen
Beschreibung:
Ein hochkonfigurierbarer Slider für die Darstellung von Inhalten mit Bild- und Textkomponenten.
Features:
- ✅ Komplexe Inhaltserstellung mit Text-, Bild- und Button-Kombinationen
- ✅ Individuelle Overlay-Einstellungen für jedes Slider-Element
- ✅ Responsive Slider-Verhalten für alle Bildschirmgrößen
- ✅ Erweiterte Button-Funktionalität mit verschiedenen Stilen
- ✅ Flexible Textpositionierung für optimale Lesbarkeit
Konfigurationsmöglichkeiten:
Slider-Items:
- Slider-Element aktivieren: Ein- oder Ausschalten einzelner Slider-Items
- Hintergrundfarbe: Farbe des Slider-Items
- Hintergrundbild: Wählen Sie ein Bild aus der Mediathek
- Überschrift: Titel des Slider-Items
- Überschrift-Stil: Größe und Stil der Überschrift
- Beschreibungstext: Zusätzlicher Informationstext
- Textposition: Wo der Text im Slider-Item erscheinen soll
- Textausrichtung: Links, zentriert oder rechts ausgerichtet
- Textfarbe: Farbe für Überschrift und Beschreibungstext
Slider-Einstellungen:
- Anzahl Desktop: Wie viele Items gleichzeitig auf großen Bildschirmen angezeigt werden
- Anzahl Tablet: Anzahl der sichtbaren Items auf Tablets
- Anzahl Smartphone: Anzahl der sichtbaren Items auf Smartphones
- Automatisches Abspielen: Slider wechselt automatisch zwischen Items
- Geschwindigkeit: Wie schnell der Übergang zwischen Slides erfolgt
- Verweilzeit: Wie lange ein Item angezeigt wird (bei Autoplay)
- Endlosschleife: Nach dem letzten Item geht es zum ersten weiter
- Navigationspunkte: Punkte zur direkten Auswahl eines Items anzeigen
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen des Sliders
- Skip-Link Text: Angezeigter Text für den Skip-Link
7. Product Details Accordion Element
Verwendung: Produktdetailseiten, strukturierte Produktinformationen
Beschreibung:
Spezialisiertes Accordion zur übersichtlichen Darstellung von Produktdetails und -eigenschaften.
Features:
- ✅ Automatische Produktdaten-Integration lädt Informationen direkt vom Produkt
- ✅ Strukturierte Darstellung aller Produkteigenschaften
- ✅ Konfigurierbare Anfangszustände bestimmen, welche Bereiche geöffnet sind
- ✅ Responsive Produktdarstellung für alle Bildschirmgrößen
- ✅ SEO-optimierte Produktinformationen für bessere Suchmaschinenrelevanz
Konfigurationsmöglichkeiten:
Produkt-Auswahl:
- Produkt: Wählen Sie das Produkt aus, dessen Details angezeigt werden sollen
- Überschrift-Stil: Größe und Stil der Überschriften in den Accordion-Bereichen
- Standardzustand: Bestimmen Sie, welcher Bereich beim Laden geöffnet ist:
- Alle geschlossen: Benutzer muss Bereiche manuell öffnen
- Erster Bereich offen: Der erste Bereich ist bereits aufgeklappt
- Alle offen: Alle Bereiche sind beim Laden sichtbar
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen der Produktdetails
- Skip-Link Text: Angezeigter Text für den Skip-Link
8. Slides Element
Verwendung: Universeller Slider, Hero-Bereiche
Beschreibung:
Das umfangreichste und flexibelste Slider-Element mit vollständiger Konfigurierbarkeit für alle Anwendungsfälle.
Features:
- ✅ Vollständige Slide-Anpassung mit allen verfügbaren Optionen
- ✅ Responsive Höhenanpassung für optimale Darstellung auf allen Geräten
- ✅ Erweiterte Overlay-Optionen für bessere Textlesbarkeit
- ✅ Container-Flexibilität für verschiedene Seitenbreiten
- ✅ Umfangreiche Button-Konfiguration mit mehreren Buttons pro Slide
Konfigurationsmöglichkeiten:
Slide-Inhalt:
- Slide aktivieren: Ein- oder Ausschalten einzelner Slides
- Hintergrundfarbe: Grundfarbe des Slides
- Hintergrundbild: Wählen Sie ein Bild aus der Mediathek
- Überschrift: Haupttitel des Slides
- Überschrift-Stil: Größe und Stil der Überschrift
- Beschreibungstext: Zusätzlicher Informationstext
- Maximale Textbreite: Begrenzung der Textbreite für bessere Lesbarkeit
Text-Positionierung:
- Textposition: Wo der Text im Slide erscheinen soll (9 Positionen)
- Textausrichtung: Links, zentriert oder rechts ausgerichtet
Overlay-Einstellungen:
- Overlay-Hintergrund: Farbige Ebene über dem Hintergrundbild
- Overlay-Textfarbe: Farbe für Text über dem Overlay
- Nur Text-Overlay: Overlay nur um den Text, nicht über das gesamte Slide
Slide-Höhen:
- Höhe Smartphone: Mindesthöhe auf mobilen Geräten
- Höhe Tablet: Mindesthöhe auf Tablets
- Höhe Desktop: Mindesthöhe auf Desktop-Computern
Slider-Verhalten:
- Automatisches Abspielen: Slider wechselt automatisch zwischen Slides
- Geschwindigkeit: Wie schnell der Übergang zwischen Slides erfolgt
- Verweilzeit: Wie lange ein Slide angezeigt wird (bei Autoplay)
- Endlosschleife: Nach dem letzten Slide geht es zum ersten weiter
- Container-Breite: Volle Breite oder in Container eingeschränkt
Buttons:
- Button-Text: Beschriftung der Schaltfläche
- Button-Ziel: Verknüpfung zu interner Seite oder externer URL
- Neuer Tab: Link in neuem Browser-Tab öffnen
- Button-Stil: Auswahl verschiedener Button-Designs
- Zusätzliche Buttons: Mehrere Buttons pro Slide möglich
9. Cross-Selling Element
Verwendung: Produktempfehlungen, Zusatzverkäufe
Beschreibung:
Erweiterte Cross-Selling-Funktionalität zur Darstellung von Produktempfehlungen mit konfigurierbaren Anzeigeoptionen.
Features:
- ✅ Responsive Produktanzahl passt sich automatisch an Bildschirmgröße an
- ✅ Flexible Anordnung der Produktempfehlungen
- ✅ Optimierte Performance für schnelle Ladezeiten
- ✅ Barrierefreie Navigation mit Skip-Link-Unterstützung
Konfigurationsmöglichkeiten:
Produktanzahl:
- Anzahl Smartphone: Wie viele Produkte gleichzeitig auf mobilen Geräten angezeigt werden
- Anzahl Tablet: Anzahl der sichtbaren Produkte auf Tablets
- Anzahl Desktop: Anzahl der sichtbaren Produkte auf Desktop-Computern
Anordnung:
- Untereinander anzeigen: Produkte werden vertikal statt horizontal angeordnet
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen der Produktempfehlungen
- Skip-Link Text: Angezeigter Text für den Skip-Link
10. Image Gallery Element
Verwendung: Bildergalerien, Produktbilder
Beschreibung:
Eine erweiterte Bildergalerie mit "Mehr anzeigen"-Funktionalität für große Bildsammlungen.
Features:
- ✅ Gitteransicht-Option für verschiedene Darstellungsformen
- ✅ Konfigurierbare Bildanzahl mit "Mehr anzeigen"-Funktion
- ✅ Interaktive Bedienung mit JavaScript-Integration
- ✅ Zoom-Funktionalität für Detailansichten der Bilder
Konfigurationsmöglichkeiten:
Darstellung:
- Gitteransicht: Bilder werden in einem gleichmäßigen Raster angezeigt
- Maximale Bildanzahl: Wie viele Bilder initial sichtbar sind
- Mehr anzeigen: Funktion zum Einblenden weiterer Bilder
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen der Bildergalerie
- Skip-Link Text: Angezeigter Text für den Skip-Link
11. Product Slider Element
Verwendung: Produktkarussells, Empfehlungen
Beschreibung:
Spezialisierter Slider für die ansprechende Darstellung von Produkten in einem Karussell-Format.
Features:
- ✅ Responsive Produktanzahl für optimale Darstellung auf allen Geräten
- ✅ Optimierte Produktdarstellung mit allen wichtigen Produktinformationen
- ✅ Performance-optimiert für schnelle Ladezeiten
- ✅ Barrierefreie Navigation mit Skip-Link-Unterstützung
Konfigurationsmöglichkeiten:
Produktanzahl:
- Anzahl Smartphone: Wie viele Produkte gleichzeitig auf mobilen Geräten angezeigt werden
- Anzahl Tablet: Anzahl der sichtbaren Produkte auf Tablets
- Anzahl Desktop: Anzahl der sichtbaren Produkte auf Desktop-Computern
Barrierefreiheit:
- Skip-Link: Ermöglicht das Überspringen des Produktsliders
- Skip-Link Text: Angezeigter Text für den Skip-Link
12. Video Element
Verwendung: Darstellung von Videos
Beschreibung:
Element zur Darstellung von Videodateien
Konfigurationsmöglichkeiten:
Video Einstellungen:
- Loop: Video wird automatisch wiederholt, sobald es durchgelaufen ist
- Stumm: Video wird initial standardmäßig stumm wiedergegeben
Google Strukturierte Daten:
- Videobeschreibung: für Google Strukturierte Daten
Zusätzliche Funktionen
Barrierefreiheit & Bedienfreundlichkeit:
- ✅ Skip-Links in allen Elementen für bessere Tastaturnavigation
- ✅ Screen Reader-Unterstützung mit aussagekräftigen Beschreibungen
- ✅ Automatisches Fokus-Management für optimale Bedienbarkeit
- ✅ Responsive Design funktioniert auf allen Geräten einwandfrei
SEO-Optimierungen:
- ✅ Strukturierte Daten für bessere Suchmaschinenrelevanz
- ✅ Semantische HTML-Struktur für optimale Indexierung
- ✅ Optimierte Ladezeiten durch intelligente Bild-Optimierung
- ✅ Rich Snippets für erweiterte Suchergebnisse
Performance & Benutzerfreundlichkeit:
- ✅ Lazy Loading lädt Inhalte nur bei Bedarf
- ✅ Optimierte JavaScript-Funktionen für flüssige Bedienung
- ✅ Responsive Images für alle Bildschirmgrößen
- ✅ Intelligente Caching-Strategien für bessere Performance
Technische Anforderungen
Mindestanforderungen:
- Shopware: Version 6.7.0 oder höher
- Guppy Theme: Version 2.0 oder höher
Installation:
Das Plugin wird über den Shopware-Plugin-Manager installiert und aktiviert. Nach der Installation stehen alle CMS-Elemente im Shopping Experience-Editor zur Verfügung.
bash
composer require dmf/sw6-plugin-guppy-emotionworld-elements
bin/console plugin:install --activate DmfGuppyEmotionworldElements
bin/console cache:clear