DmfTheOne

DmfTheOne is a flexible CMS element for Shopware 6.7 Shopping Experiences. It replaces rigid block layouts with a visual, tree-based builder: editors compose multi-column, nestable layouts directly in the admin without developer involvement. An integrated AI assistant generates complete layouts from text prompts, images, or voice commands.

Quick info

Composer package	dmf/sw6-plugin-the-one-cms-element
Plugin class	Dmf\TheOneCmsElement\DmfTheOneCmsElement
Namespace	Dmf\TheOneCmsElement
Shopware	>=6.7.0
Required 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 is pulled in automatically by Composer but must be activated separately, as the slider mode depends on it:

bin/console plugin:install --activate DmfSplideSlider

Requirements

Requirement	Version
Shopware	>=6.7.0
DmfSplideSlider	*

Data model: Rows · Cols · Items

Every element is a nested tree:

Element
 └─ Rows[]              ← outer layout rows (optionally rendered as a Splide slider)
     └─ Cols[]          ← responsive columns
         └─ children[]  ← Items (text, image, heading, button …) and/or inner rows
             └─ Rows[]  ← inner rows (max. 2 columns, max. 2 levels deep)

Every node (Row, Col, Item) carries a full styling object:

Category	Fields
Sizes	Width (mobile/tablet/desktop), min-/max-height, max-width
Spaces	Padding and margin (4 sides each)
Colors	Text color, background color, border color, border width, radius
Alignments	Flex alignment classes, responsive
Masking	CSS clip-path: circle, ellipse, diamond, hexagon, wave, blob, custom SVG
Accessibility	Arbitrary HTML attributes as key-value pairs
Classes	Bootstrap or Tailwind utility classes
Inline CSS	Raw CSS for properties not covered otherwise

CSS library

The plugin supports Bootstrap 5 (default) and Tailwind CSS. Column widths adapt to the chosen library:

Width	Bootstrap	Tailwind
Full width	col-12	w-full
2 columns	col-lg-6	lg:w-1/2
3 columns	col-lg-4	lg:w-1/3
4 columns	col-lg-3	lg:w-1/4

The library is configured once in the plugin settings and applies to all elements.

Switching the CSS library

Switching after elements have been created can break existing layouts that use library-specific class names (e.g. col-lg-6, btn-primary). Review all elements after switching and update their classes.

Slider mode

The entire element can be switched to "Display as slider". Each outer row becomes a slide, rendered by DmfSplideSlider.

Template system

Editors can persist the current element state as a named template in the database:

• Save: store the current state under a name (max. 2 MB)
• Load: pick a template from the gallery and apply it to the element
• Overwrite/Delete: manage existing templates
• Around 20 built-in presets: banners, card grids, sliders, hero sections, and more

Database table the_one_template

Column	Type	Notes
id	BINARY(16)	UUID, primary key
name	VARCHAR(255)	Unique
value	JSON	Serialised element state
created_at / updated_at	DATETIME(3)

AI assistant

The integrated AI assistant generates complete layouts and makes targeted edits to existing elements:

• Text prompt: describe the desired layout in natural language
• Image input: upload a screenshot, mockup, or wireframe and the AI reads structure and style directly from the image
• Voice input: dictate the prompt via microphone
• Edit mode: ask the AI to modify an existing element (e.g. "Add a button below the image")
• Preview before applying and undo of the last apply

The assistant runs entirely server-side: the browser sends the prompt and optional image to the Shopware admin endpoint, which in turn calls the Anthropic API. The API key never leaves the server.

Image input requires Anthropic

Uploading images requires the Anthropic provider. Maximum image size is 3.75 MB (uncompressed).

Configuration

Admin path: Settings → System → Plugins → DmfTheOne → Configure.

AI parser settings

Field	Type	Default	Purpose
aiProvider	single-select	anthropic	AI provider: Anthropic (Claude)
aiApiKey	password	–	Anthropic API key
aiModel	single-select	claude-haiku-4-5-20251001	Model: Haiku 4.5 (fast/cheap), Sonnet 4.6 (recommended), Opus 4.7 (powerful)
aiRateLimit	int	20	Max. AI requests per admin user per hour. 0 = disabled
aiUsePromptCache	bool	false	Caches the system prompt at Anthropic. Saves up to 90 % of prompt tokens on follow-up requests
aiValidation	bool	false	Validates AI output and sends an automatic correction request on errors
aiEnableLogging	bool	false	Sends prompts and responses to a configurable endpoint for quality improvement. The shop URL is not transmitted
aiLoggingEndpoint	text	–	URL of the receiver script for usage logging
aiLoggingSecret	password	–	Authentication secret for the logging endpoint

Model choice

Sonnet 4.6 is the recommended choice for most projects: excellent price/performance ratio and very good layout quality. Haiku 4.5 is the fastest and cheapest option. Opus 4.7 delivers the best results for especially complex layouts.

Prompt cache

Writing the cache for the first time costs twice the normal input price. All follow-up requests within the cache validity period cost only 10 % of the normal input price. Minimum requirement: 4,096 tokens (Haiku 4.5) or 1,024 tokens (Sonnet/Opus 4.x).

CSS library

Field	Type	Default	Purpose
cssLibrary	single-select	bootstrap	CSS framework for column classes and utilities: bootstrap or tailwind

Utility classes

Field	Type	Default	Purpose
utilityClasses	editor	–	Custom responsive classes with desktop, tablet, and mobile values. Written automatically to the-one.scss. Run bin/console theme:compile after changes

Brand colours (AI defaults)

Field	Type	Default	Purpose
colorTextDark	text	–	Text colour on light backgrounds (hex)
colorTextLight	text	–	Text colour on dark backgrounds (hex)
colorBgDark	text	–	Dark background colour (hex)
colorBgLight	text	–	Light background colour (hex)
colorBorderDark	text	–	Border colour for dark areas (hex)
colorBorderLight	text	–	Border colour for light areas (hex)

API endpoints

All routes are scoped to api and require admin authentication.

Method	Route	Description
POST	/api/_action/the-one/template/save	Save a template (max. 2 MB)
GET	/api/_action/the-one/template/list	List all templates
GET	/api/_action/the-one/template/load?templateName=	Load a template by name
PUT	/api/_action/the-one/template/update	Overwrite a template
DELETE	/api/_action/the-one/template/delete?templateName=	Delete a template
GET	/api/_action/the-one/placeholder-media-id	Retrieve the placeholder media ID
POST	/api/_action/the-one/ai-parse	Generate or edit a layout via AI

Related

• DmfSplideSlider: required dependency for slider mode
• DmfCmsBlockLibrary: reusable blocks and sections
• Plugins overview
• Recommended plugins

Notes

DmfSplideSlider required

DmfTheOne depends on DmfSplideSlider via Composer. The library is pulled in automatically but must be activated separately. Without an active DmfSplideSlider, slider mode will not render.