DF Product Story — Bloques storytelling ficha de producto
Instalar y usar DF Product Story: constructor drag & drop, bloques storytelling, traducción y segmentación por producto o categoría.
Presentación
DF Product Story añade secciones de storytelling ricas a tus fichas de producto PrestaShop 8 y 9: bloques de imagen + texto alternado, vídeo click-to-play, tabla comparativa, cuadrícula de iconos de beneficios y texto libre. Las stories se componen en un constructor drag & drop en el back office y se muestran automáticamente en los productos o categorías que segmentes — bajo la descripción o en una pestaña dedicada.
Una story asignada a una categoría cubre automáticamente todos sus productos. Las asignaciones directas por producto tienen prioridad: perfecto para dar contenido específico a tus superventas.
Instalación
- En tu back office de PrestaShop, ve a Módulos > Gestor de módulos > Subir un módulo.
- Sube el archivo
dfproductstory-1.0.0.zip. - Haz clic en Instalar. El módulo crea sus tablas, su pestaña de administración y los títulos de pestaña por defecto en FR/EN/ES/DE/IT.
Tras la instalación hay dos puntos de entrada: la página de configuración del módulo (Módulos > DF Product Story > Configurar) y el gestor de stories en Catálogo > DF Product Story.
Configuración general
La página de configuración del módulo contiene tres ajustes:
- Ubicación de visualización: «Bajo el contenido del producto» (hook displayFooterProduct, por defecto) o «Pestaña de producto adicional» (hook displayProductExtraContent, junto a la descripción).
- Título de la pestaña: etiqueta multilingüe usada solo en modo pestaña. Se incluyen valores por defecto en los cinco idiomas.
- Lazy-load de vídeos: activado por defecto. Sustituye los iframes de YouTube/Vimeo por una fachada click-to-play ligera — muy recomendado para los Core Web Vitals.
Crear una story
- Ve a Catálogo > DF Product Story y haz clic en Añadir una story.
- Rellena el nombre interno (nunca visible en el front), la prioridad (cuanto más bajo el número, más arriba se muestra la story cuando varias se acumulan) y el estado Activo.
- Añade tus bloques con los botones + Añadir un bloque, rellénalos y haz clic en Guardar story.
El guardado se hace por AJAX: permaneces en la página y puedes seguir editando. Un toast confirma cada guardado.
Los 5 tipos de bloques
Imagen + texto
El bloque insignia del storytelling: una imagen a un lado, un título y un texto al otro. Elige la posición de la imagen (izquierda o derecha) y alterna los bloques para crear un ritmo visual en zigzag. La imagen se sube directamente desde el constructor (jpg, png, webp, gif — máx. 4 MB). El campo de texto acepta HTML.
Vídeo
Tres fuentes posibles: YouTube (pega cualquier URL watch, embed, shorts o youtu.be), Vimeo o MP4 directo (URL completa del archivo). Con el lazy-load activado, YouTube y Vimeo se muestran como fachada click-to-play con miniatura — el iframe solo se carga al hacer clic, mediante youtube-nocookie.com y el parámetro dnt=1 de Vimeo. El campo de leyenda aparece bajo el vídeo.
Tabla comparativa
Añade tantas columnas y filas como necesites con los botones + Columna / + Fila. El ajuste Columna destacada aplica un resaltado azul a la columna que elijas — útil para orientar hacia tu gama estrella. La tabla se desplaza horizontalmente en móvil.
Iconos de beneficios
Una cuadrícula de 2 a 4 columnas de argumentos clave. Cada ítem tiene un icono (un emoji, un texto corto o la ruta de una imagen subida), un título y un texto. Los ítems se reordenan con las flechas.
Texto
Un título y un contenido HTML libre, para secciones narrativas largas o cualquier necesidad no cubierta por los otros bloques.
Organizar los bloques
- Drag & drop: agarra el tirador ⋮⋮ de un bloque y suéltalo en su nueva posición.
- Flechas ↑ ↓: alternativa con teclado/ratón al drag & drop.
- Duplicar: copia el bloque con todos sus ajustes y contenidos en todos los idiomas.
- Eliminar: pide confirmación antes de retirar el bloque.
Traducir el contenido
En la parte superior del panel de bloques, unas pestañas muestran cada idioma activo de tu tienda (FR, EN, ES…). Haz clic en una pestaña para cambiar todos los editores a ese idioma: títulos, textos, columnas de tabla e ítems de beneficios se traducen de forma independiente. Los ajustes estructurales (posición de imagen, fuente de vídeo, número de columnas) se comparten entre todos los idiomas.
Recuerda guardar antes de salir de la página: los contenidos introducidos en todos los idiomas se envían en un solo guardado.
Segmentar productos y categorías
El panel de segmentación funciona en dos niveles:
- Productos objetivo: busca por nombre, referencia o ID y haz clic en un resultado para añadirlo como chip. Si hay al menos un producto seleccionado, la story solo se muestra en esos productos.
- Categorías (fallback): marca categorías en el árbol. La story se muestra en todos los productos de esas categorías, salvo que ya exista una story de producto directa para ellos.
Cuando varias stories coinciden con el mismo producto, se muestran todas, ordenadas por prioridad ascendente.
Multitienda
En contexto multitienda, una story creada desde el contexto «Todas las tiendas» es visible en toda la red. Una story creada desde una tienda concreta queda limitada a esa tienda.
Rendimiento y RGPD
- El CSS y el JS del front solo se cargan en las fichas de producto.
- Las imágenes de los bloques usan el lazy loading nativo del navegador.
- Las fachadas de vídeo click-to-play no cargan ningún script de terceros antes del clic del visitante, mediante youtube-nocookie.com y Vimeo dnt=1 — no se deposita ninguna cookie de terceros al cargar la página.
- El CSS del front es neutro y hereda la tipografía de tu tema.
Desinstalación
La desinstalación elimina las tablas del módulo, las stories y bloques, las asignaciones, la pestaña de administración y los valores de configuración. Las imágenes subidas a la carpeta del módulo también se retiran con él.
FAQ / Solución de problemas
La story no se muestra en el front
- Comprueba que la story está activa y contiene al menos un bloque con contenido en el idioma consultado.
- Revisa la segmentación: si hay productos seleccionados, la story solo aparece en ellos; si no, sigue las categorías marcadas.
- En modo pestaña, algunos temas muy personalizados no implementan displayProductExtraContent: cambia a «Bajo el contenido del producto».
El vídeo de YouTube no aparece
Comprueba que la URL contiene un identificador de vídeo válido (formatos watch?v=, youtu.be/, embed/ o shorts/ aceptados). Las URL de solo playlist no están soportadas.
La subida de imagen falla
Formatos aceptados: jpg, jpeg, png, webp, gif, tamaño máximo 4 MB. Comprueba también que la carpeta del módulo tiene permisos de escritura para el servidor web.