DmfGuppyTheme

DmfGuppyTheme ist das Fundament des Guppy-Frameworks. Es ersetzt das Standard-Storefront-Theme von Shopware durch eine schlanke, dokumentierte Bootstrap-5-Variante mit umfangreicher Theme-Konfiguration und gezielten Twig- und SCSS-Overrides.

Schnellinfo

Composer-Paket	dmf/sw6-guppy-theme
Plugin-Klasse	Dmf\GuppyTheme\DmfGuppyTheme
Namespace	Dmf\GuppyTheme
Shopware	~6.7.0
Pflicht-Dependency	dmf/sw6-plugin-splide-slider
Repository	guppy / theme-guppy
Changelog	Alle Releases

Installation

composer require dmf/sw6-guppy-theme
bin/console plugin:refresh
bin/console plugin:install --activate DmfGuppyTheme
bin/console theme:change       # Sales-Channel auswählen
bin/console theme:compile

DmfSplideSlider wird automatisch von Composer mitgezogen, muss aber separat aktiviert werden, falls noch nicht vorhanden:

bin/console plugin:install --activate DmfSplideSlider

Splide als Single Source of Truth

DmfSplideSlider bündelt die Splide-Bibliothek einmal und stellt den Konstruktor global unter window.DmfSplide bereit. Theme und abhängige Plugins (etwa DmfCmsCustomElements) konsumieren diese geteilte Instanz, statt jeweils eine eigene Kopie auszuliefern. Deshalb muss DmfSplideSlider aktiv sein, bevor Slider im Storefront rendern. Details unter DmfSplideSlider.

Konfiguration

Im Gegensatz zu vielen Plugins bringt DmfGuppyTheme kein klassisches config.xml für die Plugin-Einstellungen mit. Stattdessen liegen alle Konfigurationen in theme.json und werden über die Theme-Konfiguration in der Administration ausgespielt.

Tabs der Theme-Konfiguration

Tab	Inhalt
Layout	Container-Breiten, Section-Padding, Sidebar-Verhalten
Header	Header-Variante, Top-Bar-Hintergrund, Logo-Position
Footer	Spaltenanzahl, Newsletter-Block, Payment-/Shipping-Logos
Login	Login-/Register-Box-Verhalten
Checkout	Checkout-Layout, 3-Step-Progress, Trust-Elemente
Guppy Cards	Card-Komponenten der Detailseite
Productcard	Listing-/Slider-Produktkarten
Detailpage	Buybox-Styling, Produktbilder, Slider
Button	Button-Farben, Sizes, Outline-Toggles
Badges	Neu-/Top-Seller-/Discount-Badges (optional Outline)
Alerts	Hintergrund- und Textfarbe pro Alert-Typ

Detailreferenz

Die vollständige Feldreferenz mit Default-Werten liegt unter Konfigurationsschema.

Console-Commands

DmfGuppyTheme registriert eigene Konsolen-Befehle:

Befehl	Zweck
guppy:theme:create	Erstellt ein neues Theme-Verzeichnis mit Grundstruktur.
guppy:install:plugins	Installiert optional empfohlene Begleit-Plugins via Composer.
guppy:upgrade:scan	Scannt das Projekt nach Änderungen, die nach Theme-Updates Aufmerksamkeit benötigen.

Die ausführliche Dokumentation der Befehle findest du unter Twig-Blöcke und Konsolen-Workflow.

SCSS-Architektur (Kurzüberblick)

Die zentralen Variablen-Dateien:

src/Resources/app/storefront/src/scss/
├── overrides.scss                   # Theme-Hook (lädt vor @DmfGuppyTheme)
├── base.scss                        # Theme-Hook (lädt nach @DmfGuppyTheme)
├── abstract/variables/
│   ├── bootstrap.scss               # Bootstrap-Overrides
│   └── custom.scss                  # Guppy-eigene Tokens
└── skin/shopware/abstract/variables/
    ├── bootstrap.scss               # Shopware-Integration (Overrides)
    └── theme.scss                   # Theme-Integration

Mehr Details

Die vollständige Architekturbeschreibung folgt unter Variablen & Tokens und Architektur.

Branching-Strategie

DmfGuppyTheme nutzt einen Staging-Workflow mit drei Hauptbranches:

Branch	Zweck
main	Produktionsbereit, Single Source of Truth, Tags entstehen hier.
stage	QA- und Test-Branch. Features werden hier validiert, bevor sie in main gemergt werden.
next	Vorbereitung kommender Shopware-Major-Versionen, Breaking Changes.

Feature-Branches folgen dem Schema TICKET-123_feature-name.

Hinweise

Theme aktivieren

Nach theme:change muss zwingend theme:compile laufen. Andernfalls werden weder SCSS-Overrides noch theme.json-Werte in das kompilierte CSS eingebaut.

Child-Theme-Workflow

Eigene Anpassungen gehören in ein Child-Theme. Statt DmfGuppyTheme direkt zu modifizieren, generiere ein Child-Theme mit dem Theme Builder oder lege es manuell an (siehe Child Theme manuell entwickeln).