DataFirefly Page Builder für Shopware 6.7 — Installation, Konfiguration und technische Dokumentation

Überblick

Der DataFirefly Page Builder ist ein eigenständiger visueller Seiten-Editor für Shopware 6.7. Er bringt eine eigene Twig-Storefront-Rendering-Engine mit und arbeitet unabhängig vom nativen CMS „Shopping Experiences“. Sie bauen Seiten aus Sektionen und Spalten auf und füllen diese Spalten per Drag & Drop mit Blöcken — ganz ohne Code.

Der Editor läuft in der Administration in Vue 3 / Pinia (Vite-Build der 6.7) und bietet Drag & Drop, Nach-oben/unten-Verschieben, Duplizieren und Undo/Redo. Der Inhalt wird als versioniertes JSON gespeichert: ein Arbeits-Entwurf getrennt von der veröffentlichten Version, ein bei jeder Veröffentlichung angelegter Versionsverlauf, geplante Veröffentlichung und teilbare, signierte Vorschaulinks. Veröffentlichte Seiten werden unter /p/{slug} mit aktivem HTTP-Cache von Shopware ausgeliefert und unterstützen Mehrsprachigkeit und mehrere Verkaufskanäle.

Voraussetzungen

• Shopware ≥ 6.7.0 (shopware/core, shopware/storefront und shopware/administration in ~6.7.0)
• PHP ≥ 8.2
• MySQL 8 / MariaDB 10.11+
• Kommandozeilenzugriff zum Installieren des Plugins, Bauen der Assets und Leeren des Caches
• Gesetzte Umgebungsvariable APP_SECRET — sie signiert die Vorschaulinks

Installation

1. Kopieren Sie den Ordner DataFireflyPageBuilder nach custom/plugins/ Ihrer Instanz (oder laden Sie das ZIP über Erweiterungen → Meine Erweiterungen → Erweiterung hochladen hoch).
2. Aktualisieren Sie die Plugin-Liste, installieren und aktivieren Sie die Erweiterung.
3. Bauen Sie Administration und Storefront und leeren Sie den Cache:

bin/console plugin:refresh
bin/console plugin:install --activate DataFireflyPageBuilder
bin/build-administration.sh
bin/build-storefront.sh
bin/console assets:install
bin/console cache:clear

Eine Seite erstellen und bearbeiten

Öffnen Sie die Administration, gehen Sie zu Inhalte → Page Builder und klicken Sie auf „Seite erstellen“. Die Bearbeitung ist auf zwei Reiter verteilt.

Reiter Editor

Fügen Sie zunächst eine Sektion hinzu (mit Auswahl des Spaltenlayouts) und ziehen Sie dann Blöcke in die Spalten. Jeder Block lässt sich ziehen, nach oben/unten verschieben, duplizieren oder löschen, und alle Aktionen sind rückgängig machbar/wiederholbar. Die Arbeitsfläche zeigt Live-Vorschauen: Bilder, Galerie-Miniaturen, Rich-Text, Buttons, Produktnamen und Formularfelder.

Reiter Einstellungen & SEO

Hier legen Sie den Namen der Seite, ihren Slug, den Status, die Zeitplanung, die zugewiesenen Verkaufskanäle, den Meta-Titel, die Meta-Beschreibung und die Option noindex fest. Der Slug wird automatisch aus dem Namen generiert, seine Eindeutigkeit wird je Sprache validiert, und jede Slug-Änderung erzeugt eine automatische 301-Weiterleitung von der alten URL.

Verfügbare Blöcke

Der Builder liefert 15 Blocktypen, deklariert in der BlockRegistry:

• Struktur & Text: Überschrift, Rich-Text (WYSIWYG-Bearbeitung über sw-text-editor), Trenner, Abstandshalter, Zitat.
• Medien: Bild, Galerie (Mehrfach-Bildauswahl), Video (DSGVO-Fassade YouTube/Vimeo), HTML/Embed.
• Interaktion: Button, Akkordeon (visueller Item-Editor), Countdown, Formular (visueller Feld-Editor).
• E-Commerce: Einzelprodukt und Produktlisting.

Veröffentlichen, planen und versionieren

Eine Seite hat vier Status: draft (Entwurf), scheduled (geplant), published (veröffentlicht) und archived (archiviert).

• Entwurf speichern aktualisiert den Arbeitsinhalt (draftContent), ohne die Live-Version zu verändern.
• Veröffentlichen kopiert den Entwurf in die veröffentlichte Version (publishedContent) und legt eine Verlaufsversion an. Die Veröffentlichung aus der Administration verarbeitet alle Sprachen auf einmal, mit einem Hinweis bei fehlender Übersetzung.
• Planen: Setzen Sie die Seite mit Datum auf den Status „Geplant“; eine geplante Aufgabe läuft alle 5 Minuten und veröffentlicht fällige Seiten automatisch (alle Sprachen).

Vorschau

Der Button Vorschau öffnet die Storefront über einen signierten, ablaufenden Link (/dfpb/preview/{pageId}?token=…): Der Entwurf ist ohne Admin-Konto sichtbar, die Seite wird nie gecacht und liefert einen X-Robots-Tag: noindex, nofollow-Header.

Mehrsprachig und Multi-Verkaufskanal

Name, Slug, SEO-Felder und Inhalt sind je Shopware-Sprache übersetzbar. Eine Seite wird einem oder mehreren Verkaufskanälen zugewiesen; sie wird unter /p/{slug} nur für die zugeordneten Kanäle ausgeliefert, in der Sprache des aktuellen Kontexts.

SEO

Pro Seite und Sprache verwalten Sie Meta-Titel, Meta-Beschreibung und Indexierung (noindex). Der Storefront-Controller schreibt diese Metadaten in die gerenderte Seite und erzwingt in der Vorschau noindex,nofollow. Slug-Änderungen erzeugen 301-Weiterleitungen, um Rankings zu erhalten.

Konfiguration

Gehen Sie zu Erweiterungen → Meine Erweiterungen → DataFirefly Page Builder → Konfiguration. Die Karte Allgemein bietet zwei Einstellungen:

• Gültigkeit des Vorschaulinks (previewTokenLifetime, Standard: 3600 Sekunden).
• Aufbewahrung von Formulareinsendungen (submissionRetentionDays, Standard: 90 Tage; 0 = unbegrenzt aufbewahren).

Formulare

Der Formular-Block wird mit einem visuellen Feld-Editor konfiguriert und enthält Spam-Schutz per Honeypot und Zeitfalle sowie eine verpflichtende DSGVO-Einwilligung. Einsendungen werden in der Datenbank gespeichert und gemäß der konfigurierten Aufbewahrung automatisch bereinigt. Bei jeder Einsendung wird ein FormSubmittedEvent ausgelöst, um Ihre Integrationen (Flow Builder, E-Mail, Webhook usw.) anzubinden.

Technische Architektur

Das Plugin folgt den Shopware-6.7-Konventionen: Entitäten über die Data Abstraction Layer (DAL), Inhalt als versioniertes JSON, Storefront- und API-Controller, Messenger-Zeitaufgaben und SQL-Migrationen.

Entitäten und Data Abstraction Layer

Die Hauptentität datafirefly_pb_page (PageDefinition) trägt den Status, die Daten publishedAt/scheduledAt, die Option noIndex sowie die übersetzbaren Felder name, slug, metaTitle, metaDescription, draftContent und publishedContent. Sie ist ManyToMany mit Verkaufskanälen und OneToMany mit ihren Versionen verknüpft (mit CascadeDelete). Die sechs Entitäten des Plugins verwenden das Präfix datafirefly_pb_:

• datafirefly_pb_page und datafirefly_pb_page_translation: die Seite und ihre Übersetzungen.
• datafirefly_pb_page_sales_channel: Zuordnung zu Verkaufskanälen.
• datafirefly_pb_page_version: bei der Veröffentlichung erstellte Inhalts-Snapshots.
• datafirefly_pb_saved_block: wiederverwendbare gespeicherte Blöcke.
• datafirefly_pb_form_submission: Formulareinsendungen.

Der Seiteninhalt ist strukturiertes, versioniertes JSON (schemaVersion), um künftige Migrationen zu ermöglichen. Zwei Migrationen initialisieren das Schema: Migration1781222400InitialSchema und Migration1781222402SlugRedirect (Slug-Weiterleitungstabelle).

Routen

Die Controller werden per Attribute importiert (Resources/config/routes.xml).

• GET /p/{slug} → frontend.dfpb.page.detail: rendert die veröffentlichte Seite (HTTP-Cache aktiv). Passt der Slug nicht mehr, wird per Weiterleitungstabelle eine 301-Weiterleitung auf den neuen Slug ausgegeben.
• GET /dfpb/preview/{pageId}?token=… → frontend.dfpb.page.preview: rendert den Entwurf mit signiertem Token, ohne Cache, als noindex,nofollow.
• GET /api/_action/dfpb/preview-token/{pageId}: erzeugt ein Vorschau-Token (ACL datafirefly_pb_page:read).
• POST /api/_action/dfpb/publish/{pageId}: veröffentlicht die Seite (ACL datafirefly_pb_page:update).

Geplante Aufgaben

• PublishScheduledPagesTask: veröffentlicht fällige geplante Seiten (läuft alle 5 Minuten).
• CleanupFormSubmissionsTask: bereinigt Formulareinsendungen über die konfigurierte Aufbewahrung hinaus.

Zugriffskontrolle (ACL)

Das Plugin deklariert Rechte rund um die Seiten-Entität: datafirefly_pb_page.viewer, .editor, .creator und .deleter sowie ein separates Recht editor_html, das zum Bearbeiten des HTML-Blocks erforderlich ist. Shopware setzt die Admin-Rollen aus diesen Rechten zusammen.

Sicherheit und Bereinigung

Sämtlicher Rich-Content wird serverseitig über den Twig-Filter dfpb_sanitize bereinigt (Tag-Whitelist), die Blocktypen unterliegen selbst einer Whitelist, und Inline-Styles werden per regulärem Ausdruck gefiltert. Das Seiten-JSON kann niemals rohes Twig einschleusen; das Standard-Escaping von Twig greift beim Rendern. Vorschau-Tokens sind signiert (HMAC über APP_SECRET) und laufen ab.

Erweiterung durch Drittanbieter-Plugins

Um einen benutzerdefinierten Block hinzuzufügen, dekorieren Sie den Service DataFirefly\PageBuilder\Service\BlockRegistry und rufen register(type, template, label) auf, um den Typ und sein Twig-Render-Template zu registrieren; deklarieren Sie anschließend den passenden Typ auf der Administrationsseite (Vue-Bearbeitungskomponente).

Datenschutz (DSGVO)

Blöcke mit Drittanbieter-Inhalten nutzen eine Einwilligungs-Fassade: YouTube- (youtube-nocookie) oder Vimeo-Video (dnt=1) wird erst nach einem expliziten Klick geladen — kein Drittanbieter-Aufruf beim Seitenaufbau. Formulare erfordern eine DSGVO-Einwilligung, und Einsendungen werden gemäß der konfigurierten Aufbewahrung automatisch bereinigt.

Bekannte Einschränkungen der v1

• Der Administrations-Editor ist strukturell (Block-Canvas), kein iframe-WYSIWYG der echten Storefront.
• Die manuelle Veröffentlichung kopiert den Entwurf in die veröffentlichte Version; die geplante Veröffentlichung umfasst alle Sprachen.
• Noch nicht enthalten: fertige Seitenvorlagen, synchronisierte globale Blöcke, Sichtbarkeitsregeln (Rule Builder), Import/Export, Responsive-Overrides je Breakpoint und ein KI-Assistent.

Deinstallation

Bei der Deinstallation werden die Plugin-Tabellen (datafirefly_pb_slug_redirect, datafirefly_pb_form_submission, datafirefly_pb_saved_block, datafirefly_pb_page_version, datafirefly_pb_page_sales_channel, datafirefly_pb_page_translation, datafirefly_pb_page) gelöscht — außer die Option „Benutzerdaten behalten“ ist aktiviert.

Fehlerbehebung

• Eine veröffentlichte Seite liefert 404: Prüfen Sie, dass die Seite im Status „veröffentlicht“ ist, ihr Slug korrekt ist und sie dem aktuellen Verkaufskanal zugewiesen ist.
• Das Administrationsmodul lädt nicht: Führen Sie bin/build-administration.sh, assets:install und dann cache:clear erneut aus und erzwingen Sie ein Neuladen im Browser (Strg+F5).
• Der Vorschaulink ist ungültig oder abgelaufen: Erzeugen Sie ihn neu; prüfen Sie, dass APP_SECRET gesetzt ist, und erhöhen Sie bei Bedarf die Token-Gültigkeit in der Konfiguration.
• Die geplante Veröffentlichung wird nicht ausgelöst: Stellen Sie sicher, dass der Shopware-Worker (Messenger / geplante Aufgaben) läuft; die Aufgabe läuft alle 5 Minuten.
• Formulareinsendungen werden nicht bereinigt: Prüfen Sie den Aufbewahrungswert in der Konfiguration (0 = unbegrenzt) und dass die Bereinigungsaufgabe geplant ist.