PS PrestaShop PrestaShop Anfänger

Shoppable Kundenfotos-Galerie — Komplettanleitung

Installation, Instagram-Verbindung, Kunden-Uploads, Moderation und Hotspot-Editor des Moduls Shoppable Kundenfotos-Galerie.

Aktualisiert Modulversion 1.0.0

Überblick

Shoppable Kundenfotos-Galerie (dfugcgallery) zeigt die echten Fotos Ihrer Kunden auf der Startseite und unter den Produktseiten — mit klickbaren Hotspots, die zu den auf jedem Foto abgebildeten Produkten führen. Die Fotos stammen aus zwei Quellen: Uploads Ihrer eingeloggten Kunden (verifizierte Käufer) und Importe Ihrer Instagram-Beiträge über die offizielle API. Alles durchläuft eine Moderationswarteschlange im Backoffice, wo Sie auch die Produkt-Hotspots platzieren.

Installation

  1. Gehen Sie in Ihrem PrestaShop-Backoffice zu Module → Modul-Manager → Modul hochladen.
  2. Wählen Sie die Datei dfugcgallery.zip aus und bestätigen Sie.
  3. Das Modul erstellt automatisch seine zwei Datenbanktabellen, seinen Admin-Tab UGC-Galerie (unter Katalog) und seinen geschützten Bildspeicherordner.
  4. Klicken Sie auf Konfigurieren, um die Einstellungen zu öffnen.

Das Modul ist kompatibel mit PrestaShop 8.0 bis 8.2 und 9.x, PHP 8.0 Minimum. Es erstellt keine Overrides und nutzt ausschließlich native Hooks: displayHome, displayFooterProduct, displayCustomerAccount und displayHeader.

Konfiguration

Die Konfigurationsseite des Moduls bündelt alle Einstellungen:

  • Startseiten-Galerie: Aktivierung und maximale Anzahl angezeigter Fotos.
  • Produktseiten-Galerie: Aktivierung und maximale Anzahl der in der Leiste unter jeder Produktseite angezeigten Fotos.
  • Auto-Freigabe: Wenn aktiviert, werden Kunden-Uploads sofort ohne Moderation veröffentlicht. Instagram-Importe durchlaufen unabhängig von dieser Einstellung immer die Moderation.
  • Maximale Dateigröße: in Megabyte, angewendet auf jedes hochgeladene Foto.
  • Instagram-Token: der Long-lived-Token für den Import Ihrer Beiträge (siehe nächster Abschnitt).

Instagram verbinden

Der Import nutzt die offizielle „Instagram API with Instagram Login“. Eine einmalige Einrichtung ist erforderlich:

  1. Öffnen Sie das Meta-Entwicklerportal und erstellen Sie eine App vom Typ Business.
  2. Fügen Sie das Produkt Instagram hinzu und konfigurieren Sie „API setup with Instagram login“.
  3. Verknüpfen Sie das professionelle Instagram-Konto Ihres Shops.
  4. Generieren Sie einen Long-lived-Token mit der Berechtigung instagram_business_basic.
  5. Fügen Sie diesen Token in das Feld Instagram-Token der Modulkonfiguration ein und speichern Sie.

Das Modul erneuert den Token automatisch vor jedem Import. Solange Sie mindestens einmal alle 60 Tage einen Import starten, läuft der Token nie ab und Sie müssen ihn nie wieder anfassen.

Zum Importieren öffnen Sie Katalog → UGC-Galerie und klicken auf die Schaltfläche Von Instagram importieren in der Symbolleiste. Das Modul ruft Ihre letzten Beiträge ab, überspringt bereits importierte Duplikate (Deduplizierung per Media-ID), nimmt das erste Bild von Karussells und setzt alles auf den Status „Ausstehend“. Videos und Reels werden in dieser Version ignoriert.

Uploads Ihrer Kunden

Eingeloggte Kunden verfügen über einen Link Meine Fotos in ihrem Kundenkonto. Die Einreichungsseite ermöglicht ihnen:

  • bis zu 5 Fotos pro Einreichung hochzuladen (jpg, png oder webp);
  • optional ein Produkt zu markieren — die Liste bietet nur Produkte aus ihren gültigen Bestellungen an, was garantiert, dass jedes markierte Foto von einem verifizierten Käufer stammt;
  • eine Bildunterschrift hinzuzufügen;
  • den Status ihrer Fotos einzusehen (ausstehend, freigegeben, abgelehnt) und sie jederzeit zu löschen.

Vor jeder Einreichung ist eine ausdrückliche Einwilligungs-Checkbox erforderlich. Die Löschung durch den Kunden entfernt die Dateien vom Server, nicht nur den Datenbankeintrag: Das Modul ist auf DSGVO-Konformität ausgelegt.

Moderation

Die Liste Katalog → UGC-Galerie zeigt alle Fotos mit Vorschaubild, Quelle (Upload oder Instagram), Autor, Status und Datum. Sie können:

  • nach Quelle und Status filtern;
  • jedes Foto per Klick über die Zeilenaktionen freigeben, ablehnen oder löschen;
  • diese Aktionen per Checkboxen in Masse anwenden;
  • den Hotspot-Editor über die Aktion Ansehen öffnen.

Nur freigegebene Fotos erscheinen im Shop.

Hotspot-Editor

Der Editor ermöglicht es, Produkte mit präzisen Positionen auf jedem Foto zu verknüpfen:

  1. Suchen Sie im Suchfeld ein Produkt nach Name, Referenz oder ID.
  2. Wählen Sie es aus und klicken Sie auf das Foto an der gewünschten Stelle, um den Punkt zu platzieren.
  3. Verschieben Sie einen bestehenden Punkt per Drag-and-drop.
  4. Entfernen Sie bei Bedarf einen Punkt über die Seitenliste.
  5. Klicken Sie auf Speichern, um die Positionen zu sichern.

Die Positionen werden in Prozent der Bildbreite und -höhe gespeichert: Die Darstellung ist auf Smartphone, Tablet und Desktop identisch. Im Shop pulsiert jeder Punkt dezent und öffnet per Klick eine Produktkarte mit Name, aktuellem Preis in der Währung des Besuchers, Titelbild und direktem Link zur Produktseite.

Wenn ein Kunde beim Upload ein Produkt markiert, wird automatisch ein Hotspot in der Bildmitte erstellt. Sie müssen ihn während der Moderation nur an die richtige Stelle verschieben.

Anzeige im Shop

  • Startseite: responsives Raster mit Badge zur Anzahl markierter Produkte pro Foto und Aufruf zum Teilen.
  • Produktseite: horizontale Leiste mit Kundenfotos zum aufgerufenen Produkt.
  • Lightbox: Vollbild, Pfeil- und Tastaturnavigation, animierte Hotspots, Einstellung prefers-reduced-motion respektiert.

Das Frontend-JavaScript ist Vanilla, ohne jQuery, und die Assets werden nur auf den betroffenen Seiten geladen. Die Bilder werden als JPEG in zwei Größen neu kodiert (1600 px und 600-px-Thumbnail), um die Performance zu erhalten.

Fehlerbehebung

  • Instagram-Import schlägt fehl: Prüfen Sie, ob der Token ein gültiger Long-lived-Token ist, der mit einem professionellen Konto verknüpft ist, und ob die Leseberechtigung für Medien erteilt wurde. Ein abgelaufener Token (mehr als 60 Tage ohne Import) muss über das Meta-Portal neu generiert werden.
  • Ein hochgeladenes Foto wird beim Absenden abgelehnt: Prüfen Sie das Format (nur jpg, png, webp) und die konfigurierte maximale Dateigröße.
  • Fotos erscheinen nicht im Shop: Nur Fotos mit dem Status „Freigegeben“ werden angezeigt; prüfen Sie außerdem, ob die betreffende Galerie (Startseite oder Produktseite) in der Konfiguration aktiviert ist.
  • Multishop: Jeder Shop verwaltet seine eigene Galerie; prüfen Sie den im Backoffice ausgewählten Shop-Kontext.

Deinstallation

Die Deinstallation entfernt die Modultabellen, den Admin-Tab und die Konfiguration. Die Bilddateien im Upload-Ordner werden mit den gelöschten Fotos ebenfalls entfernt.

War diese Seite hilfreich?

Immer noch nicht weiter? Support kontaktieren