Product quick view
Die Schnellansicht öffnet die Produktdetails in einem Lightbox-Fenster - ohne die Kategorieseite oder die Suchergebnisse zu verlassen. Der Kunde kann das Produkt sofort in den Warenkorb legen.
Modul aktivieren
Section titled “Modul aktivieren”Gehen Sie zu WooCommerce > Polski > Storefront-Module und aktivieren Sie die Option Quick View. Auf den Produktkarten erscheint ein Augensymbol oder eine Schaltfläche Quick View.
Lightbox
Section titled “Lightbox”Die Schnellansicht öffnet sich in einem modalen Fenster (Lightbox) mit abgedunkeltem Hintergrund. Das Fenster ist responsiv - auf dem Desktop nimmt es etwa 70 % der Bildschirmbreite ein, auf mobilen Geräten dehnt es sich auf die volle Breite aus.
Inhalt der Lightbox:
- Bildergalerie (linke Seite)
- Produktname
- Preis (einschließlich Omnibus-Aktionen)
- Kurzbeschreibung
- Variantenauswahl (bei variablen Produkten)
- Mengenfeld
- Schaltfläche In den Warenkorb
- Link Vollständige Details anzeigen, der zur Produktseite führt
Die Lightbox schließt sich durch:
- Klick auf die Schaltfläche X
- Klick außerhalb des Fensters (auf das Overlay)
- Drücken der Escape-Taste
- Zurück-Schaltfläche des Browsers (History API)
Variantenunterstützung
Section titled “Variantenunterstützung”Bei variablen Produkten zeigt die Schnellansicht Attribut-Dropdowns an, genau wie auf der Produktseite. Nach der Auswahl einer Variante:
- Der Preis wird auf den Variantenpreis aktualisiert
- Das Bild wechselt zum Bild der Variante
- Der Verfügbarkeitsstatus wird aktualisiert
- Die Schaltfläche In den Warenkorb wird erst aktiv, nachdem alle erforderlichen Attribute ausgewählt wurden
Die Variantendaten werden einmalig mit der Lightbox geladen - ein Variantenwechsel erzeugt keine zusätzlichen Serveranfragen.
Bildergalerie (bis zu 4 Bilder)
Section titled “Bildergalerie (bis zu 4 Bilder)”Die Lightbox zeigt bis zu 4 Bilder des Produkts an - das Hauptbild und bis zu 3 Galeriebilder. Diese Begrenzung sorgt für schnelles Laden und eine übersichtliche Oberfläche im Vorschaufenster.
Navigation in der Galerie:
- Klick auf die Miniaturansichten unter dem Hauptbild
- Pfeile links/rechts am Hauptbild
- Swipe auf Touch-Geräten
- Pfeiltasten auf der Tastatur
Das Bildlimit der Galerie kann mit einem Filter geändert werden:
add_filter('polski/quick_view/gallery_limit', function (): int { return 6;});Konfiguration
Section titled “Konfiguration”In den Moduleinstellungen verfügbare Optionen:
| Option | Beschreibung | Standard |
|---|---|---|
| Schaltflächenposition | Wo die Schaltfläche auf der Produktkarte angezeigt wird | Auf der Miniaturansicht |
| Schaltflächentyp | Augensymbol oder Text Quick View | Symbol |
| Galerie | Wie viele Bilder in der Lightbox angezeigt werden | 4 |
| Beschreibung | Ob die Kurzbeschreibung angezeigt wird | Ja |
| Bewertungen | Ob die Sternebewertung angezeigt wird | Ja |
| Lieferzeit | Ob die geschätzte Lieferzeit angezeigt wird | Ja |
| Animation | Art der Öffnungsanimation (fade/slide/zoom) | fade |
Inhaltsladen per AJAX
Section titled “Inhaltsladen per AJAX”Der Lightbox-Inhalt wird nach dem Klick auf die Schaltfläche per AJAX geladen. Während des Ladens wird ein Spinner angezeigt. Die Produktdaten werden clientseitig zwischengespeichert - ein erneutes Öffnen desselben Produkts erzeugt keine weitere Anfrage.
// Lightbox-Vorlage ändernadd_filter('polski/quick_view/template', function (string $template): string { return get_stylesheet_directory() . '/polski/quick-view-custom.php';});Integration mit anderen Modulen
Section titled “Integration mit anderen Modulen”Die Schnellansicht lässt sich mit anderen Modulen von Polski for WooCommerce kombinieren:
- Wunschliste - Herz-Schaltfläche in der Lightbox sichtbar
- Vergleich - Vergleichs-Schaltfläche in der Lightbox sichtbar
- Badges - Abzeichen (Sale, Neu, Bestseller) auf dem Bild angezeigt
- Omnibus-Preis - niedrigster Preis der letzten 30 Tage neben dem Aktionspreis sichtbar
Barrierefreiheit
Section titled “Barrierefreiheit”Die Lightbox unterstützt die vollständige Tastaturnavigation:
- Tab - Wechseln zwischen interaktiven Elementen
- Escape - Fenster schließen
- Pfeile - Navigation in der Galerie
- Focus Trap - der Fokus verlässt die Lightbox nicht, solange sie geöffnet ist
- ARIA-Attribute:
role="dialog",aria-modal="true",aria-label
CSS-Gestaltung
Section titled “CSS-Gestaltung”CSS-Klassen des Moduls:
.polski-quick-view-overlay- Abdunkelung des Hintergrunds.polski-quick-view-modal- Lightbox-Fenster.polski-quick-view-gallery- Bildergalerie.polski-quick-view-content- Produktinhalt.polski-quick-view-close- Schließen-Schaltfläche.polski-quick-view-trigger- auslösende Schaltfläche auf der Produktkarte
Leistung
Section titled “Leistung”Das Skript und die Stile der Lightbox werden verzögert geladen (Lazy Loading) - nur wenn sich mindestens ein Produkt mit einer Schnellansicht-Schaltfläche auf der Seite befindet. Der JavaScript-Code wiegt etwa 8 KB (gzip) und blockiert das Rendern der Seite nicht.
Fehlerbehebung
Section titled “Fehlerbehebung”Die Lightbox öffnet sich nicht - prüfen Sie die Browserkonsole. Die häufigste Ursache ist ein Konflikt mit einem anderen Lightbox-Plugin (z. B. WooCommerce Lightbox, FancyBox). Deaktivieren Sie die standardmäßige WooCommerce-Lightbox.
Varianten werden nicht geladen - stellen Sie sicher, dass das variable Produkt korrekt konfigurierte Varianten mit Preisen hat. Leere Varianten werden übersprungen.
Die Galerie zeigt nur 1 Bild - fügen Sie im WooCommerce-Editor Bilder zur Produktgalerie hinzu (Bereich Produktgalerie, nicht nur Produktbild).
Probleme melden: github.com/wppoland/polski/issues