DmfCmsDynamicGrid

DmfCmsDynamicGrid ergänzt Shopwares Erlebniswelten um einen vollwertigen, visuellen CSS-Grid-Editor: Slots werden per Drag-and-drop platziert, in beliebiger Größe geresized, und das Layout lässt sich pro Viewport (Desktop/Tablet/Mobile) separat konfigurieren. Gespeicherte Templates erscheinen automatisch als CMS-Block.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-cms-dynamic-grid
Plugin-Klasse	Dmf\CmsDynamicGrid\DmfCmsDynamicGrid
Namespace	Dmf\CmsDynamicGrid
Version	1.1.0
Shopware	^6.7
PHP	8.3+

Installation

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

Features

• Visueller Grid-Editor: Slots per Drag-and-drop verschieben, per Buttons resizen.
• Responsive Layouts: separate Konfiguration pro Viewport (Desktop, Tablet, Mobile).
• Dynamic CMS-Blöcke: gespeicherte Templates erscheinen automatisch im Block-Picker.
• Viewport-Sync: optional: Änderungen über alle Viewports hinweg spiegeln.

Bedienung

Grid-Template anlegen

1. Im Admin Inhalte → Grid Templates öffnen.
2. Template anlegen klicken.
3. Name vergeben und Grid konfigurieren:
   • Spalten und Zeilen festlegen (max. 6×6).
   • Slots durch Klick auf leere Zellen ergänzen.
   • Slots per Drag-and-drop verschieben.
   • Slots per +/--Button vergrößern/verkleinern.
4. Speichern.

Grid-Block in der CMS-Seite

1. Erlebniswelt bearbeiten.
2. Im Block-Selector unter Dynamic Grid das gespeicherte Template wählen.
3. Slots mit beliebigen CMS-Elementen befüllen.

Editor-Steuerung

Aktion	Beschreibung
Klick auf leere Zelle	neuen Slot hinzufügen
Drag-and-drop	Slot verschieben
+/-	Slot vergrößern/verkleinern
×	Slot entfernen
Viewport-Tabs	zwischen Desktop/Tablet/Mobile wechseln
Sync-Toggle	Änderungen auf alle Viewports anwenden

Constraints

• Maximal 6 Spalten
• Maximal 6 Zeilen
• Maximal 12 Slots pro Template
• Breakpoints: Mobile ≤ 768 px, Tablet ≤ 1024 px

Template-Konfiguration (JSON)

Die Konfiguration eines Templates wird als JSON persistiert:

{
  "slotsCount": 3,
  "viewports": {
    "desktop": {
      "columns": 3,
      "rows": 2,
      "columnGap": "24px",
      "rowGap": "24px",
      "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	Bedeutung
columns	Anzahl Spalten
rows	Anzahl Zeilen
columnGap	horizontaler Abstand (CSS-Wert)
rowGap	vertikaler Abstand (CSS-Wert)
items[].x	horizontale Startposition (0-basiert)
items[].y	vertikale Startposition (0-basiert)
items[].w	Breite in Spalten
items[].h	Höhe in Zeilen

Konfiguration

DmfCmsDynamicGrid bringt keine zentrale Plugin-Konfiguration mit, alle Einstellungen leben pro Template.

Hinweise

Custom Grids ergänzend

Für statische, sofort einsatzbereite Layouts siehe DmfCmsCustomGrids.

Slot-Limit

Mehr als 12 Slots pro Template lassen sich nicht speichern, das ist eine harte Grenze des Editors.