PS PrestaShop Anfänger

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

Installation, Konfiguration und Nutzung des PDF-Katalog-Moduls: Schaufensterseite, Profi-Viewer (Doppelseite, Miniaturen, Vollbild) und SEO.

Aktualisiert Modulversion 1.0.4

Überblick

DFPDFCatalog veröffentlicht Ihre PDF-Kataloge direkt in Ihrem PrestaShop-Shop. Das Modul erstellt zwei Arten von Front-Office-Seiten: eine Schaufensterseite, die alle Ihre Kataloge als anklickbare Banner auflistet (/catalogues-pdf), und eine Viewer-Seite pro Katalog (/catalogue-pdf/{id}-{slug}) mit einem eingebetteten PDF-Reader auf Profi-Niveau: magazinartiger Doppelseiten-Modus, anklickbare Miniaturen, Vollbild, Zoom, anklickbare Links und auswählbarer Text.

Installation

  1. Laden Sie die ZIP-Datei des Moduls aus Ihrem DataFirefly-Konto herunter.
  2. Gehen Sie in Ihrem PrestaShop Back-Office zu Module → Modul-Manager → 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 Front-Routen werden ohne manuelle Konfiguration erstellt.

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

Aktualisierung von einer früheren Version

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

Die Aktualisierung erhält Ihre bestehenden Kataloge: Datenbanktabellen und hochgeladene Dateien (Banner und PDFs) bleiben unberührt.

Einen Katalog hinzufügen

  1. Gehen Sie zu Katalog → PDF-Kataloge und klicken Sie auf Katalog hinzufügen.
  2. Geben Sie den Titel ein (pro Sprache übersetzbar) — er generiert auch den URL-Slug und den Meta-Title der Seite.
  3. Geben Sie die Beschreibung ein (übersetzbar) — sie wird auf der Viewer-Seite angezeigt und als Meta-Beschreibung verwendet.
  4. Laden Sie das Banner-Bild hoch — es erscheint im Raster der Schaufensterseite.
  5. Laden Sie die PDF-Datei hoch.
  6. Legen Sie die Position (Anzeigereihenfolge im Raster) und den Status aktiv/inaktiv fest.
  7. Bei Multi-Shop-Konfigurationen haken Sie die Shops an, in denen der Katalog erscheinen soll.
  8. Speichern: Der Katalog ist sofort auf /catalogues-pdf sichtbar.

Front-Office-Seiten

Schaufensterseite

Die Seite /catalogues-pdf zeigt alle aktiven Kataloge des aktuellen Shops als Banner-Raster, sortiert nach Position. Jedes Banner verlinkt auf den Viewer des Katalogs. Die Seite generiert ihren eigenen Meta-Title und ihre Meta-Beschreibung und integriert sich in die native PrestaShop-Breadcrumb.

Viewer-Seite

Jeder Katalog hat seine eigene Seite unter /catalogue-pdf/{id}-{slug}. Das PDF wird im eingebetteten Viewer angezeigt, mit einer Zurück-Schaltfläche zur Schaufensterseite und einer direkten Download-Schaltfläche. Das PDF wird über einen PHP-Controller mit dem Content-Disposition-inline-Header ausgeliefert, was die Anzeige im Browser erzwingt.

Den Viewer verwenden

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

  • Miniaturen — blendet die Seitenleiste mit Seitenminiaturen ein oder aus. Die Miniaturen sind anklickbar und werden beim Scrollen progressiv gerendert (Lazy-Rendering), auch bei sehr langen Katalogen. Die aktive(n) Seite(n) werden hervorgehoben.
  • Doppelseite — wechselt zwischen Einzelseitenanzeige und magazinartigem Doppelseiten-Modus: Titelseite allein, dann Paare 2-3, 4-5 usw. Dieser Modus ist auf Bildschirmen ab 1024 px Breite standardmäßig aktiviert.
  • Navigation — Zurück/Weiter-Schaltflächen und Seitenanzeige (z. B. „Seite 4-5 / 24″ im Doppelseiten-Modus). Die Pfeiltasten links/rechts funktionieren ebenfalls.
  • Zoom — Vergrößern/Verkleinern in 25-%-Schritten plus automatische Breitenanpassung.
  • Vollbild — schaltet den Viewer über die native Browser-API in den Vollbildmodus. Auf iOS Safari wird automatisch ein simulierter Vollbildmodus verwendet. Die Escape-Taste beendet den Modus.

Im PDF enthaltene Hyperlinks bleiben anklickbar: externe Links öffnen sich in einem neuen Tab, interne Links (Inhaltsverzeichnis, Verweise) navigieren direkt im Viewer. Enthält das PDF eine Textebene, ist der Text auswählbar, kopierbar, und die Ctrl+F-Suche des Browsers funktioniert auf dem Inhalt.

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

SEO und URLs

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

  • /catalogues-pdf — Schaufensterseite mit eigenem Meta-Title und eigener Meta-Beschreibung.
  • /catalogue-pdf/{id}-{slug} — eine saubere URL pro Katalog, wobei der Slug automatisch aus dem Titel generiert wird. Der Meta-Title verwendet den Katalogtitel und die Meta-Beschreibung dessen Beschreibung.

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

Mehrsprachig und Multi-Shop

Titel und Beschreibungen werden Feld für Feld im Bearbeitungsformular übersetzt (Standard-Sprachauswahl von PrestaShop). Jede Sprache generiert ihren eigenen Slug und ihre eigenen Metas. Bei Multi-Shop wird die Katalog/Shop-Zuordnung über Kontrollkästchen verwaltet: Jeder Shop zeigt nur die ihm zugewiesenen Kataloge an.

Fehlerbehebung

Das PDF wird nicht angezeigt

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

Text ist nicht auswählbar oder Ctrl+F findet nichts

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

Links müssen echte Link-Annotationen im PDF sein (erstellt vom Export-Tool: InDesign, Word, LibreOffice…). Text, der nur wie eine URL aussieht, aber keine Annotation hat, ist nicht anklickbar.

Seiten erscheinen verzerrt oder unscharf

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

Versionshistorie

  • 1.0.4 (2026-05-11) — Vollbildmodus (native API + iOS Safari Fallback); Behebung des Titelseiten-Fit-Width im Doppelseiten-Modus; Hervorhebung aktiver Toggle-Schaltflächen.
  • 1.0.3 (2026-05-11) — Magazinartiger Doppelseiten-Modus (Titelseite allein, dann 2-3, 4-5…); Auto-Aktivierung auf breiten Bildschirmen; sauberer Abbruch veralteter Renderings bei schneller Navigation.
  • 1.0.2 (2026-05-11) — Anklickbare Miniatur-Seitenleiste mit Lazy-Rendering; Textebene (Auswahl + Ctrl+F); Miniaturen-Schaltfläche.
  • 1.0.1 (2026-05-11) — Scharfes HiDPI-Rendering auf Retina/4K; anklickbare PDF-Links (Annotationsebene); Behebung der vertikalen Seitenverzerrung.
  • 1.0.0 (2026-05-08) — Erste Version: Schaufensterseite, eingebetteter Viewer, SEO-URLs, mehrsprachig, Multi-Shop.
War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren