Korzystanie z szybkiego podglądu

Ten przewodnik prowadzi od świeżej instalacji do działającego szybkiego podglądu w pętli sklepu, a następnie omawia doświadczenie klienta i sposób umieszczania wyzwalaczy poza domyślnymi pętlami.

1. Włącz i wybierz styl

Otwórz menu Peek, potwierdź, że Włącz szybki podgląd jest aktywny, i wybierz styl przycisku. Tekst to najbezpieczniejsza wartość domyślna; przejdź na ikonę lub ikonę + tekst, gdy upewnisz się, że pasuje do motywu. Ustaw etykietę przycisku zgodnie z językiem sklepu.

2. Wybierz umiejscowienie wyzwalacza

Dla standardowej siatki produktów opcja Pod kartą produktu wyrównuje wysokości kart. Dla siatki prowadzonej obrazem, gdzie zależy Ci na czystym wyglądzie, przełącz na Na obrazie produktu — wyzwalacz pojawia się po najechaniu i przy fokusie klawiatury, więc nie przeszkadza, dopóki klient po niego nie sięgnie.

Następnie zdecyduj, gdzie ładować: większość sklepów ogranicza się do sklepu i archiwów; włącz opcję powiązanych / up-sell, jeśli chcesz szybki podgląd także w tych sekcjach na karcie produktu.

3. Dostrój modal

W zawartości modala wyłącz wszystko, czego nie chcesz w podglądzie — na przykład ukryj krótki opis dla węższego modala lub ustaw liczbę miniatur galerii do swoich produktów. Puste pola ukrywają się same, więc produkt bez SKU po prostu pomija ten wiersz.

4. Sprawdź na stronie sklepu

Otwórz Sklep lub archiwum kategorii i kliknij wyzwalacz. Modal otwiera się, pokazuje tekst ładowania, a potem fragment produktu przez AJAX. Na produkcie z wariantami wybierz opcje wewnątrz modala i dodaj do koszyka bez opuszczania listy.

Umieszczanie wyzwalacza w dowolnym miejscu

Aby umieścić wyzwalacz szybkiego podglądu poza normalną pętlą — w bloku wyróżnionym, na stronie docelowej, we własnym szablonie — użyj shortcode’u:

[peek_quick_view id="123"]
[peek_quick_view id="123" text="Podgląd" style="icon_text"]
[peek id="123"]

[peek] to alias [peek_quick_view]. Oba przyjmują id, text i style (text, icon, icon_text). Gdy shortcode jest obecny, Peek ładuje swoje zasoby na tym żądaniu, nawet jeśli zwykły hak pętli się nie uruchomił, więc modal działa wszędzie, gdzie go umieścisz.

Co widzi klient

Wybranie wyzwalacza otwiera dialog z pułapką fokusu:

• Fokus przenosi się do dialogu po otwarciu i jest w nim uwięziony, dopóki jest otwarty.
• Escape lub kliknięcie w tło zamyka go (zamykanie tłem jest konfigurowalne).
• Po zamknięciu fokus wraca na przycisk wyzwalający, którego użył klient.
• Dialog używa role="dialog" z aria-modal, więc technologie wspomagające ogłaszają go poprawnie.

Fragment pokazuje włączone przez Ciebie części, w tym natywny formularz dodania do koszyka. Produkty z wariantami korzystają z własnego skryptu wariantów WooCommerce, więc cena i dostępność aktualizują się w modalu dokładnie tak, jak na karcie produktu.

Tryb nakładki i ograniczony ruch

Gdy wyzwalacz nakłada się na obraz, pojawia się po najechaniu i przy :focus-within, więc użytkownicy klawiatury docierają do niego, tabulując do produktu. Przy prefers-reduced-motion wyzwalacz nakładki pozostaje widoczny zamiast pojawiać się płynnie — żadnych ukrytych kontrolek dla klientów wrażliwych na ruch.

Uwagi o wydajności

Własny front-end Peek to pojedynczy plik czystego JavaScriptu, odroczony i ładowany w stopce — Peek nie dodaje jQuery. Zamknięty modal jest w pełni ukryty i przewija się wewnętrznie, więc jego otwarcie nakłada się na stronę zamiast ją przebudowywać: zero przeskoku układu. Skrypt wariantów WooCommerce ładuje się tylko wtedy, gdy produkt faktycznie ma warianty.