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	guppy / plugin-guppy-emotionworld-elements
Changelog	Alle Releases

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:clear

Nach Installation stehen alle CMS-Elemente direkt im Shopping-Experience-Editor zur Verfügung.

Inhaltsverzeichnis

• Schnellinfo
  • Versions-Matrix
• Installation
• Inhaltsverzeichnis
• CMS-Elemente im Detail
  • 1. Accordion-Element
  • 2. Banner-Element
  • 3. Category-Card-Element
  • 4. Category-Slider-Element
  • 5. Guppy-Card-Element
  • 6. Image-Text-Slider-Element
  • 7. Product-Details-Accordion-Element
  • 8. Slides-Element
  • 9. Cross-Selling-Element
  • 10. Image-Gallery-Element
  • 11. Product-Slider-Element
  • 12. Video-Element
  • 13. Product-Highlights-Element
• Arbeiten im Page Builder
  • Geräte-Ansicht
  • Live-Vorschau statt Platzhalter
  • Konfiguration in Karten
• Übergreifende Funktionen
  • Button-Klassen
  • Barrierefreiheit
  • SEO
  • Performance
• Hinweise

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, Bildskalierung (object-fit). Text und Inhalt: Überschrift, Überschrift-Stil, Beschreibung, Textposition, Textausrichtung, Textfarbe. Bildausrichtung: unabhängig vom Text ausrichtbar (Toggle), Bildposition. 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.

13. Product-Highlights-Element

Verwendung: Produktbilder mit erklärenden Hotspots, Feature-Darstellung.

Ein Bild mit nummerierten Markern darauf. Klickt ein Besucher einen Marker an, klappt der zugehörige Teaser mit Überschrift und Text auf.

Features

• Hotspots per Drag-and-drop direkt auf dem Vorschaubild platzieren
• Position wird je Hotspot als X/Y-Wert gespeichert
• Teaser-Inhalt mit eigener Überschrift und H-Tag pro Hotspot
• Hotspot-Farbe invertierbar für helle und dunkle Bilder
• Bild wird eingepasst statt beschnitten

Konfiguration

Hintergrund: Hintergrundbild (Pflicht), Alt-Text, Hintergrundfarbe. Die Farbe füllt die Fläche hinter dem Bild, sichtbar durch transparente Bereiche eines PNGs und rundherum, weil das Bild eingepasst und nicht beschnitten wird. Hotspots: pro Eintrag Überschrift, H-Tag, Styling, Teaser-Inhalt sowie X- und Y-Position. Hotspot-Positionierung: Zieh einen nummerierten Marker auf das Vorschaubild. Ohne hochgeladenes Hintergrundbild bleibt die Vorschau leer, lade das Bild also zuerst im Tab Hintergrund hoch. Anzeige: Hotspot-Farbe invertieren, erstes Element geöffnet.

Arbeiten im Page Builder

Mit Version 2.3.0 wurde die Bedienung aller Elemente im Erlebniswelten-Editor überarbeitet.

Geräte-Ansicht

Der Umschalter für Smartphone, Tablet und Desktop wirkt jetzt auch auf die Element-Canvas. Stellst du eine Höhe oder eine Anzahl pro Viewport ein, siehst du das Ergebnis direkt in der passenden Ansicht, statt es auf der Storefront prüfen zu müssen.

Live-Vorschau statt Platzhalter

Die Element- und Block-Vorschauen sind keine statischen SVG-Grafiken mehr, sondern HTML- und CSS-Mockups. Jede Canvas rendert live aus der Konfiguration des Elements: was du im Konfigurationsdialog änderst, steht sofort in der Vorschau.

Hat ein Banner oder eine Guppy-Card noch kein Bild, zeigt die Canvas keine graue Bildfläche, sondern nur einen kleinen Hinweis Kein Bild ausgewählt in der oberen rechten Ecke. Das Layout bleibt so, wie es auf der Storefront ohne Bild aussieht.

Konfiguration in Karten

Die geteilten Konfigurations-Tabs sind in aufklappbare Karten unterteilt. Statt einer langen Feldliste pro Tab siehst du zusammengehörige Felder gruppiert und klappst auf, was du gerade brauchst.

Übergreifende Funktionen

Button-Klassen

Im Banner-, Guppy-Card-, Slides- und Image-Text-Slider-Element kannst du pro Button eine Klasse im Feld Button Klasse setzen. Die Basisklasse btn setzt das Template selbst, du trägst nur die Variante ein. Bleibt das Feld leer, rendert der Button als btn-primary.

Variante	Klasse
Primary (Standard)	btn-primary
Secondary	btn-secondary
Success	btn-success
Danger	btn-danger
Warning	btn-warning
Info	btn-info
Light	btn-light
Dark	btn-dark
Link	btn-link
Outline	btn-outline-primary, btn-outline-secondary, ...

Dazu kommen die Größenklassen btn-sm und btn-lg. Das Feld nimmt freien Text, du kannst Variante und Größe also kombinieren:

btn-outline-primary btn-lg

Guppy-Anpassungen

Guppy überschreibt die Styles einiger Bootstrap-Varianten, unter anderem btn-light, btn-link und die Mindesthöhe von btn-sm. Das Aussehen kann daher von der Bootstrap-Standarddarstellung abweichen.

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.