DmfGuppyEmotionworldElements
Overview
The DmfGuppyEmotionworldElements plugin extends Shopware 6 with specialized CMS elements and blocks for the Guppy Theme. It offers a comprehensive collection of responsive, accessible, and configurable components for modern e-commerce websites.
Table of Contents
CMS Elements in Detail
1. Accordion Element
Usage: FAQ sections, structured content
Description:
A fully configurable accordion element with Schema.org structuring for optimal SEO and accessibility.
Features:
- ✅ SEO-optimized with structured data for search engines
- ✅ Flexible opening logic - items can be opened individually or multiple at once
- ✅ Individual color customization for titles and content of each item
- ✅ Responsive design automatically adapts to all screen sizes
- ✅ Accessibility with skip links and screen reader support
- ✅ Vertical alignment of the entire accordion configurable
Configuration Options:
Accordion Items:
- Heading: Title of the collapsible area
- Heading Style: Choose between different heading sizes (H1-H6)
- Content: The text displayed when expanded
- Background Color: Color of the content area
- Title Background Color: Color of the clickable title area
- Text Color: Color for heading and content text
- Default State: Determine if an item is already open when loading
General Settings:
- Multiple Items Open: Allow simultaneous opening of multiple areas
- Vertical Alignment: Positioning of the accordion (top, center, bottom)
- Skip Link: Enable a "skip" link for better accessibility
- Skip Link Text: Displayed text for the skip link
2. Banner Element
Usage: Hero banners, call-to-action areas
Description:
A versatile banner element with full responsive support and extended styling options.
Features:
- ✅ Responsive height adjustment for optimal display on all devices
- ✅ Flexible text positioning - place text in 9 different positions
- ✅ Overlay support for better text readability over images
- ✅ Multiple buttons with individual styling and target linking
- ✅ Full accessibility with alt texts and ARIA labels
- ✅ Container options for different page widths
3. Category Card Element
Usage: Category previews, navigation elements
Description:
A specialized element for attractive category display with optimized performance.
Features:
- ✅ Automatic lazy loading for better loading times
- ✅ Responsive image adaptation adapts automatically
- ✅ SEO-optimized linking to category pages
- ✅ Consistent design in Guppy Theme style
- ✅ Optimized performance through automatic thumbnail generation
4. Category Slider Element
Usage: Category carousel, navigation slider
Description:
A performant slider for displaying multiple categories in a carousel format.
Features:
- ✅ Responsive slider automatically adapts to screen size
- ✅ Autoplay function with configurable speed
- ✅ Intelligent duplicate removal prevents duplicate categories
- ✅ Flexible navigation with infinite loop or rewind
- ✅ User-friendly operation with navigation dots
5. Guppy Card Element
Usage: Special content cards, teaser areas
Description:
A theme-specific card element with extended design options in Guppy design.
Features:
- ✅ Theme-specific design perfectly matched to the Guppy Theme
- ✅ Flexible button configuration with various styles
- ✅ Overlay support for better text readability
- ✅ Responsive media integration for all screen sizes
- ✅ Full accessibility with alt texts and ARIA labels
6. Image Text Slider Element
Usage: Complex sliders with text-image combinations
Description:
A highly configurable slider for displaying content with image and text components.
Features:
- ✅ Complex content creation with text, image, and button combinations
- ✅ Individual overlay settings for each slider element
- ✅ Responsive slider behavior for all screen sizes
- ✅ Extended button functionality with various styles
- ✅ Flexible text positioning for optimal readability
7. Product Details Accordion Element
Usage: Product detail pages, structured product information
Description:
Specialized accordion for clear display of product details and properties.
Features:
- ✅ Automatic product data integration loads information directly from the product
- ✅ Structured display of all product properties
- ✅ Configurable initial states determine which areas are open
- ✅ Responsive product display for all screen sizes
- ✅ SEO-optimized product information for better search engine relevance
8. Slides Element
Usage: Universal slider, hero areas
Description:
The most comprehensive and flexible slider element with full configurability for all use cases.
Features:
- ✅ Complete slide customization with all available options
- ✅ Responsive height adjustment for optimal display on all devices
- ✅ Extended overlay options for better text readability
- ✅ Container flexibility for different page widths
- ✅ Comprehensive button configuration with multiple buttons per slide
9. Cross-Selling Element
Usage: Product recommendations, upselling
Description:
Extended cross-selling functionality for displaying product recommendations with configurable display options.
Features:
- ✅ Responsive product quantity automatically adapts to screen size
- ✅ Flexible arrangement of product recommendations
- ✅ Optimized performance for fast loading times
- ✅ Accessible navigation with skip link support
10. Image Gallery Element
Usage: Image galleries, product images
Description:
An extended image gallery with "show more" functionality for large image collections.
Features:
- ✅ Grid view option for different display forms
- ✅ Configurable image quantity with "show more" function
- ✅ Interactive operation with JavaScript integration
- ✅ Zoom functionality for detailed image views
11. Product Slider Element
Usage: Product carousels, recommendations
Description:
Specialized slider for attractive product display in carousel format.
Features:
- ✅ Responsive product quantity for optimal display on all devices
- ✅ Optimized product display with all important product information
- ✅ Performance-optimized for fast loading times
- ✅ Accessible navigation with skip link support
12. Video Element
Usage: Display of videos
Description:
Element for displaying video files
Configuration Options:
Video Settings:
- Loop: Video automatically repeats once it has finished
- Mute: Video is initially played muted by default
Google Structured Data:
- Video Description: for Google structured data
Additional Features
Accessibility & Usability:
- ✅ Skip links in all elements for better keyboard navigation
- ✅ Screen reader support with meaningful descriptions
- ✅ Automatic focus management for optimal usability
- ✅ Responsive design works flawlessly on all devices
SEO Optimizations:
- ✅ Structured data for better search engine relevance
- ✅ Semantic HTML structure for optimal indexing
- ✅ Optimized loading times through intelligent image optimization
- ✅ Rich snippets for enhanced search results
Performance & User Experience:
- ✅ Lazy loading loads content only when needed
- ✅ Optimized JavaScript functions for smooth operation
- ✅ Responsive images for all screen sizes
- ✅ Intelligent caching strategies for better performance
Technical Requirements
Minimum Requirements:
- Shopware: Version 6.7.0 or higher
- Guppy Theme: Version 2.0 or higher
Installation:
The plugin is installed and activated via the Shopware Plugin Manager. After installation, all CMS elements are available in the Shopping Experience Editor.
composer require dmf/sw6-plugin-guppy-emotionworld-elements
bin/console plugin:install --activate DmfGuppyEmotionworldElements
bin/console cache:clear