DmfTheOne

DmfTheOne ist ein flexibles CMS-Element für Shopware 6.7 Shopping Experiences. Es ersetzt starre Block-Layouts durch einen visuellen, Tree-basierten Builder: Redakteur:innen komponieren mehrspaltige, verschachtelbare Layouts direkt im Admin, ohne Entwickler-Eingriff. Ein integrierter KI-Assistent generiert vollständige Layouts aus Texteingaben, Bildern oder Sprachbefehlen.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-the-one-cms-element
Plugin-Klasse	Dmf\TheOneCmsElement\DmfTheOneCmsElement
Namespace	Dmf\TheOneCmsElement
Shopware	>=6.7.0
Pflicht-Dependency	dmf/sw6-plugin-splide-slider
Repository	dmf / plugin-the-one-cms-element

Installation

composer require dmf/sw6-plugin-the-one-cms-element
bin/console plugin:refresh
bin/console plugin:install --activate DmfTheOne
bin/console cache:clear
bin/console database:migrate --all DmfTheOne

DmfSplideSlider wird von Composer automatisch mitgezogen, muss aber separat aktiviert sein, da der Slider-Modus es voraussetzt:

bin/console plugin:install --activate DmfSplideSlider

Voraussetzungen

Anforderung	Version
Shopware	>=6.7.0
DmfSplideSlider	*

Datenmodell: Rows · Cols · Items

Jedes Element ist ein verschachtelter Baum:

Element
 └─ Rows[]              ← äußere Layout-Reihen (optional als Splide-Slider)
     └─ Cols[]          ← responsive Spalten
         └─ children[]  ← Items (Text, Bild, Überschrift, Button …) und/oder innere Reihen
             └─ Rows[]  ← innere Reihen (max. 2 Spalten, max. 2 Ebenen tief)

Jeder Knoten (Row, Col, Item) trägt ein vollständiges Styling-Objekt:

Kategorie	Felder
Sizes	Breite (mobil/Tablet/Desktop), min-/max-Höhe, max-Breite
Spaces	Padding und Margin (je 4 Seiten)
Colors	Textfarbe, Hintergrundfarbe, Rahmenfarbe, Rahmenbreite, Radius
Alignments	Flex-Ausrichtungsklassen, responsiv
Masking	CSS clip-path: Kreis, Ellipse, Raute, Hexagon, Welle, Blob, benutzerdefiniertes SVG
Accessibility	Beliebige HTML-Attribute als Key-Value-Paare
Klassen	Bootstrap- oder Tailwind-Utility-Klassen
Inline-CSS	Rohes CSS für nicht abgedeckte Eigenschaften

CSS-Bibliothek

Das Plugin unterstützt Bootstrap 5 (Standard) und Tailwind CSS. Spaltenbreiten passen sich der gewählten Bibliothek an:

Breite	Bootstrap	Tailwind
Volle Breite	col-12	w-full
2 Spalten	col-lg-6	lg:w-1/2
3 Spalten	col-lg-4	lg:w-1/3
4 Spalten	col-lg-3	lg:w-1/4

Die Bibliothek wird einmalig im Plugin konfiguriert und gilt für alle Elemente.

CSS-Bibliothek wechseln

Ein Wechsel nach dem Erstellen von Elementen kann bestehende Layouts brechen, die bibliotheksspezifische Klassennamen verwenden (z. B. col-lg-6, btn-primary). Prüfe alle Elemente nach einem Wechsel und passe die Klassen an.

Slider-Modus

Das gesamte Element lässt sich auf „Als Slider anzeigen" umstellen. Jede äußere Reihe wird dann zu einer Folie, das Rendering übernimmt DmfSplideSlider.

Template-System

Redakteur:innen können den aktuellen Elementzustand als benanntes Template in der Datenbank persistieren:

• Speichern: aktuellen Zustand unter einem Namen sichern (max. 2 MB)
• Laden: Template aus einer Galerie auswählen und auf das Element anwenden
• Überschreiben/Löschen: bestehende Templates verwalten
• Rund 20 eingebaute Vorlagen: Banner, Card-Grids, Slider, Hero-Sektionen u. a.

Datenbank-Tabelle the_one_template

Spalte	Typ	Anmerkung
id	BINARY(16)	UUID, Primärschlüssel
name	VARCHAR(255)	Unique
value	JSON	Serialisierter Element-Zustand
created_at / updated_at	DATETIME(3)

KI-Assistent

Der integrierte KI-Assistent generiert vollständige Layouts und nimmt gezielte Änderungen an bestehenden Elementen vor:

• Textprompt: beschreibe das gewünschte Layout in natürlicher Sprache
• Bildinput: lade einen Screenshot, Mockup oder Wireframe hoch, die KI liest Struktur und Stil direkt aus dem Bild
• Spracheingabe: diktiere den Prompt per Mikrofon
• Bearbeitungsmodus: bitte die KI, ein bestehendes Element zu verändern (z. B. „Füge einen Button unterhalb des Bildes ein")
• Vorschau vor Anwenden und Rückgängig des letzten Applies

Der Assistent läuft vollständig serverseitig: der Browser sendet Prompt und optionales Bild an den Shopware-Admin-Endpunkt, der seinerseits die Anthropic-API aufruft. Der API-Schlüssel verlässt den Server nie.

Bildinput nur mit Anthropic

Das Hochladen von Bildern erfordert den Anthropic-Anbieter. Die maximale Bildgröße beträgt 3,75 MB (unkomprimiert).

Konfiguration

Admin-Pfad: Einstellungen → System → Plugins → DmfTheOne → Konfigurieren.

KI-Parser Einstellungen

Feld	Typ	Default	Zweck
aiProvider	single-select	anthropic	KI-Anbieter: Anthropic (Claude)
aiApiKey	password	–	Anthropic-API-Schlüssel
aiModel	single-select	claude-haiku-4-5-20251001	Modell: Haiku 4.5 (schnell/günstig), Sonnet 4.6 (empfohlen), Opus 4.7 (leistungsstark)
aiRateLimit	int	20	Max. KI-Anfragen pro Admin-Benutzer pro Stunde. 0 = deaktiviert
aiUsePromptCache	bool	false	Zwischenspeichert den System-Prompt bei Anthropic. Spart bis zu 90 % der Prompt-Token bei Folge-Anfragen
aiValidation	bool	false	Validiert die KI-Ausgabe und sendet bei Fehlern eine automatische Korrekturanfrage
aiEnableLogging	bool	false	Sendet Prompts und Antworten zur Qualitätsverbesserung an einen konfigurierbaren Endpunkt. Die Shop-URL wird nicht übertragen
aiLoggingEndpoint	text	–	URL des Empfänger-Skripts für die Nutzungsprotokollierung
aiLoggingSecret	password	–	Authentifizierungs-Secret für den Logging-Endpunkt

Modellwahl

Sonnet 4.6 ist für die meisten Projekte empfehlenswert: gutes Preis-Leistungs-Verhältnis und sehr gute Layoutqualität. Haiku 4.5 ist die schnellste und günstigste Option. Opus 4.7 liefert die besten Ergebnisse für besonders komplexe Layouts.

Prompt-Cache

Das erstmalige Schreiben des Caches kostet den doppelten normalen Eingabepreis. Alle Folge-Anfragen innerhalb der Cache-Gültigkeit kosten nur 10 % des normalen Eingabepreises. Mindestanforderung: 4.096 Tokens (Haiku 4.5) bzw. 1.024 Tokens (Sonnet/Opus 4.x).

CSS-Bibliothek

Feld	Typ	Default	Zweck
cssLibrary	single-select	bootstrap	CSS-Framework für Spaltenklassen und Utilities: bootstrap oder tailwind

Utility-Klassen

Feld	Typ	Default	Zweck
utilityClasses	editor	–	Eigene responsive Klassen mit Desktop-, Tablet- und Mobilwert. Werden automatisch in the-one.scss geschrieben. Nach Änderung bin/console theme:compile ausführen

Markenfarben (KI-Standard)

Feld	Typ	Default	Zweck
colorTextDark	text	–	Textfarbe auf hellem Hintergrund (Hex)
colorTextLight	text	–	Textfarbe auf dunklem Hintergrund (Hex)
colorBgDark	text	–	Dunkle Hintergrundfarbe (Hex)
colorBgLight	text	–	Helle Hintergrundfarbe (Hex)
colorBorderDark	text	–	Rahmenfarbe für dunkle Bereiche (Hex)
colorBorderLight	text	–	Rahmenfarbe für helle Bereiche (Hex)

API-Endpunkte

Alle Routen liegen im Scope api und erfordern Admin-Auth.

Methode	Route	Beschreibung
POST	/api/_action/the-one/template/save	Template speichern (max. 2 MB)
GET	/api/_action/the-one/template/list	Alle Templates auflisten
GET	/api/_action/the-one/template/load?templateName=	Template nach Name laden
PUT	/api/_action/the-one/template/update	Template überschreiben
DELETE	/api/_action/the-one/template/delete?templateName=	Template löschen
GET	/api/_action/the-one/placeholder-media-id	Platzhalter-Medien-ID abrufen
POST	/api/_action/the-one/ai-parse	Layout per KI generieren oder bearbeiten

Verwandt

• DmfSplideSlider: Pflicht-Dependency für den Slider-Modus
• DmfCmsBlockLibrary: wiederverwendbare Blöcke und Sections
• Plugins-Übersicht
• Empfohlene Plugins

Hinweise

DmfSplideSlider erforderlich

DmfTheOne setzt DmfSplideSlider per Composer voraus. Die Bibliothek wird automatisch mitgezogen, muss aber separat aktiviert werden. Ohne aktiven DmfSplideSlider rendert der Slider-Modus nicht.