Zum Inhalt springen

Schnellansicht

Die Schnellansicht (Quick View) ermoeglicht es Kunden, Produktdetails zu sehen, ohne die Kategorie- oder Suchergebnisseite zu verlassen. Das Produkt oeffnet sich in einem Lightbox-Fenster mit der Moeglichkeit, es in den Warenkorb zu legen.

Gehen Sie zu WooCommerce > Polski > Shop-Module und aktivieren Sie die Option Schnellansicht. Auf den Produktkarten erscheint ein Augensymbol oder ein Button Schnellansicht.

Die Schnellansicht oeffnet sich in einem modalen Fenster (Lightbox) mit abgedunkeltem Hintergrund. Das Fenster ist responsiv - auf dem Desktop nimmt es ca. 70% der Bildschirmbreite ein, auf mobilen Geraeten erstreckt es sich auf die volle Breite.

Lightbox-Inhalt:

  • Bildergalerie (linke Seite)
  • Produktname
  • Preis (unter Beruecksichtigung von Omnibus-Aktionen)
  • Kurzbeschreibung
  • Variantenauswahl (fuer variable Produkte)
  • Mengenfeld
  • Button In den Warenkorb
  • Link Vollstaendige Details ansehen zur Produktseite

Lightbox schliesst sich durch:

  • Klick auf den X-Button
  • Klick ausserhalb des Fensters (auf den Overlay)
  • Druecken der Escape-Taste
  • Zurueck-Button im Browser (History API)

Fuer variable Produkte zeigt die Schnellansicht Dropdowns mit Attributen an, genau wie auf der Produktseite. Nach Auswahl einer Variante:

  • Preis aktualisiert sich auf den Variantenpreis
  • Bild wechselt zum der Variante zugewiesenen Bild
  • Verfuegbarkeitsstatus aktualisiert sich
  • Button In den Warenkorb wird erst nach Auswahl aller erforderlichen Attribute aktiv

Variantendaten werden einmalig zusammen mit dem Lightbox geladen - Variantenwechsel erzeugen keine zusaetzlichen Serveranfragen.

Der Lightbox zeigt bis zu 4 Bilder des Produkts - Hauptbild und bis zu 3 Galeriebilder. Dieses Limit stellt schnelles Laden und eine uebersichtliche Oberflaeche im Vorschaufenster sicher.

Galerienavigation:

  • Klick auf die Miniatur unter dem Hauptbild
  • Links-/Rechts-Pfeile auf dem Hauptbild
  • Swipe auf Touchgeraeten
  • Pfeiltasten auf der Tastatur

Das Galerie-Bildlimit kann per Filter geaendert werden:

add_filter('polski/quick_view/gallery_limit', function (): int {
return 6;
});
OptionBeschreibungStandard
Button-PositionWo der Button auf der Produktkarte angezeigt wirdAuf der Miniatur
Button-TypAugensymbol oder Text SchnellansichtSymbol
GalerieWie viele Bilder im Lightbox angezeigt werden4
BeschreibungOb die Kurzbeschreibung angezeigt wirdJa
BewertungenOb Bewertungssterne angezeigt werdenJa
LieferzeitOb die geschaetzte Lieferzeit angezeigt wirdJa
AnimationOeffnungsanimationstyp (fade/slide/zoom)fade

Der Inhalt wird per AJAX nach Klick auf den Button geladen. Waehrend des Ladens wird ein Spinner angezeigt. Produktdaten werden im Browser gecacht - erneutes Oeffnen desselben Produkts sendet keine neue Anfrage.

// Lightbox-Template aendern
add_filter('polski/quick_view/template', function (string $template): string {
return get_stylesheet_directory() . '/polski/quick-view-custom.php';
});

Die Schnellansicht integriert sich mit anderen Modulen von Polski for WooCommerce:

  • Wunschliste - Herz-Button im Lightbox sichtbar
  • Produktvergleich - Vergleichsbutton im Lightbox sichtbar
  • Labels - Badges (Sale, Neu, Bestseller) auf dem Bild angezeigt
  • Omnibus-Preis - niedrigster Preis der letzten 30 Tage beim Aktionspreis sichtbar

Der Lightbox unterstuetzt vollstaendige Tastaturnavigation:

  • Tab - Wechsel zwischen interaktiven Elementen
  • Escape - Fenster schliessen
  • Pfeile - Galerienavigation
  • Focus Trap - Fokus verlaesst den Lightbox nicht waehrend er geoeffnet ist
  • ARIA-Attribute: role="dialog", aria-modal="true", aria-label
  • .polski-quick-view-overlay - Hintergrundabdunklung
  • .polski-quick-view-modal - Lightbox-Fenster
  • .polski-quick-view-gallery - Bildergalerie
  • .polski-quick-view-content - Produktinhalt
  • .polski-quick-view-close - Schliessen-Button
  • .polski-quick-view-trigger - Oeffnungsbutton auf der Produktkarte

Skript und Styles werden lazy geladen - nur wenn auf der Seite ein Produkt mit Schnellansicht-Button vorhanden ist. Das JavaScript wiegt ca. 8 KB (gzip) und blockiert das Rendering nicht.

Lightbox oeffnet sich nicht - pruefen Sie die Browser-Konsole. Haeufigste Ursache ist ein Konflikt mit einem anderen Lightbox-Plugin (z.B. WooCommerce Lightbox, FancyBox). Deaktivieren Sie den Standard-WooCommerce-Lightbox.

Varianten laden nicht - stellen Sie sicher, dass das variable Produkt korrekt konfigurierte Varianten mit Preisen hat.

Galerie zeigt nur 1 Bild - fuegen Sie Bilder zur Produktgalerie im WooCommerce-Editor hinzu (Abschnitt Produktgalerie, nicht nur Produktbild).

Probleme melden: github.com/wppoland/polski/issues

Diese Seite dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2) ohne Garantie.