PDF-FlipBook

Beschreibung

Das PDF-FlipBook ist eine Extension für das salepix_templater Plugin, die es ermöglicht, PDF-Dokumente als interaktive, blätterbare Bücher (FlipBooks) auf Ihrer Website darzustellen. Die Extension bietet eine realistische Blätter-Animation und verschiedene Anzeigeoptionen.

Die Extension verfügt über ein Admin-Interface zur Verwaltung der PDF-FlipBooks und verwendet Shortcodes zur Einbindung in Seiten, Artikel oder Templates.

Anwendungsbereiche

Die Extension eignet sich für folgende Anwendungsfälle:

• Produktkataloge (digitale Blätterkataloge)
• Broschüren und Prospekte
• Bedienungsanleitungen und Handbücher
• Magazine und Zeitschriften
• Preislisten und Angebote
• Präsentationen und Portfolios
• Geschäftsberichte und Dokumentationen
• E-Books und digitale Publikationen

Funktionen

• Realistische Blätter-Animation (Page-Flip-Effekt)
• Interaktive Navigation (Blättern, Zoom, Vollbild)
• PDF-Download optional aktivierbar
• Sound-Effekte beim Blättern (optional)
• Responsive Darstellung auf allen Geräten
• Thumbnail-Ansicht als Vorschau
• Vollbild-Modus
• Suchfunktion innerhalb des PDFs

Admin-Bereich

Die Verwaltung der PDF-FlipBooks erfolgt über einen eigenen Menüpunkt im Backend:

Menüpfad: Extensions → PDF-FlipBook

Im Admin-Bereich können Sie:

• Neue FlipBooks erstellen
• Bestehende FlipBooks bearbeiten
• FlipBooks aktivieren/deaktivieren
• FlipBooks löschen
• Shortcodes kopieren

Einrichtung

Schritt 1: Neues FlipBook erstellen

1.1: Öffnen Sie im JTL-Shop Backend: Extensions → PDF-FlipBook

1.2: Klicken Sie auf "Neu" oder "FlipBook hinzufügen"

1.3: Geben Sie einen Namen für das FlipBook ein (z.B. "Sommerkatalog 2025")

Schritt 2: PDF-Datei hochladen

2.1: Laden Sie Ihre PDF-Datei hoch (Feld: "PDF-Quelle" oder "Source")

2.2: Laden Sie ein Vorschaubild hoch (Feld: "Thumbnail")
Empfohlene Größe: 300×400 px oder im Verhältnis der ersten PDF-Seite

Beide Dateien (PDF und Thumbnail) müssen hochgeladen werden, damit das FlipBook funktioniert.

Schritt 3: Optionen konfigurieren

3.1: Aktivieren oder deaktivieren Sie die gewünschten Optionen

Option	Beschreibung	Standard
Sound aktivieren	Spielt einen Sound beim Umblättern	Deaktiviert
Download erlauben	Zeigt einen Download-Button für das PDF	Deaktiviert
Titel	Titel des FlipBooks (wird angezeigt)	Leer
Tags	Schlagwörter für Kategorisierung	Leer
Aktiv	FlipBook aktivieren/deaktivieren	Aktiviert

Schritt 4: Speichern und Shortcode kopieren

4.1: Klicken Sie auf "Speichern"

4.2: Kopieren Sie den generierten Shortcode (z.B. [salepix-pdf id=1])

Schritt 5: FlipBook einbinden

Der Shortcode kann an folgenden Stellen eingefügt werden:

• In eigenen Seiten (z.B. über den WYSIWYG-Editor)
• In Produktbeschreibungen
• In Kategoriebeschreibungen
• In Blog-Artikeln
• In Smarty-Templates (z.B. in der Startseite)

Der Shortcode wird automatisch beim Laden der Seite durch das interaktive FlipBook ersetzt.

Shortcode-Format

Der Shortcode folgt einem festen Format:

[salepix-pdf id=X]

Wobei X die ID des FlipBooks ist (automatisch vergeben beim Erstellen).

Beispiele für Shortcodes

Beispiel 1: Einzelnes FlipBook

[salepix-pdf id=1]

Bindet das FlipBook mit der ID 1 ein.

Beispiel 2: Mehrere FlipBooks auf einer Seite

[salepix-pdf id=1]
[salepix-pdf id=2]
[salepix-pdf id=3]

Bindet drei verschiedene FlipBooks untereinander ein.

Beispiel 3: In Produktbeschreibung

Sie können den Shortcode direkt im HTML-Modus der Produktbeschreibung einfügen:

<p>Schauen Sie sich unseren aktuellen Katalog an:</p>
[salepix-pdf id=5]
<p>Alle Preise inklusive MwSt.</p>

Praxisbeispiele

Beispiel 1: Produktkatalog auf der Startseite

Anwendungsfall: Digitaler Sommerkatalog auf der Startseite

Einrichtung:

1. FlipBook erstellen mit Namen "Sommerkatalog 2025"
2. PDF hochladen: sommerkatalog.pdf
3. Thumbnail hochladen: katalog-cover.jpg
4. Download aktivieren: Ja
5. Sound: Nein
6. Titel: "Unser Sommerkatalog 2025"

Einbindung:

[salepix-pdf id=1]

Fügen Sie den Shortcode in einen eigenen Inhalt auf der Startseite ein.

Beispiel 2: Bedienungsanleitung bei Produkt

Anwendungsfall: Bedienungsanleitung direkt beim Produkt anzeigen

Einrichtung:

1. FlipBook erstellen mit Namen "Anleitung Kaffeemaschine XY"
2. PDF hochladen: anleitung-kaffeemaschine.pdf
3. Thumbnail hochladen: anleitung-thumb.jpg
4. Download aktivieren: Ja
5. Sound: Nein

Einbindung in Produktbeschreibung:

<h3>Bedienungsanleitung</h3>
[salepix-pdf id=12]

Beispiel 3: Mehrsprachige Kataloge

Anwendungsfall: Katalog in Deutsch und Englisch

Einrichtung:

1. FlipBook 1: "Katalog DE" mit deutscher PDF
2. FlipBook 2: "Catalog EN" mit englischer PDF
3. Auf verschiedenen Sprachseiten einbinden

Deutsche Seite:

[salepix-pdf id=10]

Englische Seite:

[salepix-pdf id=11]

Beispiel 4: Preisliste mit monatlicher Aktualisierung

Anwendungsfall: Aktuelle Preisliste immer auf dem neuesten Stand

Vorgehensweise:

1. FlipBook mit Namen "Aktuelle Preisliste" erstellen
2. Shortcode auf Seite einbinden: [salepix-pdf id=20]
3. Monatlich: Nur die PDF-Datei im FlipBook aktualisieren
4. Shortcode bleibt gleich - Inhalt wird automatisch aktualisiert

Vorteil: Sie müssen den Shortcode nicht ändern, nur die PDF-Datei austauschen.

Dateianforderungen

PDF-Datei

Eigenschaft	Empfehlung
Dateigröße	Maximal 20 MB für optimale Performance
Seitenanzahl	Unbegrenzt, aber 2-100 Seiten optimal
Format	PDF (Version 1.4 oder höher)
Auflösung	150-300 DPI für gute Lesbarkeit
Dateiname	Ohne Sonderzeichen und Leerzeichen

Thumbnail-Bild

Eigenschaft	Empfehlung
Format	JPG, PNG oder WebP
Größe	300×400 px (oder ähnliches Seitenverhältnis)
Dateigröße	Maximal 500 KB
Inhalt	Cover/Titelseite des PDFs als Vorschau

Verwenden Sie aussagekräftige Dateinamen ohne Umlaute, Leerzeichen oder Sonderzeichen. Beispiel: sommerkatalog-2025.pdf statt Sommerkatalog 2025 (neu).pdf

Bedienung für Endkunden

Das FlipBook bietet Ihren Kunden folgende Interaktionsmöglichkeiten:

Navigation

• Mausklick links/rechts: Vorherige/Nächste Seite
• Pfeiltasten: Blättern mit Tastatur
• Ecke ziehen: Seite mit der Maus umblättern
• Thumbnail-Leiste: Direkt zu einer Seite springen

Funktionen

• Zoom: Vergrößern/Verkleinern mit + und - Buttons
• Vollbild: Vollbild-Modus aktivieren
• Suche: Text innerhalb des PDFs suchen
• Download: PDF herunterladen (falls aktiviert)
• Teilen: Link zum FlipBook teilen
• Drucken: PDF drucken

Verwaltung im Backend

FlipBook-Liste

In der Übersicht sehen Sie:

• ID (eindeutige Nummer)
• Name des FlipBooks
• Status (Aktiv/Inaktiv)
• Shortcode zum Kopieren
• Erstellungsdatum
• Letztes Änderungsdatum
• Aktionen (Bearbeiten, Löschen)

FlipBook bearbeiten

Beim Bearbeiten können Sie:

• Name ändern
• PDF-Datei austauschen
• Thumbnail aktualisieren
• Optionen anpassen
• Status ändern (aktivieren/deaktivieren)

Beim Austauschen der PDF-Datei bleibt der Shortcode gleich. Die Änderung ist sofort auf allen Seiten sichtbar, wo der Shortcode eingebunden ist.

FlipBook löschen

Beim Löschen eines FlipBooks:

• Wird das FlipBook aus der Datenbank entfernt
• Die Dateien (PDF und Thumbnail) werden gelöscht
• Der Shortcode funktioniert nicht mehr

Das Löschen ist endgültig und kann nicht rückgängig gemacht werden. Stellen Sie sicher, dass das FlipBook nicht mehr verwendet wird.

Performance-Tipps

• Optimieren Sie PDF-Dateien vor dem Upload (z.B. mit Adobe Acrobat oder Online-Tools)
• Reduzieren Sie die Dateigröße durch Komprimierung der Bilder im PDF
• Verwenden Sie Web-optimierte PDFs (Fast Web View aktiviert)
• Halten Sie Thumbnails klein (max. 500 KB)
• Begrenzen Sie die Anzahl der FlipBooks pro Seite auf 2-3

Technische Hinweise

Die Extension verwendet folgende Technologien:

• DFlip JavaScript-Bibliothek für den FlipBook-Effekt
• PDF.js von Mozilla für PDF-Rendering
• Three.js für 3D-Effekte
• Themify Icons für Bedienelemente

Das FlipBook funktioniert auf allen modernen Browsern:

• Chrome/Edge (ab Version 90)
• Firefox (ab Version 88)
• Safari (ab Version 14)
• Mobile Browser (iOS/Android)

Dateiablage

Hochgeladene Dateien werden gespeichert unter:

/mediafiles/Bilder/salepix_templater/pdf-flipbook/

Die Dateien sind über den Shop-URL erreichbar und werden beim Löschen des FlipBooks automatisch entfernt.

Shortcode-Pattern

Die Extension erkennt Shortcodes nach folgendem Muster:

[salepix-pdf id=NUMMER]

Wobei:

• salepix-pdf der Shortcode-Name ist (fest)
• id der Parameter ist (fest)
• NUMMER die FlipBook-ID ist (1-999999999)

Der Shortcode muss exakt diesem Format entsprechen. Leerzeichen zwischen den Elementen sind erlaubt, aber nicht erforderlich.

Datenbank

Die Extension erstellt folgende Datenbanktabelle:

xplugin_salepix_templater_flipbook

Diese Tabelle speichert:

• ID (eindeutige Nummer)
• Name
• Status (aktiv/inaktiv)
• Erstellungsdatum
• Änderungsdatum
• Konfiguration (als JSON)