DF Product Story — Blocs storytelling fiche produit
Installer et utiliser DF Product Story : builder drag & drop, blocs storytelling, traduction et ciblage par produit ou catégorie.
Présentation
DF Product Story ajoute des sections storytelling riches sur vos fiches produit PrestaShop 8 et 9 : blocs image + texte alterné, vidéo click-to-play, tableau comparatif, grille d’icônes bénéfices et texte libre. Les stories se composent dans un builder drag & drop en back-office puis s’affichent automatiquement sur les produits ou catégories que vous ciblez — sous la description ou dans un onglet dédié.
Une story assignée à une catégorie couvre automatiquement tous ses produits. Les assignations produit directes restent prioritaires : idéal pour donner un contenu spécifique à vos best-sellers.
Installation
- Dans votre back-office PrestaShop, allez dans Modules > Gestionnaire de modules > Installer un module.
- Téléversez le fichier
dfproductstory-1.0.0.zip. - Cliquez sur Installer. Le module crée ses tables, son onglet d’administration et les titres d’onglet par défaut en FR/EN/ES/DE/IT.
Après installation, deux entrées sont disponibles : la page de configuration du module (Modules > DF Product Story > Configurer) et le gestionnaire de stories sous Catalogue > DF Product Story.
Configuration générale
La page de configuration du module contient trois réglages :
- Emplacement d’affichage : « Sous le contenu produit » (hook displayFooterProduct, par défaut) ou « Onglet produit supplémentaire » (hook displayProductExtraContent, à côté de la description).
- Titre de l’onglet : libellé multilingue utilisé uniquement en mode onglet. Des valeurs par défaut sont fournies dans les cinq langues.
- Lazy-load des vidéos : activé par défaut. Remplace les iframes YouTube/Vimeo par une façade click-to-play légère — fortement recommandé pour les Core Web Vitals.
Créer une story
- Allez dans Catalogue > DF Product Story puis cliquez sur Ajouter une story.
- Renseignez le nom interne (jamais affiché en front), la priorité (plus le chiffre est bas, plus la story s’affiche haut quand plusieurs se cumulent) et le statut Actif.
- Ajoutez vos blocs via les boutons + Ajouter un bloc, remplissez-les, puis cliquez sur Enregistrer la story.
L’enregistrement se fait en AJAX : vous restez sur la page et pouvez enchaîner les modifications. Un toast confirme chaque sauvegarde.
Les 5 types de blocs
Image + texte
Le bloc signature du storytelling : une image d’un côté, un titre et un texte de l’autre. Choisissez la position de l’image (gauche ou droite) et alternez les blocs pour créer un rythme visuel en zigzag. L’image s’uploade directement depuis le builder (jpg, png, webp, gif — 4 Mo max). Le champ texte accepte le HTML.
Vidéo
Trois sources possibles : YouTube (collez n’importe quelle URL watch, embed, shorts ou youtu.be), Vimeo ou MP4 direct (URL complète du fichier). Avec le lazy-load activé, YouTube et Vimeo s’affichent en façade click-to-play avec miniature — l’iframe n’est chargée qu’au clic, via youtube-nocookie.com et le paramètre dnt=1 de Vimeo. Le champ légende s’affiche sous la vidéo.
Tableau comparatif
Ajoutez autant de colonnes et de lignes que nécessaire avec les boutons + Colonne / + Ligne. Le réglage Colonne mise en avant applique un surlignage bleu à la colonne de votre choix — pratique pour orienter vers votre gamme phare. Le tableau défile horizontalement sur mobile.
Icônes bénéfices
Une grille de 2 à 4 colonnes d’arguments clés. Chaque item comporte une icône (un emoji, un texte court ou le chemin d’une image uploadée), un titre et un texte. Les items se réordonnent avec les flèches.
Texte
Un titre et un contenu HTML libre, pour les sections narratives longues ou tout besoin non couvert par les autres blocs.
Organiser les blocs
- Drag & drop : saisissez la poignée ⋮⋮ d’un bloc et déposez-le sur sa nouvelle position.
- Flèches ↑ ↓ : alternative clavier/souris au drag & drop.
- Dupliquer : copie le bloc avec tous ses réglages et contenus dans toutes les langues.
- Supprimer : demande confirmation avant de retirer le bloc.
Traduire le contenu
En haut du panneau des blocs, des onglets affichent chaque langue active de votre boutique (FR, EN, ES…). Cliquez sur un onglet pour basculer tous les éditeurs dans cette langue : titres, textes, colonnes de tableau et items de bénéfices se traduisent indépendamment. Les réglages structurels (position d’image, source vidéo, nombre de colonnes) sont partagés entre toutes les langues.
Pensez à enregistrer avant de quitter la page : les contenus saisis dans toutes les langues sont envoyés en une seule sauvegarde.
Cibler produits et catégories
Le panneau Ciblage fonctionne en deux niveaux :
- Produits ciblés : recherchez par nom, référence ou ID, puis cliquez sur un résultat pour l’ajouter en chip. Si au moins un produit est sélectionné, la story ne s’affiche que sur ces produits.
- Catégories (fallback) : cochez des catégories dans l’arbre. La story s’affiche sur tous les produits appartenant à ces catégories, sauf si une story produit directe existe déjà pour eux.
Quand plusieurs stories correspondent à un même produit, elles s’affichent toutes, triées par priorité croissante.
Multiboutique
En contexte multiboutique, une story créée depuis le contexte « Toutes les boutiques » est visible sur tout le réseau. Une story créée depuis une boutique précise est limitée à cette boutique.
Performance et RGPD
- Les CSS et JS front ne sont chargés que sur les fiches produit.
- Les images des blocs utilisent le lazy loading natif du navigateur.
- Les vidéos en façade click-to-play ne chargent aucun script tiers avant le clic du visiteur, via youtube-nocookie.com et Vimeo dnt=1 — aucun cookie tiers déposé au chargement de la page.
- Le CSS front est neutre et hérite de la typographie de votre thème.
Désinstallation
La désinstallation supprime les tables du module, les stories et blocs, les assignations, l’onglet d’administration et les valeurs de configuration. Les images uploadées dans le dossier du module sont également retirées avec celui-ci.
FAQ / Dépannage
La story ne s’affiche pas sur le front
- Vérifiez que la story est active et qu’elle contient au moins un bloc avec du contenu dans la langue consultée.
- Vérifiez le ciblage : si des produits sont sélectionnés, la story n’apparaît que sur eux ; sinon elle suit les catégories cochées.
- En mode onglet, certains thèmes fortement personnalisés n’implémentent pas displayProductExtraContent : basculez sur « Sous le contenu produit ».
La vidéo YouTube n’apparaît pas
Vérifiez que l’URL contient bien un identifiant de vidéo valide (formats watch?v=, youtu.be/, embed/ ou shorts/ acceptés). Les playlists seules ne sont pas supportées.
L’upload d’image échoue
Formats acceptés : jpg, jpeg, png, webp, gif, taille maximale 4 Mo. Vérifiez aussi que le dossier du module est accessible en écriture par le serveur web.