DataFirefly Page Builder pour Shopware 6.7 — Installation, configuration et documentation technique

Présentation

Le DataFirefly Page Builder est un éditeur de pages visuel autonome pour Shopware 6.7. Il possède son propre moteur de rendu storefront (Twig) et fonctionne indépendamment du CMS natif « Shopping Experiences ». Vous composez des pages par sections et colonnes, puis remplissez ces colonnes avec des blocs en glisser-déposer, sans écrire de code.

L’éditeur tourne dans l’administration en Vue 3 / Pinia (build Vite de la 6.7) et propose le glisser-déposer, le monter/descendre, la duplication et un undo/redo. Le contenu est enregistré en JSON versionné : un brouillon de travail distinct de la version publiée, un historique de versions créé à chaque publication, la publication planifiée et des liens de prévisualisation signés partageables. Les pages publiées sont servies sur /p/{slug} avec le cache HTTP Shopware actif, et prennent en charge le multilingue et le multi-canaux.

Prérequis

• Shopware ≥ 6.7.0 (shopware/core, shopware/storefront et shopware/administration en ~6.7.0)
• PHP ≥ 8.2
• MySQL 8 / MariaDB 10.11+
• Accès à la ligne de commande pour installer le plugin, compiler les assets et vider le cache
• Variable d’environnement APP_SECRET définie — elle sert à signer les liens de prévisualisation

Installation

1. Copiez le dossier DataFireflyPageBuilder dans custom/plugins/ de votre instance (ou téléversez le ZIP via Extensions → Mes extensions → Téléverser l’extension).
2. Rafraîchissez la liste des plugins, installez puis activez l’extension.
3. Compilez l’administration et le storefront, puis videz le 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

Créer et éditer une page

Ouvrez l’administration puis Contenus → Page Builder et cliquez sur « Créer une page ». L’édition se répartit sur deux onglets.

Onglet Éditeur

Ajoutez d’abord une section (avec un choix de disposition de colonnes), puis déposez des blocs dans les colonnes. Chaque bloc peut être glissé-déposé, monté ou descendu, dupliqué ou supprimé, et toutes les actions sont annulables/rétablissables (undo/redo). Le canvas affiche des aperçus visuels en direct : images, vignettes de galerie, texte riche, boutons, noms de produits et champs de formulaire.

Onglet Paramètres & SEO

Vous y définissez le nom de la page, son slug, son statut, la planification, les canaux de vente d’affectation, le méta-titre, la méta-description et l’option noindex. Le slug est généré automatiquement à partir du nom, son unicité est validée par langue, et tout changement de slug crée une redirection 301 automatique depuis l’ancienne URL.

Blocs disponibles

Le builder livre 15 types de blocs, déclarés dans le BlockRegistry :

• Structure & texte : titre, texte riche (édition WYSIWYG via sw-text-editor), séparateur, espaceur, citation.
• Média : image, galerie (sélecteur multi-images), vidéo (façade RGPD YouTube/Vimeo), HTML/embed.
• Interaction : bouton, accordéon (éditeur d’items visuel), compte à rebours, formulaire (éditeur de champs visuel).
• E-commerce : produit unique et listing produits.

Publier, planifier et versionner

Une page connaît quatre statuts : draft (brouillon), scheduled (planifiée), published (publiée) et archived (archivée).

• Enregistrer le brouillon met à jour le contenu de travail (draftContent) sans toucher à la version en ligne.
• Publier copie le brouillon vers la version publiée (publishedContent) et crée une version d’historique. La publication depuis l’administration traite toutes les langues en une fois, avec un avertissement si une traduction est manquante.
• Planifier : passez la page en statut « Planifiée » avec une date ; une tâche planifiée s’exécute toutes les 5 minutes pour publier automatiquement les pages arrivées à échéance (toutes langues).

Prévisualisation

Le bouton Prévisualiser ouvre le storefront via un lien signé et expirable (/dfpb/preview/{pageId}?token=…) : le brouillon est visible sans compte administrateur, la page n’est jamais mise en cache et renvoie un en-tête X-Robots-Tag: noindex, nofollow.

Multilingue et multi-canaux

Le nom, le slug, les champs SEO et le contenu sont traduisibles par langue Shopware. Une page s’affecte à un ou plusieurs canaux de vente ; elle n’est servie sur /p/{slug} que pour les canaux auxquels elle est rattachée, dans la langue du contexte courant.

SEO

Par page et par langue, vous gérez le méta-titre, la méta-description et l’indexation (noindex). Le contrôleur storefront injecte ces méta-données dans la page rendue et force noindex,nofollow en prévisualisation. Les changements de slug génèrent des redirections 301 pour préserver le référencement.

Configuration

Rendez-vous dans Extensions → Mes extensions → DataFirefly Page Builder → Configuration. La carte Général expose deux réglages :

• Durée de vie du lien de prévisualisation (previewTokenLifetime, défaut : 3600 secondes).
• Rétention des soumissions de formulaires (submissionRetentionDays, défaut : 90 jours ; 0 = conservation illimitée).

Formulaires

Le bloc formulaire se configure avec un éditeur de champs visuel et intègre une protection anti-spam par honeypot et piège temporel, ainsi qu’un consentement RGPD obligatoire. Les soumissions sont stockées en base avec une purge automatique selon la rétention configurée. À chaque envoi, un événement FormSubmittedEvent est déclenché pour brancher vos intégrations (Flow Builder, e-mail, webhook, etc.).

Architecture technique

Le plugin suit les conventions Shopware 6.7 : entités déclarées via la Data Abstraction Layer (DAL), contenu stocké en JSON versionné, contrôleurs storefront et API, tâches planifiées Messenger et migrations SQL.

Entités et Data Abstraction Layer

L’entité principale datafirefly_pb_page (PageDefinition) porte le statut, les dates publishedAt/scheduledAt, l’option noIndex, ainsi que les champs traduisibles name, slug, metaTitle, metaDescription, draftContent et publishedContent. Elle est associée en ManyToMany aux canaux de vente et en OneToMany à ses versions (avec CascadeDelete). Les six entités du plugin utilisent le préfixe datafirefly_pb_ :

• datafirefly_pb_page et datafirefly_pb_page_translation : la page et ses traductions.
• datafirefly_pb_page_sales_channel : affectation aux canaux de vente.
• datafirefly_pb_page_version : snapshots du contenu créés à la publication.
• datafirefly_pb_saved_block : blocs sauvegardés réutilisables.
• datafirefly_pb_form_submission : soumissions de formulaires.

Le contenu de page est un JSON structuré versionné (schemaVersion) pour permettre les migrations futures. Deux migrations initialisent le schéma : Migration1781222400InitialSchema et Migration1781222402SlugRedirect (table de redirections de slug).

Routes

Les contrôleurs sont importés par attributs (Resources/config/routes.xml).

• GET /p/{slug} → frontend.dfpb.page.detail : rend la page publiée (cache HTTP actif). Si le slug ne correspond plus, une redirection 301 est émise vers le nouveau slug via la table de redirections.
• GET /dfpb/preview/{pageId}?token=… → frontend.dfpb.page.preview : rendu du brouillon avec token signé, sans cache, en noindex,nofollow.
• GET /api/_action/dfpb/preview-token/{pageId} : génère un token de prévisualisation (ACL datafirefly_pb_page:read).
• POST /api/_action/dfpb/publish/{pageId} : publie la page (ACL datafirefly_pb_page:update).

Tâches planifiées

• PublishScheduledPagesTask : publie les pages planifiées arrivées à échéance (exécution toutes les 5 minutes).
• CleanupFormSubmissionsTask : purge les soumissions de formulaires au-delà de la rétention configurée.

Contrôle d’accès (ACL)

Le plugin déclare des privilèges autour de l’entité page : datafirefly_pb_page.viewer, .editor, .creator et .deleter, plus un privilège distinct editor_html requis pour éditer le bloc HTML. Shopware compose les rôles administrateur à partir de ces privilèges.

Sécurité et sanitisation

Tout contenu riche est assaini côté serveur via le filtre Twig dfpb_sanitize (whitelist de balises), les types de blocs sont eux-mêmes soumis à une whitelist, et les styles inline sont filtrés par expression régulière. Le JSON de page ne peut jamais injecter de Twig brut ; l’échappement Twig par défaut s’applique au rendu. Les tokens de prévisualisation sont signés (HMAC via APP_SECRET) et expirables.

Extension par des plugins tiers

Pour ajouter un bloc custom, décorez le service DataFirefly\PageBuilder\Service\BlockRegistry et appelez register(type, template, label) pour enregistrer le type et son template Twig de rendu, puis déclarez le type correspondant côté administration (composant d’édition Vue).

Confidentialité (RGPD)

Les blocs à contenu tiers utilisent une façade à consentement : la vidéo YouTube (youtube-nocookie) ou Vimeo (dnt=1) n’est chargée qu’après un clic explicite — aucun appel tiers au chargement de la page. Les formulaires imposent un consentement RGPD, et les soumissions font l’objet d’une purge automatique selon la rétention configurée.

Limites connues de la v1

• L’éditeur d’administration est structurel (canvas par blocs), et non un WYSIWYG en iframe du storefront réel.
• La publication manuelle copie le brouillon vers la version publiée ; la publication planifiée couvre toutes les langues.
• Ne sont pas encore inclus : templates de pages prêts à l’emploi, blocs globaux synchronisés, règles de visibilité (Rule Builder), import/export, surcharges responsive par point de rupture et assistant IA.

Désinstallation

À la désinstallation, les tables du plugin (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) sont supprimées — sauf si l’option « conserver les données de l’utilisateur » est cochée.

Dépannage

• Une page publiée renvoie 404 : vérifiez que la page est bien en statut « publiée », que son slug est correct et qu’elle est affectée au canal de vente courant.
• Le module d’administration ne se charge pas : relancez bin/build-administration.sh, assets:install puis cache:clear, et forcez le rechargement navigateur (Ctrl+F5).
• Le lien de prévisualisation est invalide ou expiré : régénérez-le ; vérifiez que APP_SECRET est défini et augmentez au besoin la durée de vie du token dans la configuration.
• La publication planifiée ne se déclenche pas : assurez-vous que le worker Shopware (Messenger / scheduled tasks) tourne ; la tâche s’exécute toutes les 5 minutes.
• Les soumissions de formulaires ne sont pas purgées : vérifiez la valeur de rétention dans la configuration (0 = illimité) et que la tâche de nettoyage est bien planifiée.