Catálogo PDF para PrestaShop — Guía completa

Presentación

DFPDFCatalog publica sus catálogos PDF directamente en su tienda PrestaShop 8 o 9. El módulo funciona de dos formas complementarias. Primero crea sus propias páginas de front office: una página escaparate que lista todos sus catálogos como banners clicables (/catalogues-pdf) y una página de visor por catálogo (/catalogue-pdf/{id}-{slug}). Después permite integrar cualquier catálogo en cualquier página de su tienda, mediante un shortcode, un widget Smarty o un iframe.

En ambos casos el PDF se muestra en un lector integrado de nivel profesional: modo doble página tipo revista, miniaturas clicables, pantalla completa, zoom, enlaces clicables y texto seleccionable.

Instalación

1. Descargue el archivo ZIP del módulo desde su cuenta DataFirefly.
2. En el back office de PrestaShop, vaya a Módulos → Gestor de módulos → Subir un módulo.
3. Seleccione el archivo dfpdfcatalog.zip y confirme.
4. El módulo se instala automáticamente: tablas de base de datos, pestaña de administración y rutas de front se crean sin ninguna configuración manual.

Tras la instalación aparece una nueva pestaña Catálogos PDF en el menú Catálogo del back office.

El mismo archivo se instala en PrestaShop 8.0 a 8.2 y en PrestaShop 9.x. No hay que descargar una versión distinta según su generación.

Actualización desde una versión anterior

1. Suba la nueva versión desde Módulos → Gestor de módulos → Subir un módulo (o reemplace la carpeta /modules/dfpdfcatalog/ por FTP).
2. Vacíe la caché de PrestaShop: Parámetros avanzados → Rendimiento → Vaciar caché.

La actualización conserva sus catálogos existentes: las tablas de base de datos y los archivos subidos (banners y PDF) no se tocan. Al pasar a la 1.2.0, el módulo registra automáticamente los hooks necesarios para la integración en las páginas.

Añadir un catálogo

1. Vaya a Catálogo → Catálogos PDF y haga clic en Añadir un catálogo.
2. Indique el título (traducible por idioma). También se usa para generar el slug de la URL y el meta title de la página.
3. Indique la descripción (traducible). Se muestra en la página del visor y se usa como meta description.
4. Suba la imagen de banner. Aparece en la cuadrícula de la página escaparate y sirve de cartel de apertura cuando el catálogo se integra en una página.
5. Suba el archivo PDF.
6. Defina la posición (orden de visualización en la cuadrícula) y el estado activo/inactivo.
7. En multitienda, marque las tiendas en las que debe aparecer el catálogo.
8. Guarde: el catálogo es visible de inmediato en /catalogues-pdf.

Una vez guardado el catálogo, vuelva a abrirlo: el formulario muestra un bloque Códigos de integración con los cuatro códigos listos para copiar y mostrarlo en otro lugar de su tienda. Haga clic en un campo para seleccionarlo.

Integrar un catálogo en una página

La página escaparate no sirve para todos los casos. Para una landing page sectorial, una página de contratación pública o una categoría que debe presentar su propio catálogo, puede colocar el visor exactamente donde quiera.

Método recomendado: el shortcode

Pegue este marcador en el contenido de su página, justo donde debe aparecer el catálogo:

[dfpdfcatalog id="3"]

Sustituya 3 por el identificador del catálogo, visible en la columna ID de la lista Catálogo → Catálogos PDF. El shortcode funciona en:

• el contenido de las páginas CMS;
• las descripciones de categoría;
• las descripciones de producto.

En estos tres contextos el módulo sustituye el marcador en el servidor, antes de enviar la página. Para cualquier otro contexto (bloques del tema, módulos de terceros, page builders), una alternativa JavaScript detecta el marcador en la página y monta el visor en el mismo sitio. No hay nada que configurar: el resultado es idéntico para el visitante.

Opciones del shortcode

• id — identificador del catálogo. Obligatorio.
• mode — click (por defecto) muestra primero un cartel construido con el banner del catálogo y solo carga el visor al hacer clic. inline muestra el visor directamente, cargado al acercarse al viewport.
• height — altura del visor en píxeles. Por defecto el visor ocupa el 80% de la altura de la pantalla.
• title — texto mostrado en el cartel de apertura. Por defecto, el título del catálogo.

[dfpdfcatalog id="3" mode="inline" height="800"]

Widget Smarty en una plantilla del tema

Para integrar un catálogo directamente en un archivo .tpl de su tema:

{widget name='dfpdfcatalog' id_catalog=3 mode='inline'}

Esta sintaxis solo funciona en las plantillas. El contenido de las páginas CMS no lo interpreta Smarty, así que en ese caso use el shortcode.

Iframe, incluso fuera de PrestaShop

El módulo expone una página de integración sin cabecera ni pie de la tienda, lista para colocarse en un iframe:

<iframe src="/catalogue-pdf-embed/3" width="100%" height="800" style="border:0;" loading="lazy"></iframe>

Es el método indicado para mostrar un catálogo en un sitio externo. Estas páginas de integración están en noindex, por lo que nunca compiten con sus páginas reales en los resultados de búsqueda. Tenga en cuenta que la altura de un iframe es fija: en su propia tienda es preferible el shortcode, que se adapta al contenido.

Varios catálogos en la misma página

Puede colocar tantos catálogos como necesite en una misma página. Cada integración crea un visor independiente, con sus propios controles de navegación, su zoom y su modo de visualización. Los atajos de teclado solo actúan sobre el visor en uso, no sobre todos a la vez.

La carga está optimizada precisamente para este escenario:

• en modo click no se descarga ningún PDF hasta que el visitante abre un catálogo;
• en modo inline la carga se activa al acercarse al viewport;
• la biblioteca de renderizado y la hoja de estilos se descargan una sola vez para toda la página, y solo si hay realmente un catálogo presente.

Una página con ocho catálogos en modo click solo carga inicialmente ocho imágenes de banner.

Páginas de front office

Página escaparate

La página /catalogues-pdf muestra todos los catálogos activos de la tienda actual como una cuadrícula de banners, ordenados por posición. Cada banner enlaza con el visor del catálogo. La página genera su propio meta title y su meta description, y se integra en las migas de pan nativas de PrestaShop.

Página del visor

Cada catálogo tiene su propia página /catalogue-pdf/{id}-{slug}. El PDF se muestra en el visor integrado, con un botón para volver al escaparate y un botón de descarga directa. El PDF se sirve mediante un controlador PHP en visualización inline, lo que fuerza la visualización en el navegador. Se admiten las peticiones HTTP Range, de modo que los catálogos grandes se cargan progresivamente en lugar de una sola vez.

Usar el visor

El visor se basa en PDF.js (Mozilla) y ofrece los siguientes controles en su barra de herramientas:

• Miniaturas — muestra u oculta la barra lateral de miniaturas de páginas. Las miniaturas son clicables y se generan a medida que se desplaza (renderizado diferido), incluso en catálogos muy largos. La página o páginas activas se resaltan.
• Doble página — alterna entre la visualización página a página y el modo doble página tipo revista: portada sola y luego pares 2-3, 4-5, etc. Este modo está activado por defecto en pantallas de al menos 1024 px de ancho.
• Navegación — botones anterior y siguiente, indicador de página (por ejemplo «Página 4-5 / 24» en modo doble página). Las flechas izquierda y derecha del teclado también funcionan.
• Zoom — acercar y alejar en pasos del 25% y botón de ajuste automático al ancho.
• Pantalla completa — pone el visor a pantalla completa mediante la API nativa del navegador. En iOS Safari se usa automáticamente un modo de pantalla completa simulado. La tecla Escape permite salir.

Los hipervínculos del PDF siguen siendo clicables: los enlaces externos se abren en una nueva pestaña y los enlaces internos (sumario, referencias cruzadas) navegan directamente dentro del visor. Si el PDF contiene una capa de texto, el texto es seleccionable, copiable y la búsqueda Ctrl+F del navegador funciona sobre el contenido.

El renderizado usa la densidad de píxeles de la pantalla (HiDPI): las páginas son nítidas en pantallas Retina y 4K.

SEO y URLs

El módulo declara sus rutas mediante el hook moduleRoutes de PrestaShop:

• /catalogues-pdf — página escaparate, con meta title y meta description propios.
• /catalogue-pdf/{id}-{slug} — una URL limpia por catálogo, donde el slug se genera automáticamente a partir del título. El meta title recoge el título del catálogo y la meta description su descripción.
• /catalogue-pdf-embed/{id} — página de integración destinada a los iframes, en noindex.

No hay que crear ninguna página CMS: las rutas se registran automáticamente en la instalación.

Multiidioma y multitienda

Los títulos y descripciones se traducen campo a campo en el formulario de edición (selector de idioma estándar de PrestaShop). Cada idioma genera su propio slug y sus propios metadatos. En multitienda, la asociación catálogo/tienda se gestiona con casillas: cada tienda muestra únicamente los catálogos que tiene asignados. Este filtrado se aplica también al acceso directo por URL y a las integraciones en páginas: un catálogo no asignado a la tienda actual nunca se sirve ahí.

Resolución de problemas

El shortcode aparece como texto plano en la página

• Compruebe que el identificador corresponde a un catálogo existente, activo y asignado a la tienda actual. Un identificador desconocido deja el marcador intacto en lugar de mostrar un visor vacío.
• Compruebe que el catálogo contiene realmente un archivo PDF.
• Vacíe la caché de PrestaShop y recargue la página en una ventana privada.
• Si acaba de actualizar el módulo, desinstálelo y vuelva a instalarlo para forzar el registro de los hooks de integración.

El PDF no se muestra

• Compruebe que el archivo PDF se ha subido correctamente (vuelva a abrir el catálogo en el back office).
• Vacíe la caché de PrestaShop y recargue la página en una ventana privada.
• Si aparece un mensaje de error en el visor, se ofrece un enlace de descarga directa del PDF como alternativa.

El texto no es seleccionable o Ctrl+F no encuentra nada

La selección de texto requiere que el PDF contenga una capa de texto. Los PDF escaneados o exportados como mapa de bits puro no la tienen: en ese caso solo es posible la visualización gráfica. Pase el documento por una herramienta de OCR si necesita el texto.

Los enlaces del PDF no son clicables

Los enlaces deben ser auténticas anotaciones de enlace dentro del PDF (creadas por la herramienta de exportación: InDesign, Word, LibreOffice, etc.). Un texto que parece una URL pero sin anotación no será clicable.

Las páginas aparecen estiradas o borrosas

Este problema de las versiones 1.0.0 está corregido desde la versión 1.0.1 (renderizado HiDPI y neutralización de los resets CSS de los temas). Actualice el módulo y vacíe la caché de PrestaShop.

Historial de versiones

• 1.2.0 (2026-08-10) — Integración de un catálogo en cualquier página mediante shortcode, widget Smarty o iframe; sustitución en el servidor en páginas CMS, categorías y fichas de producto, con alternativa JavaScript; visor reescrito en instancias independientes (varios catálogos por página); carga diferida; códigos de integración listos para copiar en el back office; soporte de peticiones HTTP Range.
• 1.1.0 (2026-08-10) — Compatibilidad con PrestaShop 9; corrección de la asociación de tienda en el formulario de edición; filtrado por tienda aplicado al acceso directo por URL; validación del contenido real de los archivos subidos.
• 1.0.4 (2026-05-11) — Modo pantalla completa (API nativa más alternativa para iOS Safari); corrección del ajuste al ancho de la portada en modo doble página; resaltado de los botones activos.
• 1.0.3 (2026-05-11) — Modo doble página tipo revista (portada sola y luego 2-3, 4-5…); activación automática en pantallas anchas; cancelación limpia de los renderizados en navegaciones rápidas.
• 1.0.2 (2026-05-11) — Barra lateral de miniaturas clicables con renderizado diferido; capa de texto (selección y Ctrl+F); botón para mostrar las miniaturas.
• 1.0.1 (2026-05-11) — Renderizado HiDPI nítido en Retina y 4K; enlaces del PDF clicables (capa de anotaciones); corrección del estiramiento vertical de las páginas.
• 1.0.0 (2026-05-08) — Versión inicial: página escaparate, visor integrado, URLs SEO, multiidioma, multitienda.