DF Product Story — Storytelling-Blöcke für Produktseiten

Überblick

DF Product Story fügt Ihren PrestaShop 8 & 9 Produktseiten reiche Storytelling-Sektionen hinzu: alternierende Bild + Text Blöcke, Click-to-play-Video, Vergleichstabelle, Vorteils-Icon-Raster und freier Text. Stories werden in einem Drag & Drop Builder im Back Office zusammengestellt und automatisch auf den Produkten oder Kategorien angezeigt, die Sie festlegen — unter der Beschreibung oder in einem eigenen Tab.

Installation

1. Gehen Sie im PrestaShop Back Office zu Module > Modul-Manager > Modul hochladen.
2. Laden Sie die Datei dfproductstory-1.0.0.zip hoch.
3. Klicken Sie auf Installieren. Das Modul legt seine Tabellen, seinen Admin-Tab und die Standard-Tab-Titel in FR/EN/ES/DE/IT an.

Nach der Installation gibt es zwei Einstiegspunkte: die Konfigurationsseite des Moduls (Module > DF Product Story > Konfigurieren) und den Story-Manager unter Katalog > DF Product Story.

Allgemeine Konfiguration

Die Konfigurationsseite des Moduls enthält drei Einstellungen:

• Anzeigeposition: „Unter dem Produktinhalt“ (Hook displayFooterProduct, Standard) oder „Zusätzlicher Produkt-Tab“ (Hook displayProductExtraContent, neben der Beschreibung).
• Tab-Titel: mehrsprachige Bezeichnung, die nur im Tab-Modus verwendet wird. Standardwerte werden in allen fünf Sprachen mitgeliefert.
• Videos lazy laden: standardmäßig aktiviert. Ersetzt YouTube/Vimeo-iframes durch eine leichte Click-to-play-Fassade — für Core Web Vitals dringend empfohlen.

Eine Story erstellen

1. Gehen Sie zu Katalog > DF Product Story und klicken Sie auf Neue Story hinzufügen.
2. Füllen Sie den internen Namen (wird nie im Front Office angezeigt), die Priorität (je niedriger die Zahl, desto weiter oben erscheint die Story, wenn sich mehrere stapeln) und den Status Aktiv aus.
3. Fügen Sie Ihre Blöcke über die Buttons + Block hinzufügen hinzu, füllen Sie sie aus und klicken Sie auf Story speichern.

Die 5 Blocktypen

Bild + Text

Der Signatur-Block des Storytellings: ein Bild auf einer Seite, Titel und Text auf der anderen. Wählen Sie die Bildposition (links oder rechts) und wechseln Sie zwischen den Blöcken ab, um einen visuellen Zickzack-Rhythmus zu erzeugen. Bilder werden direkt aus dem Builder hochgeladen (jpg, png, webp, gif — max. 4 MB). Das Textfeld akzeptiert HTML.

Video

Drei mögliche Quellen: YouTube (beliebige watch-, embed-, shorts- oder youtu.be-URL einfügen), Vimeo oder direktes MP4 (vollständige Datei-URL). Mit aktiviertem Lazy Loading erscheinen YouTube und Vimeo als Click-to-play-Fassade mit Vorschaubild — das iframe wird erst beim Klick geladen, über youtube-nocookie.com und den Vimeo-Parameter dnt=1. Das Feld Bildunterschrift erscheint unter dem Video.

Vergleichstabelle

Fügen Sie mit den Buttons + Spalte / + Zeile beliebig viele Spalten und Zeilen hinzu. Die Einstellung Hervorgehobene Spalte wendet eine blaue Hervorhebung auf die Spalte Ihrer Wahl an — praktisch, um Besucher zu Ihrer Flaggschiff-Reihe zu lenken. Die Tabelle scrollt auf Mobilgeräten horizontal.

Vorteils-Icons

Ein Raster mit 2 bis 4 Spalten von Kernargumenten. Jedes Item besitzt ein Icon (ein Emoji, kurzer Text oder der Pfad eines hochgeladenen Bildes), einen Titel und einen Text. Items werden mit den Pfeilen neu sortiert.

Text

Ein Titel und freier HTML-Inhalt, für lange erzählerische Abschnitte oder alles, was die anderen Blöcke nicht abdecken.

Blöcke organisieren

• Drag & Drop: Greifen Sie den ⋮⋮-Griff eines Blocks und legen Sie ihn an der neuen Position ab.
• Pfeile ↑ ↓: Tastatur-/Maus-Alternative zum Drag & Drop.
• Duplizieren: kopiert den Block mit allen Einstellungen und Inhalten in jeder Sprache.
• Löschen: fragt vor dem Entfernen des Blocks nach Bestätigung.

Inhalte übersetzen

Oben im Blöcke-Panel zeigen Tabs jede aktive Sprache Ihres Shops (FR, EN, ES…). Klicken Sie auf einen Tab, um alle Editoren in diese Sprache umzuschalten: Titel, Texte, Tabellenspalten und Vorteils-Items werden unabhängig übersetzt. Strukturelle Einstellungen (Bildposition, Videoquelle, Spaltenzahl) werden zwischen allen Sprachen geteilt.

Produkte und Kategorien targeten

Das Targeting-Panel arbeitet auf zwei Ebenen:

• Zielprodukte: Suchen Sie nach Name, Referenz oder ID und klicken Sie auf ein Ergebnis, um es als Chip hinzuzufügen. Ist mindestens ein Produkt ausgewählt, erscheint die Story nur auf diesen Produkten.
• Kategorien (Fallback): Haken Sie Kategorien im Baum an. Die Story erscheint auf allen Produkten dieser Kategorien, sofern für sie nicht bereits eine direkte Produkt-Story existiert.

Wenn mehrere Stories zum selben Produkt passen, werden alle angezeigt, sortiert nach aufsteigender Priorität.

Multishop

Im Multishop-Kontext ist eine Story, die aus dem Kontext „Alle Shops“ erstellt wurde, im gesamten Netzwerk sichtbar. Eine aus einem bestimmten Shop erstellte Story bleibt auf diesen Shop beschränkt.

Performance und DSGVO

• Front-CSS und -JS werden nur auf Produktseiten geladen.
• Block-Bilder nutzen das native Lazy Loading des Browsers.
• Click-to-play-Videofassaden laden vor dem Klick des Besuchers keinerlei Drittanbieter-Skripte, über youtube-nocookie.com und Vimeo dnt=1 — beim Seitenaufruf wird kein Drittanbieter-Cookie gesetzt.
• Das Front-CSS ist neutral und übernimmt die Typografie Ihres Themes.

Deinstallation

Die Deinstallation entfernt die Modultabellen, Stories und Blöcke, Zuweisungen, den Admin-Tab und die Konfigurationswerte. Auch die in den Modulordner hochgeladenen Bilder werden mit entfernt.

FAQ / Fehlerbehebung

Die Story erscheint nicht im Front Office

• Prüfen Sie, ob die Story aktiv ist und mindestens einen Block mit Inhalt in der angezeigten Sprache enthält.
• Prüfen Sie das Targeting: sind Produkte ausgewählt, erscheint die Story nur auf ihnen; andernfalls folgt sie den angehakten Kategorien.
• Im Tab-Modus implementieren einige stark angepasste Themes displayProductExtraContent nicht: wechseln Sie auf „Unter dem Produktinhalt“.

Das YouTube-Video erscheint nicht

Prüfen Sie, ob die URL eine gültige Video-ID enthält (Formate watch?v=, youtu.be/, embed/ oder shorts/ werden akzeptiert). Reine Playlist-URLs werden nicht unterstützt.

Der Bild-Upload schlägt fehl

Akzeptierte Formate: jpg, jpeg, png, webp, gif, maximale Größe 4 MB. Prüfen Sie außerdem, ob der Modulordner für den Webserver beschreibbar ist.