Custom Grids Plugin

Zum Plugin

Das DmfCmsCustomGrids Plugin fügt deiner Shopware 6 Installation 23 vordefinierte Grid-Layouts für die Erlebniswelten hinzu. Diese ermöglichen eine flexiblere Gestaltung von Shop-Seiten mit verschiedenen Spaltenanordnungen.

Inhalt dieser Seite:

• Voraussetzungen
• Installation
• Features
• Verfügbare Grid-Layouts
  • Gleichmäßige Spalten
  • Asymmetrische 2-Spalten-Layouts
  • 3-Spalten-Layouts
• Verwendung
  • Grid-Block hinzufügen
  • Visuelle Darstellung
• Responsive Verhalten
• Technische Details
  • Block-Kategorie
  • Dateistruktur
  • PWA-Unterstützung

---

Voraussetzungen

• Shopware 6.7.0 oder höher
• PHP 8.2 oder höher

Installation

composer require dmf/plugin-cms-custom-grids
bin/console plugin:install --activate DmfCmsCustomGrids
bin/console cache:clear

---

Features

• 23 Grid-Layouts: Vordefinierte Spaltenanordnungen für jeden Anwendungsfall
• Bootstrap 12-Spalten-System: Basiert auf dem bekannten 12-Spalten-Grid
• Responsive: Alle Layouts sind für mobile Geräte optimiert
• Nahtlose Integration: Erscheinen direkt im CMS-Block-Auswahldialog
• PWA-kompatibel: Vue-Komponenten für Shopware PWA verfügbar

---

Verfügbare Grid-Layouts

Gleichmäßige Spalten

Layout	Spalten	Beschreibung
1-column	1 × 12	Volle Breite
2-column	2 × 6	Zwei gleiche Hälften
3-column	3 × 4	Drei gleiche Drittel
4-column	4 × 3	Vier gleiche Viertel
5-column	5 × ~2.4	Fünf gleiche Spalten
6-column	6 × 2	Sechs gleiche Spalten
8-column	8 × 1.5	Acht gleiche Spalten

Asymmetrische 2-Spalten-Layouts

Layout	Aufteilung	Beschreibung
2-1-2-column	2 + 1 + 2	Schmal - Extra schmal - Schmal
2-2-column	2 + 2	Zwei schmale Spalten
2-3-column	2 + 3	Schmal + Mittel
2-4-column	2 + 4	Schmal + Breit
2-5-column	2 + 5	Schmal + Breit
2-6-column	2 + 6	Schmal + Hälfte
2-8-2-column	2 + 8 + 2	Sidebar - Content - Sidebar
3-9-column	3 + 9	Viertel + Dreiviertel
4-8-column	4 + 8	Drittel + Zweidrittel
5-7-column	5 + 7	Asymmetrisch
7-5-column	7 + 5	Asymmetrisch (umgekehrt)
8-4-column	8 + 4	Zweidrittel + Drittel
9-3-column	9 + 3	Dreiviertel + Viertel

3-Spalten-Layouts

Layout	Aufteilung	Beschreibung
3-3-6-column	3 + 3 + 6	Klein + Klein + Groß
3-6-3-column	3 + 6 + 3	Sidebar - Content - Sidebar
6-3-3-column	6 + 3 + 3	Groß + Klein + Klein

---

Verwendung

Grid-Block hinzufügen

1. Öffne eine Erlebniswelt im Admin
2. Klicke auf Block hinzufügen
3. Wähle die Kategorie Custom Grids
4. Wähle das gewünschte Layout
5. Füge Elemente in die Spalten ein

Visuelle Darstellung

Die Grids basieren auf dem Bootstrap 12-Spalten-System:

12-Spalten-Grid:
|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  | 10  | 11  | 12  |

2-column (6+6):
|           6           |           6           |

3-9-column:
|   3   |               9                       |

2-8-2-column:
| 2 |           8           | 2 |

---

Responsive Verhalten

Alle Layouts passen sich automatisch an kleinere Bildschirme an:

• Desktop (≥992px): Volle Grid-Darstellung
• Tablet (768px - 991px): Spalten werden gestapelt oder verkleinert
• Mobile (<768px): Alle Spalten werden untereinander angezeigt

---

Technische Details

Block-Kategorie

Alle Custom Grids erscheinen in der Kategorie custom-blocks im CMS-Block-Auswahldialog.

Dateistruktur

src/Resources/app/
├── administration/src/module/sw-cms/blocks/custom-blocks/
│   ├── custom-grid-1-column/
│   │   ├── component/          # Admin-Vorschau
│   │   ├── preview/            # Block-Auswahl-Vorschau
│   │   └── index.js            # Block-Registrierung
│   └── ...
├── storefront/src/scss/
│   └── base.scss               # Frontend-Styles
└── pwa/components/             # PWA Vue-Komponenten

PWA-Unterstützung

Für Shopware PWA sind Vue-Komponenten für alle 23 Layouts verfügbar unter:

src/Resources/app/pwa/components/swComponents/blocks/