PDF-Katalog für PrestaShop — Vollständige Anleitung

Überblick

DFPDFCatalog veröffentlicht Ihre PDF-Kataloge direkt in Ihrem PrestaShop 8 oder 9. Das Modul arbeitet auf zwei sich ergänzende Weisen. Zunächst erstellt es eigene Frontend-Seiten: eine Schaufensterseite, die alle Ihre Kataloge als anklickbare Banner auflistet (/catalogues-pdf), und eine Viewer-Seite pro Katalog (/catalogue-pdf/{id}-{slug}). Darüber hinaus können Sie jeden Katalog in jede Seite Ihres Shops einbetten, per Shortcode, Smarty-Widget oder iframe.

In beiden Fällen wird das PDF in einem integrierten Reader auf professionellem Niveau angezeigt: Magazin-Doppelseitenmodus, anklickbare Miniaturen, Vollbild, Zoom, anklickbare Links und markierbarer Text.

Installation

1. Laden Sie die ZIP-Datei des Moduls in Ihrem DataFirefly-Konto herunter.
2. Gehen Sie im PrestaShop-Back-Office zu Module → Modulmanager → Modul hochladen.
3. Wählen Sie die Datei dfpdfcatalog.zip aus und bestätigen Sie.
4. Das Modul installiert sich automatisch: Datenbanktabellen, Admin-Tab und Frontend-Routen werden ohne manuelle Konfiguration angelegt.

Nach der Installation erscheint ein neuer Tab PDF-Kataloge im Menü Katalog des Back Office.

Dasselbe Archiv lässt sich in PrestaShop 8.0 bis 8.2 und in PrestaShop 9.x installieren. Je nach Generation ist kein separater Download nötig.

Update von einer früheren Version

1. Laden Sie die neue Version über Module → Modulmanager → Modul hochladen hoch (oder ersetzen Sie den Ordner /modules/dfpdfcatalog/ per FTP).
2. Leeren Sie den PrestaShop-Cache: Erweiterte Einstellungen → Leistung → Cache leeren.

Das Update erhält Ihre bestehenden Kataloge: Datenbanktabellen und hochgeladene Dateien (Banner und PDFs) bleiben unangetastet. Beim Wechsel auf 1.2.0 registriert das Modul automatisch die Hooks, die für die Einbettung in Seiten benötigt werden.

Einen Katalog hinzufügen

1. Gehen Sie zu Katalog → PDF-Kataloge und klicken Sie auf Katalog hinzufügen.
2. Tragen Sie den Titel ein (je Sprache übersetzbar). Er dient auch zur Erzeugung des URL-Slugs und des Meta-Title der Seite.
3. Tragen Sie die Beschreibung ein (übersetzbar). Sie wird auf der Viewer-Seite angezeigt und als Meta-Description verwendet.
4. Laden Sie das Bannerbild hoch. Es erscheint im Raster der Schaufensterseite und dient als Eröffnungsbild, wenn der Katalog in eine Seite eingebettet wird.
5. Laden Sie die PDF-Datei hoch.
6. Legen Sie die Position (Anzeigereihenfolge im Raster) und den Status aktiv/inaktiv fest.
7. Im Multistore-Betrieb wählen Sie die Shops aus, in denen der Katalog erscheinen soll.
8. Speichern Sie: Der Katalog ist sofort unter /catalogues-pdf sichtbar.

Öffnen Sie den gespeicherten Katalog erneut: Das Formular zeigt einen Block Einbettungscodes mit den vier kopierfertigen Codes, um ihn an anderer Stelle in Ihrem Shop anzuzeigen. Ein Klick in ein Feld markiert den Inhalt.

Einen Katalog in eine Seite einbetten

Eine Schaufensterseite passt nicht zu jedem Anwendungsfall. Für eine branchenspezifische Landingpage, eine Seite für öffentliche Aufträge oder eine Kategorie, die ihren eigenen Katalog zeigen soll, platzieren Sie den Viewer genau dort, wo Sie ihn brauchen.

Empfohlene Methode: der Shortcode

Fügen Sie diese Markierung genau an der Stelle in den Seiteninhalt ein, an der der Katalog erscheinen soll:

[dfpdfcatalog id="3"]

Ersetzen Sie 3 durch die ID des Katalogs, sichtbar in der ID-Spalte der Liste Katalog → PDF-Kataloge. Der Shortcode funktioniert in:

• dem Inhalt von CMS-Seiten;
• Kategoriebeschreibungen;
• Produktbeschreibungen.

In diesen drei Kontexten ersetzt das Modul die Markierung serverseitig, bevor die Seite ausgeliefert wird. In allen anderen Kontexten (Theme-Blöcke, Drittanbieter-Module, Page Builder) erkennt ein JavaScript-Fallback die Markierung auf der Seite und hängt den Viewer an derselben Stelle ein. Es ist nichts zu konfigurieren: Für den Besucher ist das Ergebnis identisch.

Optionen des Shortcodes

• id — ID des Katalogs. Pflichtangabe.
• mode — click (Standard) zeigt zuerst ein Bild auf Basis des Katalogbanners und lädt den Viewer erst beim Klick. inline zeigt den Viewer direkt und lädt ihn beim Annähern an den Viewport.
• height — Höhe des Viewers in Pixeln. Standardmäßig nimmt der Viewer 80% der Bildschirmhöhe ein.
• title — Beschriftung auf dem Eröffnungsbild. Standard ist der Katalogtitel.

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

Smarty-Widget in einem Theme-Template

So betten Sie einen Katalog direkt in eine .tpl-Datei Ihres Themes ein:

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

Diese Syntax funktioniert nur in Templates. Der Inhalt von CMS-Seiten wird nicht von Smarty verarbeitet, verwenden Sie dort den Shortcode.

Iframe, auch außerhalb von PrestaShop

Das Modul stellt eine Einbettungsseite ohne Kopf- und Fußbereich des Shops bereit, die in ein iframe eingesetzt werden kann:

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

Das ist die Methode der Wahl, um einen Katalog auf einer externen Website anzuzeigen. Diese Einbettungsseiten stehen auf noindex und konkurrieren daher nie mit Ihren echten Seiten in den Suchergebnissen. Beachten Sie, dass die Höhe eines iframe fest ist: Bevorzugen Sie im eigenen Shop den Shortcode, der sich an den Inhalt anpasst.

Mehrere Kataloge auf derselben Seite

Sie können beliebig viele Kataloge auf derselben Seite platzieren. Jede Einbettung erzeugt einen unabhängigen Viewer mit eigenen Navigationselementen, eigenem Zoom und eigenem Anzeigemodus. Tastenkürzel wirken nur auf den gerade genutzten Viewer, nicht auf alle gleichzeitig.

Das Laden ist genau für dieses Szenario optimiert:

• im Modus click wird kein PDF geladen, solange der Besucher keinen Katalog öffnet;
• im Modus inline startet das Laden beim Annähern an den Viewport;
• Rendering-Bibliothek und Stylesheet werden nur einmal für die gesamte Seite geladen, und nur dann, wenn tatsächlich ein Katalog vorhanden ist.

Eine Seite mit acht Katalogen im Modus click lädt anfangs also nur acht Bannerbilder.

Frontend-Seiten

Schaufensterseite

Die Seite /catalogues-pdf zeigt alle aktiven Kataloge des aktuellen Shops als Bannerraster, sortiert nach Position. Jedes Banner führt zum Viewer des Katalogs. Die Seite erzeugt einen eigenen Meta-Title und eine eigene Meta-Description und fügt sich in die native PrestaShop-Breadcrumb ein.

Viewer-Seite

Jeder Katalog hat seine eigene Seite /catalogue-pdf/{id}-{slug}. Das PDF wird dort im integrierten Viewer angezeigt, mit einer Schaltfläche zurück zum Schaufenster und einer Schaltfläche für den direkten Download. Das PDF wird über einen PHP-Controller in Inline-Anzeige ausgeliefert, was die Darstellung im Browser erzwingt. HTTP-Range-Anfragen werden unterstützt, sodass große Kataloge schrittweise statt auf einmal geladen werden.

Den Viewer verwenden

Der Viewer basiert auf PDF.js (Mozilla) und bietet folgende Bedienelemente in seiner Werkzeugleiste:

• Miniaturen — blendet die Seitenleiste mit den Seitenminiaturen ein oder aus. Die Miniaturen sind anklickbar und werden beim Scrollen nach und nach erzeugt (verzögertes Rendering), auch bei sehr langen Katalogen. Die aktive Seite oder Doppelseite wird hervorgehoben.
• Doppelseite — wechselt zwischen Einzelseitenanzeige und Magazin-Doppelseitenmodus: Titelseite allein, dann Paare 2-3, 4-5 und so weiter. Dieser Modus ist auf Bildschirmen ab 1024 px Breite standardmäßig aktiv.
• Navigation — Schaltflächen vor und zurück, Seitenanzeige (zum Beispiel „Seite 4-5 / 24“ im Doppelseitenmodus). Die Pfeiltasten links und rechts funktionieren ebenfalls.
• Zoom — Vergrößern und Verkleinern in 25-Prozent-Schritten sowie eine Schaltfläche für die automatische Breitenanpassung.
• Vollbild — schaltet den Viewer über die native Browser-API in den Vollbildmodus. Auf iOS Safari wird automatisch ein simulierter Vollbildmodus verwendet. Mit der Escape-Taste verlassen Sie ihn.

Die Hyperlinks im PDF bleiben anklickbar: Externe Links öffnen sich in einem neuen Tab, interne Links (Inhaltsverzeichnis, Querverweise) navigieren direkt im Viewer. Enthält das PDF eine Textebene, ist der Text markierbar und kopierbar, und die Ctrl+F-Suche des Browsers arbeitet auf dem Inhalt.

Das Rendering nutzt die Pixeldichte des Bildschirms (HiDPI): Die Seiten sind auf Retina- und 4K-Bildschirmen gestochen scharf.

SEO und URLs

Das Modul deklariert seine Routen über den PrestaShop-Hook moduleRoutes:

• /catalogues-pdf — Schaufensterseite mit eigenem Meta-Title und eigener Meta-Description.
• /catalogue-pdf/{id}-{slug} — eine saubere URL pro Katalog, wobei der Slug automatisch aus dem Titel erzeugt wird. Der Meta-Title übernimmt den Katalogtitel, die Meta-Description die Beschreibung.
• /catalogue-pdf-embed/{id} — Einbettungsseite für iframes, auf noindex gesetzt.

Es muss keine CMS-Seite angelegt werden: Die Routen werden bei der Installation automatisch registriert.

Mehrsprachig und Multistore

Titel und Beschreibungen werden im Bearbeitungsformular Feld für Feld übersetzt (Standard-Sprachauswahl von PrestaShop). Jede Sprache erzeugt ihren eigenen Slug und ihre eigenen Metaangaben. Im Multistore-Betrieb wird die Zuordnung Katalog zu Shop über Kontrollkästchen verwaltet: Jeder Shop zeigt nur die ihm zugewiesenen Kataloge. Diese Filterung gilt auch beim direkten URL-Aufruf und bei Einbettungen in Seiten: Ein Katalog, der dem aktuellen Shop nicht zugewiesen ist, wird dort nie ausgeliefert.

Fehlerbehebung

Der Shortcode erscheint als Klartext auf der Seite

• Prüfen Sie, ob die ID zu einem vorhandenen, aktiven und dem aktuellen Shop zugewiesenen Katalog gehört. Eine unbekannte ID lässt die Markierung unverändert stehen, statt einen leeren Viewer anzuzeigen.
• Prüfen Sie, ob der Katalog tatsächlich eine PDF-Datei enthält.
• Leeren Sie den PrestaShop-Cache und laden Sie die Seite in einem privaten Fenster neu.
• Wenn Sie das Modul gerade aktualisiert haben, deinstallieren und installieren Sie es erneut, um die Registrierung der Einbettungs-Hooks zu erzwingen.

Das PDF wird nicht angezeigt

• Prüfen Sie, ob die PDF-Datei tatsächlich hochgeladen wurde (öffnen Sie den Katalog im Back Office erneut).
• Leeren Sie den PrestaShop-Cache und laden Sie die Seite in einem privaten Fenster neu.
• Erscheint im Viewer eine Fehlermeldung, wird ersatzweise ein direkter Download-Link zum PDF angeboten.

Der Text ist nicht markierbar oder Ctrl+F findet nichts

Die Textauswahl setzt voraus, dass das PDF eine Textebene enthält. Gescannte oder als reine Bitmap exportierte PDFs haben keine: In diesem Fall ist nur die grafische Anzeige möglich. Lassen Sie das Dokument durch ein OCR-Werkzeug laufen, wenn Sie den Text benötigen.

Die Links im PDF sind nicht anklickbar

Links müssen echte Link-Annotationen im PDF sein (erzeugt vom Exportwerkzeug: InDesign, Word, LibreOffice und andere). Ein Text, der lediglich wie eine URL aussieht, aber keine Annotation besitzt, ist nicht anklickbar.

Die Seiten wirken gestreckt oder unscharf

Dieses Problem der Version 1.0.0 ist seit Version 1.0.1 behoben (HiDPI-Rendering und Neutralisierung der CSS-Resets von Themes). Aktualisieren Sie das Modul und leeren Sie den PrestaShop-Cache.

Versionsverlauf

• 1.2.0 (2026-08-10) — Einbettung eines Katalogs in jede Seite per Shortcode, Smarty-Widget oder iframe; serverseitige Ersetzung in CMS-Seiten, Kategorien und Produktseiten, mit JavaScript-Fallback; Viewer als unabhängige Instanzen neu geschrieben (mehrere Kataloge pro Seite); verzögertes Laden; kopierfertige Einbettungscodes im Back Office; Unterstützung von HTTP-Range-Anfragen.
• 1.1.0 (2026-08-10) — PrestaShop-9-Kompatibilität; Korrektur der Shop-Zuordnung im Bearbeitungsformular; Shop-Filterung beim direkten URL-Aufruf angewendet; Prüfung des tatsächlichen Inhalts hochgeladener Dateien.
• 1.0.4 (2026-05-11) — Vollbildmodus (native API plus iOS-Safari-Fallback); Korrektur der Breitenanpassung der Titelseite im Doppelseitenmodus; Hervorhebung aktiver Schaltflächen.
• 1.0.3 (2026-05-11) — Magazin-Doppelseitenmodus (Titelseite allein, dann 2-3, 4-5…); automatische Aktivierung auf breiten Bildschirmen; sauberes Abbrechen von Renderings bei schneller Navigation.
• 1.0.2 (2026-05-11) — Seitenleiste mit anklickbaren Miniaturen und verzögertem Rendering; Textebene (Auswahl plus Ctrl+F); Schaltfläche zum Anzeigen der Miniaturen.
• 1.0.1 (2026-05-11) — Scharfes HiDPI-Rendering auf Retina und 4K; anklickbare PDF-Links (Annotationsebene); Korrektur der vertikalen Seitenverzerrung.
• 1.0.0 (2026-05-08) — Erstveröffentlichung: Schaufensterseite, integrierter Viewer, SEO-URLs, mehrsprachig, Multistore.