Dynamic Grid Plugin

Zum Plugin

Das DmfCmsDynamicGrid Plugin bietet einen visuellen Grid-Editor für flexible CSS-Grid-Layouts in den Shopware Erlebniswelten. Erstelle responsive Layouts per Drag & Drop und nutze sie als wiederverwendbare CMS-Blöcke.

Inhalt dieser Seite:

Voraussetzungen

Shopware 6.7.0 oder höher
PHP 8.3 oder höher

Installation

bash

composer require dmf/sw6-plugin-cms-dynamic-grid
bin/console plugin:install --activate DmfCmsDynamicGrid
bin/console cache:clear

Features

Visueller Grid-Editor: Drag & Drop und Resize direkt im Admin
Responsive Layouts: Separate Konfiguration für Desktop, Tablet und Mobile
Dynamische CMS-Blöcke: Gespeicherte Templates erscheinen automatisch als CMS-Blöcke
Viewport-Synchronisation: Optionale Synchronisierung von Änderungen über alle Viewports
CSS Custom Properties: Flexible Gap-Werte ohne Einschränkungen
Depot-System: Slots für verschiedene Viewports ein-/ausblenden

Verwendung

Grid-Template erstellen

Navigiere zu Inhalte → Grid Templates im Admin
Klicke auf Template erstellen
Gib einen Namen ein (z.B. "Hero mit Sidebar")
Konfiguriere das Grid im visuellen Editor:
- Setze Spalten und Zeilen (max. 12×6)
- Füge Slots durch Klick auf leere Zellen hinzu
- Verschiebe Slots per Drag & Drop
- Ändere die Größe über die +/- Buttons
Konfiguriere die Abstände (Gaps)
Speichere das Template

Grid-Block im CMS verwenden

Öffne eine CMS-Seite zum Bearbeiten
Klicke auf Block hinzufügen
Wähle dein Template unter der Kategorie Dynamic Grid
Fülle die Slots mit beliebigen CMS-Elementen

Grid Editor

Bedienelemente

Aktion	Beschreibung
Klick auf leere Zelle	Neuen Slot hinzufügen
Drag & Drop	Slot verschieben
`+`/`-` Buttons	Slot vergrößern/verkleinern
`×` Button	Slot entfernen (ins Depot)
Viewport-Tabs	Zwischen Desktop/Tablet/Mobile wechseln
Sync-Toggle	Änderungen auf alle Viewports anwenden

Constraints

Eigenschaft	Maximum
Spalten	12
Zeilen	6
Slots pro Template	12

Breakpoints

Viewport	Prefix	Breakpoint
Desktop	(keiner)	> 1024px
Tablet	`md:`	769px - 1024px
Mobile	`sm:`	≤ 768px

Responsive Layouts

Viewport-Synchronisation

Mit aktivierter Synchronisation werden Änderungen an Spalten, Zeilen, Slots und Gaps automatisch auf alle Viewports angewendet.

Synchronisation aktivieren:

Klicke auf den Sync Toggle im Editor
Bestätige die Übernahme der aktuellen Werte

Individuelle Viewports: Mit deaktivierter Synchronisation kannst du für jeden Viewport ein völlig unterschiedliches Layout definieren:

Desktop: 12 Spalten, komplexes Layout
Tablet: 6 Spalten, vereinfacht
Mobile: 2 Spalten, gestapelt

Das Depot-System

Das Depot ist ein virtueller Bereich für Slots, die im aktuellen Viewport nicht sichtbar sind.

Wann ist ein Slot im Depot?

Position außerhalb des sichtbaren Grids
Slot wurde für den Viewport entfernt (aber nicht gelöscht)

Depot-Aktionen:

Drag & Drop: Slot aus dem Depot zurück ins Grid ziehen
Auge-Badge: Zeigt an, wenn Slot in anderen Viewports sichtbar ist
Permanent löschen: Entfernt den Slot aus allen Viewports

Gap-Konfiguration

Separate Gaps

Der Editor erlaubt separate Werte für Spalten- und Zeilenabstände:

Einstellung	Beschreibung
Column Gap	Horizontaler Abstand zwischen Spalten
Row Gap	Vertikaler Abstand zwischen Zeilen
Sync Gaps	Spalten- und Zeilenabstand synchronisieren

Gap-Synchronisation

Mit aktiviertem "Sync Gaps":

Column Gap und Row Gap haben immer denselben Wert
Änderung eines Wertes aktualisiert beide

Ohne "Sync Gaps":

Individuelle Werte für Column Gap und Row Gap möglich
Beispiel: column-gap: 24px; row-gap: 48px;

Template-Konfiguration

Templates werden als JSON gespeichert:

json

{
  "slotsCount": 3,
  "viewports": {
    "desktop": {
      "columns": 3,
      "rows": 2,
      "columnGap": "24px",
      "rowGap": "24px",
      "syncGaps": true,
      "items": [
        { "id": "slot-1", "x": 0, "y": 0, "w": 1, "h": 1 },
        { "id": "slot-2", "x": 1, "y": 0, "w": 2, "h": 1 },
        { "id": "slot-3", "x": 0, "y": 1, "w": 3, "h": 1 }
      ]
    },
    "tablet": { ... },
    "mobile": { ... }
  }
}

Feld	Beschreibung
`columns`	Anzahl der Spalten
`rows`	Anzahl der Zeilen
`columnGap`	Horizontaler Abstand (CSS-Wert)
`rowGap`	Vertikaler Abstand (CSS-Wert)
`syncGaps`	Gaps synchronisiert
`items[].x`	Horizontale Startposition (0-basiert)
`items[].y`	Vertikale Startposition (0-basiert)
`items[].w`	Breite in Spalten
`items[].h`	Höhe in Zeilen

CSS Utility Classes

Das Plugin generiert CSS-Klassen für die Grid-Positionierung:

Grid-Container

css

.dmf-grid           /* Aktiviert CSS Grid */
.dmf-grid-cols-{n}  /* Setzt n Spalten (1-12) */

Slot-Positionierung

css

.dmf-col-start-{n}  /* Startspalte (1-12) */
.dmf-col-span-{n}   /* Spaltenbreite (1-12) */
.dmf-row-start-{n}  /* Startzeile (1-6) */
.dmf-row-span-{n}   /* Zeilenhöhe (1-6) */
.dmf-hidden         /* Element verstecken */

Responsive Prefixes

css

/* Desktop (> 1024px) */
.dmf-col-span-6

/* Tablet (769px - 1024px) */
.md\:dmf-col-span-4

/* Mobile (≤ 768px) */
.sm\:dmf-col-span-2

Gap-System (CSS Custom Properties)

Gaps werden über inline CSS Custom Properties gesetzt:

html

<div class="dmf-grid dmf-grid-cols-3"
     style="--dmf-column-gap-desktop: 24px;
            --dmf-row-gap-desktop: 24px;
            --dmf-column-gap-tablet: 16px;
            --dmf-row-gap-tablet: 16px;
            --dmf-column-gap-mobile: 8px;
            --dmf-row-gap-mobile: 8px;">

Das Modul erscheint unter Inhalte im Admin-Menü:

Route	Pfad
Liste	`/dmf/grid/template/list`
Detail	`/dmf/grid/template/detail/:id`
Erstellen	`/dmf/grid/template/create`

Technische Details

Datenbank

Tabelle: dmf_cms_grid_template

Spalte	Typ	Beschreibung
`id`	BINARY(16)	UUID
`name`	VARCHAR(255)	Template-Name
`config`	JSON	Konfiguration
`created_at`	DATETIME	Erstellungsdatum
`updated_at`	DATETIME	Änderungsdatum

Block-Registrierung

Beim Öffnen des CMS-Editors werden alle Templates via API geladen
Jedes Template wird als CMS-Block registriert
Block-Name-Format: dmf-grid-{template-name-slugified}
Die Konfiguration wird in customFields.templateConfig gespeichert

Template Resolver

Der DmfGridBlockResolver lädt aktuelle Template-Konfigurationen aus der Datenbank, wenn CMS-Seiten geladen werden. Änderungen an Templates werden automatisch in allen Blöcken reflektiert.

Troubleshooting

Template erscheint nicht als CMS-Block

Prüfe die Browser-Konsole auf Fehler
Stelle sicher, dass das Template gespeichert ist
Leere den Cache: bin/console cache:clear

Änderungen am Template werden nicht übernommen

Cache leeren
Seite neu laden
Prüfe ob der DmfGridBlockResolver aktiv ist

Gaps funktionieren nicht

Prüfe die CSS Custom Properties im Browser-DevTools
Stelle sicher, dass die SCSS-Datei kompiliert wurde
Führe bin/console theme:compile aus

Slots werden nicht korrekt positioniert

Prüfe das Slot-ID-Mapping (slot-1 ↔ content1)
Überprüfe die Viewport-Konfiguration im DevTools
Stelle sicher, dass keine CSS-Konflikte vorliegen

Dynamic Grid Plugin ​

Voraussetzungen ​

Installation ​

Features ​

Verwendung ​

Grid-Template erstellen ​

Grid-Block im CMS verwenden ​

Grid Editor ​

Bedienelemente ​

Constraints ​

Breakpoints ​

Responsive Layouts ​

Viewport-Synchronisation ​

Das Depot-System ​

Gap-Konfiguration ​

Separate Gaps ​

Gap-Synchronisation ​

Template-Konfiguration ​

CSS Utility Classes ​

Grid-Container ​

Slot-Positionierung ​

Responsive Prefixes ​

Gap-System (CSS Custom Properties) ​

Admin-Navigation ​

Technische Details ​

Datenbank ​

Block-Registrierung ​

Template Resolver ​

Troubleshooting ​

Template erscheint nicht als CMS-Block ​

Änderungen am Template werden nicht übernommen ​

Gaps funktionieren nicht ​

Slots werden nicht korrekt positioniert ​