DmfCmsCustomElements

DmfCmsCustomElements erweitert Shopware-6-Shopping-Experiences um zusätzliche CMS-Elemente und liefert einen vollwertigen Generator für neue Elemente, als Claude-Code-Skill (/create-element) und als CLI.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-cms-custom-elements
Plugin-Klasse	Dmf\CmsCustomElements\DmfCmsCustomElements
Namespace	Dmf\CmsCustomElements
Version	0.1.0
Shopware	>=6.5.0 <6.8.0
Pflicht-Dependency	dmf/sw6-plugin-splide-slider

Installation

composer require dmf/sw6-plugin-cms-custom-elements
bin/console plugin:refresh
bin/console plugin:install --activate DmfCmsCustomElements

Nach Aktivierung sind die Elemente unter Inhalte → Erlebniswelten verfügbar.

Neues Element erzeugen

Option A: Slash-Command (empfohlen)

In Claude Code:

/create-element <name> --pattern <simple|array|slider> -- <Beschreibung>

Beispiele:

# Einfaches Element
/create-element call-to-action -- Hintergrundbild mit Overlay, Headline, Beschreibung und CTA-Button

# Array-Element
/create-element timeline --pattern array -- Timeline-Einträge mit Datum, Titel, Beschreibung und optionalem Bild

# Slider-Element
/create-element testimonial-slider --pattern slider -- Testimonial-Karussell mit Zitat, Autor, Firma und Avatar

Argumente:

Argument	Beschreibung
name	Element-Name in kebab-case (Pflicht, erstes Wort)
--pattern	simple (Default), array oder slider
--label	menschenlesbares Label (optional, sonst aus Name generiert)
-- ...	alles nach -- ist die kreative Beschreibung

Nach der Generierung:

./bin/build-administration.sh
./bin/build-storefront.sh
bin/console cache:clear

Option B: PROMPT.md

Liefert einen vollständigen Prompt-Template für Claude Code oder andere KI-Tools, falls volle Kontrolle über jede Datei nötig ist.

Create a new CMS element based on PROMPT.md:

Element Name: call-to-action
Pattern: Simple (use hero-banner as reference)

Requirements:
- Background image with overlay
- Headline and description text
- Primary button with link

Option C: Generator-CLI

# Boilerplate erzeugen
node generator/bin/cms-generate.mjs <name> --pattern <pattern> --ai all

# bestehende Elemente listen
node generator/bin/cms-generate.mjs --list

# Dry-Run
node generator/bin/cms-generate.mjs <name> --pattern <pattern> --dry-run

# Element entfernen
node generator/bin/cms-remove.mjs <name>

Patterns und Referenz-Elemente

Pattern	Referenz-Element	Use-Case
Simple	hero-banner	einzelnes Item mit Media, Text, Toggles
Array	hero-product-grid	mehrere Items mit Add/Remove/Sort
Slider	banner-slider	Splide.js-Karussell mit Autoplay

Konfiguration

DmfCmsCustomElements bringt keine zentrale Plugin-Konfiguration, Konfigurationsoptionen leben pro CMS-Element im Admin-Komponenten-Schema.

Dokumentation im Plugin

• CLAUDE.md, Quick-Reference mit harten Regeln
• PROMPT.md, vollständiges Prompt-Template
• .claude/architecture.md, Plugin-Struktur, Referenz-Implementierungen
• .claude/code-patterns.md, JavaScript-Patterns, Splide, Video-Support
• .claude/design-standards.md, SCSS-Patterns, Admin-UI-Patterns
• .claude/element-creation-guide.md, Schritt-für-Schritt-Anleitung

Hinweise

Builds nicht vergessen

Nach /create-element müssen build-administration.sh und build-storefront.sh laufen. Andernfalls wird das neue Element weder im Admin-Picker noch in der Storefront sichtbar.

Splide-Slider als Pflicht-Dependency

DmfCmsCustomElements setzt DmfSplideSlider per Composer voraus. Statt eine eigene Splide-Kopie zu bündeln, konsumiert das Plugin die geteilte Bibliothek über window.DmfSplide (Single Source of Truth). DmfSplideSlider muss installiert und aktiv sein, sonst rendern Slider-Elemente im Storefront nicht.