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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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)
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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