WSC SWPlugin CmsGridBlocksSections

Shopware 6.7 Plugin für flexible Bootstrap-Grid-Layouts im Shopping Experience Builder.

Beschreibung

Das Plugin erweitert den Shopware Shopping Experience Builder um zwei Typen flexibler Grid-Layouts, die vollständig auf Bootstrap 5 Klassen basieren – kein Inline-CSS.

Custom CMS Sections (2–6 Spalten) — Priorität

Eigene Sektionstypen, bei denen in jeder Spalte beliebig viele Standard-Blöcke per Drag & Drop platziert werden können. Jede Spalte ist unabhängig per Bootstrap-Klassen für Breite, Sichtbarkeit und Reihenfolge konfigurierbar.

Section-Typen: wsc-grid-section-2col bis wsc-grid-section-6col

Custom CMS Blocks (2–6 Slots)

Eigene Blöcke mit je einem CMS-Element (Text, Bild, Video, etc.) pro Spalte. Geeignet für einfache Layouts, bei denen pro Spalte nur ein Element benötigt wird.

Block-Typen: wsc-grid-block-2col bis wsc-grid-block-6col

---

Voraussetzungen

• Shopware 6.7.x
• PHP 8.4+
• Bootstrap 5 (im Shopware Storefront standardmäßig enthalten)

---

Features

Bootstrap-Grid-Konfiguration

Alle Werte werden als CSS-Klassen-Strings gespeichert und im Storefront-Template als Klassen ausgegeben:

Feld	Beispielwert	Beschreibung
Spaltenbreite	col-12 col-md-6	Bootstrap-Spaltenklassen
Sichtbarkeit	d-none d-md-flex	Responsive Anzeige
Reihenfolge	order-md-2	Responsive Reihenfolge
Gutter	g-3	Abstand zwischen Spalten
Vertikal ausrichten	align-items-center	Vertikale Ausrichtung der Spalten
Horizontal ausrichten	justify-content-between	Horizontale Verteilung

Preset-Buttons mit Aktivmarkierung

Vordefinierte Spalten-Kombinationen für alle sinnvollen Bootstrap-Verhältnisse. Das aktive Preset wird blau hervorgehoben.

Spaltenanzahl	Anzahl Presets	Beispiele
2 Spalten	9	6+6, 7+5, 5+7, 8+4, 4+8, 9+3, 3+9, 10+2, 2+10
3 Spalten	16	4+4+4, 6+3+3, 8+2+2, 5+5+2, 6+4+2, 5+4+3, ...
4 Spalten	13	3+3+3+3, 6+2+2+2, 4+4+2+2, 4+3+3+2, ...
5 Spalten	10	gleich, 4+2+2+2+2, 3+3+2+2+2, ...
6 Spalten	1	2+2+2+2+2+2

Hinweis 5 Spalten: Bootstrap 5 hat kein natives col-* für 5 Spalten im 12er-Grid. Das Plugin nutzt die col-Klasse für gleichmäßige Aufteilung bzw. col-md-N-Klassen für asymmetrische Layouts (z.B. 4+2+2+2+2).

Live-Vorschau im Admin-Editor

Alle Änderungen in der Konfiguration sind sofort im Editor sichtbar – ohne Speichern:

• Spaltenbreiten (Preset-Klick oder Freitext)
• Gutter (g-0 bis g-5)
• Vertikale Ausrichtung (align-items-*)
• Horizontale Ausrichtung (justify-content-*)

---

Installation

Manuell

# Plugin in den custom/plugins/ Ordner kopieren
cp -r wsc_swplugin_cmsgridblockssections /pfad/zum/shopware/custom/plugins/

# Plugin installieren und aktivieren
bin/console plugin:install --activate WSCSWPluginCmsGridBlocksSections

# Assets installieren
bin/console assets:install

# Admin neu bauen
npm --prefix vendor/shopware/administration/Resources/app/administration run build

# Cache leeren
bin/console cache:clear

---

Entwicklung (DDEV)

Verzeichnisse

Zweck	Pfad
Plugin-Quellcode (editieren)	~/Entwicklungsumgebung/GitLab/SW-Plugins/wsc_swplugin_cmsgridblockssections
DDEV Test-Shop (nur lesen)	~/Entwicklungsumgebung/ddev/sw6-plugin
Deploy-Zielpfad	~/Entwicklungsumgebung/ddev/sw6-plugin/custom/plugins/wsc_swplugin_cmsgridblockssections

Deploy-Workflow

# 1. Quellcode in DDEV-Shop synchronisieren
rsync -av src/ ~/Entwicklungsumgebung/ddev/sw6-plugin/custom/plugins/wsc_swplugin_cmsgridblockssections/src/ \
  --exclude='Resources/public'

# 2. In DDEV-Verzeichnis wechseln
cd ~/Entwicklungsumgebung/ddev/sw6-plugin

# 3. Plugin-Konfiguration aktualisieren
ddev exec bin/console bundle:dump

# 4. Admin neu bauen
ddev exec bash -c "PROJECT_ROOT=/var/www/html npm --prefix vendor/shopware/administration/Resources/app/administration run build 2>&1"

# 5. Assets installieren und Cache leeren
ddev exec bin/console assets:install
ddev exec bin/console cache:clear

---

Plugin-Struktur

src/
├── WSCSWPluginCmsGridBlocksSections.php     ← Plugin-Hauptklasse
└── Resources/
    ├── app/
    │   └── administration/
    │       └── src/
    │           ├── main.js                  ← Entry Point (importiert alles)
    │           ├── overrides/
    │           │   ├── sw-cms-stage-section-selection/  ← Erweitert Section-Auswahl
    │           │   ├── sw-cms-section/                  ← N-Spalten-Editor + Live-Preview
    │           │   └── sw-cms-section-config/           ← Konfigurations-Panel mit Presets
    │           ├── blocks/
    │           │   ├── shared/wsc-cms-block-grid-config/  ← Gemeinsames Block-Config-Panel
    │           │   ├── wsc-grid-block-2col/
    │           │   │   ├── component/                   ← Admin-Block-Komponente
    │           │   │   └── preview/                     ← Block-Picker-Vorschau
    │           │   ├── wsc-grid-block-3col/
    │           │   ├── wsc-grid-block-4col/
    │           │   ├── wsc-grid-block-5col/
    │           │   └── wsc-grid-block-6col/
    │           └── snippet/
    │               ├── de-DE.json
    │               ├── en-GB.json
    │               └── fr-FR.json
    ├── public/administration/               ← Vite-Build-Ausgabe (nicht editieren)
    └── views/storefront/
        ├── section/
        │   ├── cms-section-wsc-grid-section-2col.html.twig
        │   ├── cms-section-wsc-grid-section-3col.html.twig
        │   ├── cms-section-wsc-grid-section-4col.html.twig
        │   ├── cms-section-wsc-grid-section-5col.html.twig
        │   └── cms-section-wsc-grid-section-6col.html.twig
        └── block/
            ├── cms-block-wsc-grid-block-2col.html.twig
            ├── cms-block-wsc-grid-block-3col.html.twig
            ├── cms-block-wsc-grid-block-4col.html.twig
            ├── cms-block-wsc-grid-block-5col.html.twig
            └── cms-block-wsc-grid-block-6col.html.twig

---

Technologie-Stack

Bereich	Technologie
Plugin-System	Shopware 6.7 Plugin API
PHP	8.4+, PSR-12
Admin-JS	Vue.js, Shopware Component Override System, Vite
Storefront	Twig, Bootstrap 5
Namespace	WSC\WSCSWPluginCmsGridBlocksSections

---

Lizenz

Copyright (C) 2026 Christian Säum – web-seo-consulting.eu

Dieses Projekt steht unter der GNU General Public License, Version 3 oder (nach deiner Wahl) einer späteren Version (GPL-3.0-or-later). Der vollständige Lizenztext steht in der Datei LICENSE.

Du darfst die Software nutzen, weitergeben und – auch kommerziell – verkaufen. Gibst du eine veränderte Fassung weiter, muss deren Quellcode ebenfalls unter der GPL-3.0-or-later verfügbar sein. Der Copyright-Hinweis und die Nennung des ursprünglichen Autors dürfen nicht entfernt werden.

Autor

Christian — web-seo-consulting.eu