Podgląd produktu bez opuszczania listy sklepu
Peek dodaje przycisk Szybki podgląd do listy produktów WooCommerce. Klik otwiera dostępny modal, który ładuje produkt przez AJAX - galeria, cena, SKU, krótki opis i formularz dodania do koszyka z obsługą wariantów - bez opuszczania listy. Skrypt jest czystym JS bez jQuery i nie przesuwa układu strony.
Działa z
Każde kliknięcie w produkt to ryzyko utraty klienta
Żeby zobaczyć szczegóły, klient musi wejść na kartę produktu, a potem wrócić na listę. Modale z ciężkim JavaScriptem często nie są dostępne z klawiatury i przesuwają układ przy otwieraniu.
- ✗ Klient traci kontekst listy, wchodząc na kartę produktu i wracając
- ✗ Modale z ciężkim JavaScriptem spowalniają listę sklepu
- ✗ Brak obsługi klawiatury i czytników ekranu w modalu
- ✗ Przesunięcia układu przy otwieraniu podglądu
Peek pokazuje produkt w miejscu
- ✓ Przycisk Szybki podgląd w pętli produktów sklepu i archiwów
- ✓ Modal ładuje produkt przez AJAX bez opuszczania listy
- ✓ Skrypt to czysty JS bez jQuery, ładowany w stopce z deferem
- ✓ Modal z pułapką fokusa, zamykany Escape lub kliknięciem tła, z atrybutami ARIA
Co dostajesz w wersji darmowej
Wszystko, czego potrzeba, żeby dać szybki, dostępny podgląd produktu.
Modal AJAX
Klik w Szybki podgląd ładuje produkt przez AJAX, bez opuszczania listy sklepu.
Pełna zawartość produktu
Galeria, tytuł, SKU, cena, krótki opis, formularz dodania do koszyka i link do pełnej karty.
Obsługa wariantów
Formularz dodania do koszyka obsługuje produkty zmienne przez natywny skrypt wariantów WooCommerce.
Dostępność
Fokus wchodzi do dialogu, jest w nim uwięziony, wraca na przycisk po zamknięciu. role=dialog z aria-modal.
Bez jQuery i bez CLS
Czysty JS w stopce z deferem, modal ukryty do otwarcia, więc nie przesuwa układu.
Konfigurowalne sekcje
Etykieta przycisku oraz wybór, które części pokazują się w modalu, w ustawieniach Peek.
Przycisk na obrazku
Tryb overlay pokazuje Szybki podgląd na miniaturze przy najechaniu — bez podnoszenia wysokości karty.
Shortcode [peek]
Wstaw przycisk podglądu w dowolnym miejscu, np. w landing page lub mailingu.
Start w trzech krokach
Włączenie przycisku i pierwszy test na archiwum sklepu.
Zainstaluj
Aktywuj Peek obok WooCommerce.
Ustaw przycisk
W menu Peek włącz podgląd i ustaw etykietę przycisku oraz zawartość modalu.
Sprawdź na liście
Otwórz stronę sklepu i potwierdź, że przycisk Szybki podgląd pojawia się przy produktach.
Dla jakich sklepów
Gdy klient przegląda dużo SKU i nie powinien tracić kontekstu listy.
Moda i akcesoria
Szybki podgląd galerii, ceny i wariantów bez wchodzenia na każdą kartę produktu.
- ✓ Modal AJAX
- ✓ Warianty w modalu
- ✓ Pułapka fokusa
Ruch mobilny
Modal z klawiaturą i bez przesunięcia układu — wygodniejsze niż pełna nawigacja na telefonie.
- ✓ Bez jQuery
- ✓ aria-modal
- ✓ Zamykanie Escape
Katalogi B2C z wysokim bounce
Mniej opuszczonych list sklepu, bo decyzja o dodaniu do koszyka dzieje się w miejscu.
- ✓ Przycisk w pętli
- ✓ Dodanie do koszyka w modalu
- ✓ Link do pełnej karty
Potrzebujesz merchandisingu w modalu? Peek PRO
FREE pokrywa szybki, dostępny podgląd AJAX. PRO dodaje ostatnio oglądane, karuzelę powiązanych, swatche, własne sekcje i analitykę podglądów.
- ✓ Ostatnio oglądane produkty — wdrożone w PRO
- ✓ Karuzela powiązanych, swatche i własne sekcje — wdrożone w PRO
- ✓ Analityka podglądów — wdrożona w PRO
Wsparcie i zasoby
Każda wtyczka ma własną dokumentację z przewodnikiem konfiguracji. Błędy i pytania trafiają do publicznego repozytorium GitHub danej wtyczki — odpowiadamy otwarcie.
Częste pytania
Czy Peek wymaga WooCommerce?
Tak. Peek wymaga aktywnej instalacji WooCommerce.
Czy Peek używa jQuery?
Własny skrypt frontendu Peek to czysty JavaScript bez jQuery. Przy produktach z wariantami doładowywany jest natywny skrypt wariantów WooCommerce, żeby formularz działał poprawnie.
Gdzie pojawia się przycisk podglądu?
Na stronie sklepu i w pętlach archiwów (kategorie, tagi, taksonomie), po każdym produkcie. Nie zmienia kart pojedynczych produktów.
Czy podgląd przesuwa układ?
Nie. Modal jest ukryty do otwarcia i nakłada się na stronę, więc otwarcie nie przesuwa istniejącej treści.
Czy modal jest dostępny?
Tak. Fokus wchodzi do dialogu i jest w nim uwięziony, modal zamyka się Escape lub kliknięciem tła, a fokus wraca na przycisk. Dialog używa role=dialog z aria-modal.
Czy Peek pasuje do Marks i Reel?
Tak. Marks dodaje odznaki CSS na kartach w liście sklepu, a Reel — zoom, lightbox i wideo na karcie produktu. Wspólnie pokrywają listing i kartę bez JavaScriptu psującego układ.
Dodaj szybki podgląd produktu do sklepu
Dostępny modal AJAX z galerią, ceną i dodaniem do koszyka. Pełna edycja FREE na GPL.
Zobacz dokumentacjęDarmowa edycja to pełny quick view — PRO dokłada merchandising i analitykę w modalu.