DmfGuppyEmotionworldElements
DmfGuppyEmotionworldElements erweitert Shopware 6 um spezialisierte CMS-Elemente und -Blöcke für das Guppy-Theme. Es liefert eine umfangreiche Sammlung responsiver, barrierefreier und konfigurierbarer Komponenten für moderne E-Commerce-Storefronts.
Schnellinfo
| Composer-Paket | dmf/sw6-plugin-guppy-emotionworld-elements |
| Plugin-Klasse | Dmf\GuppyEmotionworldElements\DmfGuppyEmotionworldElements |
| Namespace | Dmf\GuppyEmotionworldElements |
| Shopware | ~6.7.0 (Versions-Matrix s.u.) |
| Pflicht-Dependency | dmf/sw6-guppy-theme: ^2.0 |
| Repository | theme-guppy / plugin-guppy-emotionworld-elements |
Versions-Matrix
| Plugin-Version | Shopware-Range |
|---|---|
| 1.2 | ≥ 6.5.0 < 6.6.9 |
| 1.3 | ≥ 6.6.9 < 6.8.0 |
| 2.0 | ≥ 6.7.0 |
Installation
composer require dmf/sw6-plugin-guppy-emotionworld-elements
bin/console plugin:refresh
bin/console plugin:install --activate DmfGuppyEmotionworldElements
bin/console cache:clearNach Installation stehen alle CMS-Elemente direkt im Shopping-Experience-Editor zur Verfügung.
Inhaltsverzeichnis
CMS-Elemente im Detail
1. Accordion-Element
Verwendung: FAQ-Sektionen, strukturierte Inhalte.
Vollständig konfigurierbares Accordion mit Schema.org-Strukturierung für optimale SEO und Barrierefreiheit.
Features
- SEO-optimiert mit strukturierten Daten
- Flexible Öffnungslogik (einzeln oder mehrfach)
- Individuelle Farbgestaltung pro Item
- Responsive Design
- Skip-Links und Screen-Reader-Support
- Vertikale Ausrichtung konfigurierbar
Konfiguration
Accordion-Items:
- Überschrift: Titel des aufklappbaren Bereichs
- Überschrift-Stil: H1–H6
- Inhalt: Text beim Aufklappen
- Hintergrundfarbe: Inhaltsbereich
- Titel-Hintergrundfarbe: klickbarer Bereich
- Textfarbe: Überschrift und Inhalt
- Standardzustand: beim Laden offen oder geschlossen
Allgemein:
- Mehrere Items offen: gleichzeitiges Öffnen erlauben
- Vertikale Ausrichtung: oben, zentriert, unten
- Skip-Link: Toggle + Skip-Link-Text
2. Banner-Element
Verwendung: Hero-Banner, Call-to-Action.
Vielseitiges Banner-Element mit vollständiger Responsive-Unterstützung und erweiterten Styling-Optionen.
Features
- Responsive Höhenanpassung
- 9 Textpositionen
- Overlay-Unterstützung
- Mehrere Buttons
- Vollständige Barrierefreiheit (Alt-Texte, ARIA-Labels)
- Container-Optionen für Seitenbreiten
Konfiguration
Hintergrund und Bild: Hintergrundfarbe, Hintergrundbild, Bild-Alt-Text, Dekoratives-Bild-Flag. Layout und Größe: Container-Breite (Volle/Container), Höhe pro Viewport (Smartphone/Tablet/Desktop). Text und Inhalt: Überschrift, Überschrift-Stil, Beschreibung, Textposition (9), Textausrichtung, maximale Textbreite. Overlay und Farben: Overlay-Hintergrund, Overlay-Textfarbe, Nur-Text-Overlay. Buttons: Text, Ziel, Neuer Tab, Stil. Barrierefreiheit: Skip-Link + Skip-Link-Text.
3. Category-Card-Element
Verwendung: Kategorievorschau, Navigation.
Spezialisiertes Element für Kategorien-Karten mit Lazy-Loading und automatischer Thumbnail-Generierung.
Features
- Automatisches Lazy-Loading
- Responsive Bildanpassung
- SEO-optimierte Verlinkung
- Einheitliches Guppy-Design
- Optimierte Performance
Konfiguration
- Kategorie: aus dem Kategoriebaum wählen
- Bildanpassung: Einpassen (vollständig, ggf. Ränder) oder Ausfüllen (formatfüllend, ggf. beschnitten)
4. Category-Slider-Element
Verwendung: Kategorien-Karussell, Navigationsslider.
Performanter Slider für mehrere Kategorien im Karussell-Format.
Features
- Responsive Slider
- Autoplay mit konfigurierbarer Geschwindigkeit
- Intelligente Duplikatentfernung
- Endlosschleife oder Rewind
- Navigationspunkte
Konfiguration
Kategorie-Auswahl: mehrere Kategorien, optionales automatisches Laden der Unterkategorien (1. Ebene), Duplikate entfernen. Slider-Verhalten: Anzahl pro Viewport (Desktop/Tablet/Smartphone), Autoplay-Toggle, Geschwindigkeit, Verweilzeit. Navigation: Endlosschleife, Rewind, Navigationspunkte, Kategorien pro Klick. Verlinkung: Link-Ziel (gleiches Fenster oder neuer Tab). Barrierefreiheit: Skip-Link + Skip-Link-Text.
5. Guppy-Card-Element
Verwendung: Inhaltskarten, Teaser.
Themenspezifisches Karten-Element mit erweiterten Gestaltungsmöglichkeiten im Guppy-Design.
Features
- Themenspezifisches Design
- Flexible Button-Konfiguration
- Overlay-Unterstützung
- Responsive Medienintegration
- Vollständige Barrierefreiheit
Konfiguration
Hintergrund und Bild: Hintergrundfarbe, Hintergrundbild, Bild-Alt-Text, Dekoratives-Bild-Flag. Text und Inhalt: Überschrift, Überschrift-Stil, Beschreibung, Textposition, Textausrichtung, Textfarbe. Buttons: Text, Ziel, Neuer Tab, Stil.
6. Image-Text-Slider-Element
Verwendung: Komplexe Slider mit Text-Bild-Kombinationen.
Hochkonfigurierbarer Slider für Inhalte mit Bild- und Textkomponenten.
Features
- Komplexe Inhalte (Text, Bild, Buttons)
- Individuelle Overlay-Einstellungen pro Item
- Responsive Slider
- Erweiterte Button-Funktionalität
- Flexible Textpositionierung
Konfiguration
Slider-Items: Aktivieren-Toggle, Hintergrundfarbe, Hintergrundbild, Überschrift, Überschrift-Stil, Beschreibung, Textposition, Textausrichtung, Textfarbe. Slider-Einstellungen: Anzahl pro Viewport, Autoplay-Toggle, Geschwindigkeit, Verweilzeit, Endlosschleife, Navigationspunkte. Barrierefreiheit: Skip-Link + Skip-Link-Text.
7. Product-Details-Accordion-Element
Verwendung: Produktdetailseite, strukturierte Produktinformationen.
Spezialisiertes Accordion zur übersichtlichen Darstellung von Produktdetails.
Features
- Automatische Produktdaten-Integration
- Strukturierte Darstellung aller Produkteigenschaften
- Konfigurierbare Anfangszustände
- Responsive
- SEO-optimiert
Konfiguration
- Produkt: anzuzeigendes Produkt wählen
- Überschrift-Stil: H-Größe der Bereichs-Überschriften
- Standardzustand: alle geschlossen / erster Bereich offen / alle offen
- Skip-Link: Toggle + Skip-Link-Text
8. Slides-Element
Verwendung: Universeller Slider, Hero-Bereiche.
Das umfangreichste und flexibelste Slider-Element für alle Hero-/Slide-Use-Cases.
Features
- Vollständige Slide-Anpassung
- Responsive Höhen
- Erweiterte Overlay-Optionen
- Container-Flexibilität
- Mehrere Buttons pro Slide
Konfiguration
Slide-Inhalt: Aktivieren-Toggle, Hintergrundfarbe, Hintergrundbild, Überschrift, Überschrift-Stil, Beschreibung, maximale Textbreite. Text-Positionierung: 9 Positionen, Textausrichtung. Overlay: Overlay-Hintergrund, Overlay-Textfarbe, Nur-Text-Overlay. Slide-Höhen: pro Viewport (Smartphone/Tablet/Desktop). Slider-Verhalten: Autoplay, Geschwindigkeit, Verweilzeit, Endlosschleife, Container-Breite. Buttons: Text, Ziel, Neuer Tab, Stil, mehrere Buttons pro Slide möglich.
9. Cross-Selling-Element
Verwendung: Produktempfehlungen, Zusatzverkäufe.
Erweiterte Cross-Selling-Funktionalität.
Konfiguration
Produktanzahl pro Viewport (Smartphone/Tablet/Desktop), Anordnung (Untereinander statt nebeneinander), Skip-Link + Skip-Link-Text.
10. Image-Gallery-Element
Verwendung: Bildergalerien, Produktbilder.
Erweiterte Bildergalerie mit „Mehr anzeigen“-Funktion.
Konfiguration
Gitteransicht-Toggle, maximale Bildanzahl, „Mehr anzeigen“-Funktion, Skip-Link + Skip-Link-Text.
11. Product-Slider-Element
Verwendung: Produktkarussells, Empfehlungen.
Spezialisierter Slider für Produkte im Karussell-Format.
Konfiguration
Produktanzahl pro Viewport (Smartphone/Tablet/Desktop), Skip-Link + Skip-Link-Text.
12. Video-Element
Verwendung: Video-Wiedergabe.
Konfiguration
Video-Einstellungen: Loop, Stumm. Google strukturierte Daten: Videobeschreibung.
Übergreifende Funktionen
Barrierefreiheit
- Skip-Links in allen Elementen
- Screen-Reader-Beschreibungen
- Automatisches Fokus-Management
- Responsive Design
SEO
- Strukturierte Daten
- Semantische HTML-Struktur
- Optimierte Ladezeiten via Bild-Optimierung
- Rich-Snippet-Vorbereitung
Performance
- Lazy-Loading
- Optimierte JavaScript-Funktionen
- Responsive Images
- Caching-Strategien
Hinweise
Theme-Voraussetzung
DmfGuppyEmotionworldElements setzt ein aktives Guppy-Theme (dmf/sw6-guppy-theme: ^2.0) voraus. Ohne Guppy-Theme rendern die Elemente nicht korrekt, das Plugin nutzt zentrale SCSS-Tokens und Twig-Includes des Themes.
Splide-Slider-Dependency
Die Slider-basierten Elemente konsumieren DmfSplideSlider. Es muss aktiv sein, damit Slider-Elemente auf der Storefront laufen.