Quick-View-Modul für PrestaShop 8/9 — Dokumentation

Überblick

DF Quick View ersetzt die native Schnellansicht Ihres PrestaShop-Themes durch ein modernes Modal: vollständige Bildergalerie, Live-Variantenauswahl, Bestandsanzeige, Mengenauswahl und In-den-Warenkorb per AJAX. Dank Vorabladen beim Überfahren öffnet das Modal sofort, und der Kunde bleibt während des gesamten Ablaufs auf seiner Kategorieseite.

Das Modul überschreibt kein Theme-Template: Es hängt sich in den Standard-Hook actionFrontControllerSetMedia ein und arbeitet im Browser auf den vorhandenen Produktkacheln. Das JavaScript ist nativ, ohne jQuery und ohne externe Abhängigkeit.

Voraussetzungen

• PrestaShop 8.0 bis 9.x
• PHP 7.4 oder höher
• Ein Theme, das Produktkacheln auf den Listenseiten anzeigt (das Classic-Theme und seine Child-Themes funktionieren ohne Anpassung)

Installation

1. Laden Sie das Archiv dfquickview-1.0.0.zip aus Ihrem DataFirefly-Kundenkonto herunter.
2. Gehen Sie im Backoffice zu Module > Modulmanager, klicken Sie auf Modul hochladen und legen Sie das Archiv ab.
3. Klicken Sie auf Installieren und anschließend auf Konfigurieren.

Es wird keine Datenbanktabelle angelegt: Das Modul speichert seine Einstellungen ausschließlich in der Konfigurationstabelle von PrestaShop. Die Deinstallation ist sauber und entfernt sämtliche Schlüssel.

Konfiguration

Auslösemodus

Drei Modi bestimmen, wie das Modal geöffnet wird:

• Abfangen — das Modul fängt die Schnellansicht-Links Ihres Themes ab (Elemente mit den Klassen .quick-view, .js-quick-view oder dem Attribut data-link-action="quickview") und öffnet stattdessen sein eigenes Modal. Das native Verhalten wird neutralisiert.
• Einfügen — das Modul ergänzt eine eigene überlagerte Schaltfläche auf jeder Produktkachel. Nützlich, wenn Ihr Theme gar keine Schnellansicht bietet.
• Beides (empfohlen, Standard) — beide Mechanismen sind aktiv.

CSS-Selektor der Produktkacheln

Das Modul muss wissen, welche Seitenelemente Produktkacheln sind. Der Standardwert .product-miniature, .js-product-miniature deckt das Classic-Theme und die große Mehrheit der Child-Themes ab.

Verwendet Ihr Theme eine andere Struktur, öffnen Sie eine Kategorieseite, untersuchen Sie den Container eines Produkts in den Entwicklerwerkzeugen Ihres Browsers und tragen Sie dessen Klasse hier ein. Das Modul sucht anschließend die Produkt-ID im Attribut data-id-product innerhalb der Kachel und leitet sie andernfalls aus der URL des Produktlinks ab.

Intelligentes Vorabladen

Standardmäßig aktiviert. Sobald der Zeiger für die Dauer der Verzögerung (standardmäßig 120 ms) auf einer Produktkachel verweilt, lädt das Modul die Produktdaten im Hintergrund und lädt das erste Bild vorab. Beim Klick liegt alles bereits im Speicher: Das Modal öffnet ohne Latenz.

Auf Mobilgeräten wird das Vorabladen bei der ersten Berührung der Kachel ausgelöst.

Pro Produkt wird nur eine Anfrage gesendet, auch wenn der Besucher dieselbe Kachel mehrfach überfährt. Falls Sie sich um die Serverlast sorgen, erhöhen Sie die Verzögerung (300 bis 500 ms filtern unbeabsichtigtes Überfahren) oder deaktivieren Sie sie: Das Modal lädt dann beim Klick und zeigt ein animiertes Ladeskelett.

Lebensdauer des Client-Caches

Die abgerufenen Produktdaten werden für die angegebene Dauer in der Browsersitzung gehalten (standardmäßig 300 Sekunden). Ein Besucher, der dasselbe Modal erneut öffnet, löst keine neue Anfrage aus.

Der Cache ist nach Sprache, Währung, Shop und Kundengruppe getrennt: Ein Besucher kann nie einen für eine andere Gruppe berechneten Preis sehen. Setzen Sie den Wert auf 0, um den Sitzungscache vollständig zu deaktivieren (der Speicher-Cache der Seite bleibt aktiv).

Angezeigte Inhalte

• Kurzbeschreibung anzeigen — zeigt die Produktzusammenfassung im Modal (auf Mobilgeräten ausgeblendet, um Platz zu sparen).
• Artikelnummer anzeigen — zeigt die Artikelnummer des Produkts oder der gewählten Variante, sofern vorhanden.
• Link „Vollständige Produktseite ansehen“ anzeigen — ergänzt unter der Warenkorb-Schaltfläche einen Link zur vollständigen Produktseite.

Auf allen Seiten laden

Standardmäßig werden die Ressourcen des Moduls nur auf Listenseiten geladen: Startseite, Kategorien, Suche, Marken, Lieferanten, Preisnachlässe, Neuheiten und Bestseller. Aktivieren Sie diese Option, wenn Sie Produktkacheln anderswo anzeigen — CMS-Seiten, eigene Blöcke, Module von Drittanbietern.

Akzentfarbe

Bestimmt die Farbe der Schaltflächen, der Auswahlrahmen und der aktiven Zustände im Modal. Geben Sie einen Hexadezimalwert passend zu Ihrem Corporate Design ein.

Funktionsweise des Modals

Galerie

Das Modal zeigt alle Produktbilder: Hauptbild, anklickbare Miniaturbilder darunter, Pfeile vor und zurück. Tastaturnavigation wird unterstützt (Pfeiltasten links und rechts zum Bildwechsel, Escape zum Schließen), und die Wischgeste funktioniert auf Mobilgeräten.

Sind der gewählten Variante in PrestaShop Bilder zugeordnet, beschränkt sich die Galerie automatisch auf diese Bilder. Andernfalls bleiben alle Produktbilder sichtbar.

Varianten

Die Attributgruppen werden entsprechend ihrem in PrestaShop konfigurierten Typ dargestellt:

• Farbfeld — als Farbgruppen markierte Gruppen zeigen ein rundes Feld, mit der Textur, sofern für das Attribut eine Texturdatei vorhanden ist, andernfalls mit der Hexadezimalfarbe.
• Auswahlliste — Gruppen vom Typ „Dropdown-Liste“ zeigen ein Auswahlmenü.
• Schaltfläche — alle übrigen Gruppen zeigen anklickbare rechteckige Schaltflächen.

Bei jeder Änderung der Auswahl ermittelt das Modul die passende Kombination und aktualisiert Preis, Streichpreis, Rabattprozentsatz, Artikelnummer, Bestand, Mindestmenge und Bilder.

Zwei visuelle Zustände kennzeichnen Sackgassen:

• Ausgegraut — das Attribut ergibt zusammen mit der aktuellen Auswahl keine vorhandene Kombination.
• Abgeschwächt — die Kombination existiert, ist aber ausverkauft, und das Produkt erlaubt keine Bestellung bei fehlendem Bestand.

Bestand und Menge

Je nach Verfügbarkeit der gewählten Variante werden drei Zustände angezeigt: auf Lager, nachbestellbar (Bestellung trotz fehlendem Bestand erlaubt) oder ausverkauft (die Schaltfläche ist dann deaktiviert).

Die Mengenauswahl beachtet die auf dem Produkt oder der Variante festgelegte Mindestmenge: Sie startet bei diesem Wert und verhindert, dass er unterschritten wird.

In den Warenkorb

Die Aufnahme wird per AJAX an den nativen Warenkorb-Controller von PrestaShop gesendet. Bei Erfolg löst das Modul das Ereignis updateCart des Storefront-Frameworks aus: Der Warenkorbblock in Ihrer Kopfzeile aktualisiert sich automatisch, ohne Neuladen.

Vom Shop zurückgegebene Fehler — ausverkauft, Mindestmenge nicht erreicht, Produkt nicht verfügbar — werden im Modal unterhalb der Schaltfläche angezeigt.

Produkte mit pflichtmäßigen Anpassungsfeldern können nicht aus einem Modal in den Warenkorb gelegt werden: Das Modul zeigt einen Hinweis und fordert den Kunden auf, die vollständige Produktseite zu öffnen.

Kompatibilität mit der Facettensuche

Wendet der Kunde einen Filter an, ersetzt PrestaShop die Produktliste, ohne die Seite neu zu laden. Das Modul reagiert auf das Ereignis updateProductList und beobachtet zusätzlich Änderungen am Dokument: Seine Schaltflächen werden automatisch auf den neuen Kacheln erneut eingefügt, ohne dass Sie etwas tun müssen.

Fehlerbehebung

Es erscheint keine Schaltfläche auf den Kacheln

Prüfen Sie zunächst, ob der Auslösemodus das Einfügen einschließt („Einfügen“ oder „Beides“). Prüfen Sie danach den CSS-Selektor der Kacheln: Öffnen Sie eine Kategorieseite, untersuchen Sie den Container eines Produkts und bestätigen Sie, dass er dem konfigurierten Selektor entspricht. Stellen Sie schließlich sicher, dass die Kachel ein Attribut data-id-product oder einen Link zur Produktseite enthält.

Das Modal öffnet nicht beim Klick auf die Schnellansicht des Themes

Der Auslösemodus muss das Abfangen einschließen („Abfangen“ oder „Beides“). Manche Themes verwenden für ihre Schaltfläche nicht standardmäßige Klassen: Wechseln Sie in diesem Fall in den Modus „Einfügen“ und blenden Sie die native Schaltfläche Ihres Themes über eine CSS-Regel in Ihrem eigenen Stylesheet aus.

Die Ressourcen werden auf einer bestimmten Seite nicht geladen

Das Modul lädt seine Ressourcen nur auf den üblichen Listenseiten. Zeigen Sie Produktkacheln auf einer CMS-Seite oder in einem Modul eines Drittanbieters an, aktivieren Sie die Option Auf allen Seiten laden.

Änderungen an der Konfiguration sind nicht sichtbar

Leeren Sie den PrestaShop-Cache (Erweiterte Parameter > Leistung > Cache leeren) und laden Sie die Seite im Browser mit erzwungener Aktualisierung neu. Haben Sie die Lebensdauer des Client-Caches geändert, behalten Besucher mit laufender Sitzung ihre Daten bis zum Ablauf.

Der Preis im Modal weicht vom Preis in der Liste ab

Die Preise im Modal werden serverseitig mit derselben Methode wie auf der Produktseite berechnet, unter Berücksichtigung von Kundengruppe, Währung und Steuern. Bleibt eine Abweichung bestehen, prüfen Sie, ob Ihr Theme auf den Kacheln eine eigene Preisdarstellung anwendet, und leeren Sie den Client-Cache, indem Sie dessen Lebensdauer vorübergehend auf 0 setzen.

Deinstallation

Wählen Sie im Modulmanager Deinstallieren. Sämtliche Konfigurationsschlüssel des Moduls werden entfernt. Produkt- und Bestelldaten bleiben unberührt.