Szybki podgląd WooCommerce: okno AJAX produktu

Przeglądanie katalogu WooCommerce często zmienia się w męczącą pętlę: kliknij produkt, poczekaj na stronę, obejrzyj ją, kliknij wstecz, kliknij następny, znów poczekaj. Każdy obieg to pełne załadowanie strony i zmiana kontekstu, a każdy obieg to okazja, żeby klient zgubił miejsce, w którym był, albo stracił zainteresowanie. Szybki podgląd przerywa tę pętlę. Otwiera najważniejsze informacje w oknie modalnym uruchamianym wprost z listy, więc klient porównuje opcje i kupuje bez ciągłego skakania tam i z powrotem. Ten przewodnik wyjaśnia, czym jest szybki podgląd, dlaczego pomaga, czego potrzebuje dobre rozwiązanie i jak darmowa wtyczka Peek dodaje je do WooCommerce.

Czym jest szybki podgląd

Szybki podgląd pokazuje kluczowe szczegóły produktu w oknie modalnym uruchamianym z listy sklepu lub archiwum, bez przechodzenia na pełną kartę produktu. Klient klika przycisk na kafelku produktu, nad stroną otwiera się okno, klient sprawdza produkt, dodaje go do koszyka albo zamyka okno i przegląda listę dokładnie tam, gdzie skończył.

Przydatne okno szybkiego podglądu zawiera szczegóły, które klient potrzebuje, żeby podjąć decyzję:

• zdjęcie i miniatury galerii produktu
• tytuł i SKU
• cenę, łącznie z ewentualną ceną promocyjną
• status magazynowy
• krótki opis
• formularz dodania do koszyka, łącznie z wyborem wariantu dla produktów wariantowych
• link do pełnej karty produktu dla wszystkiego, czego okno nie pokazuje

Celem nie jest zastąpienie karty produktu. Karta nadal istnieje dla klienta, który chce pełnego opisu, opinii i każdego detalu. Szybki podgląd dotyczy znacznie częstszego momentu, wcześniej w ścieżce zakupowej, gdy klient przegląda kategorię i waży kilka produktów między sobą. W tym momencie otwarcie lekkiego okna jest dużo szybsze niż decyzja o pełnym załadowaniu strony dla każdego kandydata.

Dlaczego pomaga

Szybki podgląd usuwa tarcie nawigacji dokładnie w punkcie, w którym klient porównuje opcje, a to przynosi kilka konkretnych efektów.

Szybsze porównanie. Sprawdzenie pięciu produktów w pięciu oknach jest szybsze i mniej rozpraszające niż ładowanie i opuszczanie pięciu pełnych stron po kolei. Lista pozostaje cały czas na ekranie, więc klient zachowuje pozycję przewijania i poczucie, gdzie się znajduje.

Mniej porzuceń. Każde pełne załadowanie strony to chwila, w której uwaga może uciec, a wolne połączenie sfrustrować. Pozostawienie klienta na liście utrzymuje go w rytmie przeglądania, zamiast rozpraszać po stronach i kartach przeglądarki.

Krótsza droga do koszyka. Gdy dodanie do koszyka znajduje się wewnątrz okna, klient kupuje bez żadnego dodatkowego przeładowania strony. Otwiera okno, wybiera rozmiar, dodaje i przegląda dalej.

Istotny haczyk jest taki, że szybki podgląd opłaca się tylko wtedy, gdy okno pozwala dokończyć akcję. Okno, które jedynie wyświetla informacje, bez dodania do koszyka albo bez możliwości wyboru wariantu, dodaje tylko dodatkowy krok przed i tak odesłaniem klienta na pełną kartę. To wolniej niż brak szybkiego podglądu w ogóle. Cała wartość tego wzorca zależy od tego, czy klient może dokończyć w oknie to, co zaczął.

Ostrzeżenie: Szybki podgląd, który tylko wyświetla informacje, bez dodania do koszyka ani wyboru wariantu, dodaje jedynie krok przed pełną kartą i jest wolniejszy niż brak szybkiego podglądu w ogóle.

Czego potrzebuje dobry szybki podgląd

Niezależnie od tego, czy szybki podgląd budujesz, kupujesz, czy instalujesz, o tym, czy pomaga, czy szkodzi, decydują te same podstawy. Potraktuj to jak listę kontrolną:

• Prawdziwe dodanie do koszyka z wariantami. Klient powinien móc wybrać rozmiar lub kolor i dodać produkt do koszyka bez opuszczania okna. Cokolwiek mniej to tylko zapowiedź, a nie szybki podgląd.
• Ładowanie na żądanie. Treść okna powinna ładować się dopiero wtedy, gdy klient faktycznie otworzy produkt, żeby lista pozostała lekka dla każdego, kto nigdy żadnego nie otworzy. Pobieranie treści przez AJAX, bez jQuery we własnym kodzie wtyczki, utrzymuje mały ślad.
• Brak przesunięć układu. Okno powinno być ukryte aż do otwarcia i nakładać się na stronę, zamiast przesuwać treść, więc otwarcie nigdy nie powoduje przerysowania listy. Przesunięcie układu jest zarówno irytujące dla klienta, jak i karane w Core Web Vitals.
• Dostępność. Obsługa klawiatury i poprawne zarządzanie fokusem nie są dodatkami opcjonalnymi. Okno powinno uwięzić fokus, gdy jest otwarte, zamykać się klawiszem Escape i zwracać fokus na przycisk wyzwalający po zamknięciu, z właściwymi rolami ARIA, żeby technologie wspomagające ogłaszały je jako okno dialogowe.
• Konfigurowalna zawartość. Sklepy różnią się między sobą. Powinieneś móc decydować, które części pojawiają się w oknie i gdzie wyświetla się przycisk wyzwalający, zamiast akceptować jeden sztywny układ.

Zwróć uwagę, czego nie ma na tej liście: zastępowania karty produktu albo upychania opinii, produktów powiązanych i pełnego opisu w oknie. Szybki podgląd działa właśnie dlatego, że jest oszczędny. Jeśli przeładujesz go treścią, odtworzysz tylko tę stronę, którą klient chciał pominąć.

Jak robi to Peek

Peek dla WooCommerce to darmowa, otwarta wtyczka, która dodaje dokładnie to. Umieszcza przycisk szybkiego podglądu w pętlach produktów sklepu i archiwów, a jego kliknięcie otwiera dostępne okno AJAX, w którym klient może obejrzeć produkt, wybrać opcje i dodać do koszyka bez opuszczania listy.

Okno szybkiego podglądu dla klienta otwiera się nad listą, z galerią, ceną i formularzem dodania do koszyka.

Co pokazuje okno

Okno renderuje wyróżnione zdjęcie i miniatury galerii, tytuł, SKU, cenę, status magazynowy i krótki opis, natywny formularz dodania do koszyka WooCommerce oraz link do pełnej karty produktu. Ponieważ korzysta z własnego formularza dodania do koszyka WooCommerce, produkty wariantowe działają poprawnie: okno dociąga skrypt wariantów WooCommerce, więc klient może wybrać wariant przed dodaniem do koszyka, a ilość obsługiwana jest tak samo jak na karcie produktu. Każdą z tych części można włączyć lub wyłączyć w ekranie ustawień, więc okno utrzymasz tak oszczędne lub tak kompletne, jak chcesz, a liczbę miniatur galerii ustawisz od zera do dwunastu.

Zbudowany pod szybkość i dostępność

Peek jest celowo lekki. Jego własny skrypt front-endowy to czysty JavaScript bez zależności od jQuery, ładowany z odroczeniem w stopce, więc nie blokuje renderowania. Jedyny moment, w którym ładuje się oparty na jQuery skrypt wariantów WooCommerce, to sytuacja, gdy produkt faktycznie ma warianty i tego potrzebuje. Treść okna pobierana jest na żądanie z Twojej własnej strony przez admin-ajax.php WordPressa, za pomocą akcji peek_quick_view wtyczki, więc lista pozostaje lekka, dopóki klient czegoś nie otworzy, a żadne dane klienta ani produktu nie opuszczają Twojego serwera.

Okno jest ukryte aż do otwarcia i przewija się wewnętrznie, więc otwarcie nakłada je na stronę zamiast ją przerysowywać, co oznacza brak skumulowanego przesunięcia układu. Dostępność jest dopracowana z taką samą starannością: fokus przechodzi do okna po otwarciu i jest w nim uwięziony, okno zamyka się klawiszem Escape lub kliknięciem tła i zwraca fokus na przycisk wyzwalający po zamknięciu, a używa role="dialog" z aria-modal, więc technologie wspomagające traktują je poprawnie.

Uwaga: Treść okna pobierana jest na żądanie przez admin-ajax.php Twojej własnej strony dopiero wtedy, gdy klient otworzy produkt, więc lista pozostaje lekka i żadne dane klienta ani produktu nie opuszczają Twojego serwera.

Konfiguracja

Uruchomienie szybkiego podglądu zajmuje kilka minut:

1. Zainstaluj Peek z Wtyczki → Dodaj nową albo wgraj go do /wp-content/plugins/peek. WooCommerce musi być zainstalowane i aktywne.
2. Aktywuj wtyczkę.
3. Wejdź w menu Peek w wp-admin, żeby skonfigurować przycisk i zawartość okna.

Na stronie ustawień włączysz lub wyłączysz szybki podgląd, ustawisz etykietę i styl przycisku wyzwalającego (tekst, ikona albo ikona z tekstem, przy czym opcja samej ikony zachowuje dostępną nazwę) oraz wybierzesz, gdzie przycisk się pojawia. Domyślnie pokazuje się na stronie sklepu i w pętlach archiwów produktów, takich jak kategorie, tagi i taksonomie; możesz też rozszerzyć go na pętle produktów powiązanych i sprzedaży dodatkowej na kartach pojedynczych produktów. Ten sam ekran steruje wyglądem okna (jego tytułem, etykietą przycisku zamykania, tekstem ładowania i błędu, tekstem linku „zobacz produkt” i etykietą SKU, a także przełącznikami nagłówka okna, przycisku zamykania i zamykania kliknięciem tła) i pozwala wybrać, które części renderują się wewnątrz okna. Opisy przy poszczególnych ustawieniach ułatwiają start od minimum i dodawanie szczegółów później.

Ekran ustawień Peek w wp-admin, gdzie konfigurujesz przycisk wyzwalający, jego umiejscowienie i zawartość okna.

Umieszczanie przycisku w dowolnym miejscu

Przycisk nie ogranicza się do automatycznego umieszczania w pętli. Peek dostarcza shortcode, więc wstawisz przycisk szybkiego podglądu w dowolny układ: [peek_quick_view id="123"] albo krótszy alias [peek id="123"]. Przyjmuje opcjonalne atrybuty text i style, żeby dopasować przycisk do otoczenia, a okno i jego zasoby ładują się automatycznie wszędzie tam, gdzie pojawia się shortcode. To przydatne na stronach docelowych, własnych stronach głównych albo w ręcznie zbudowanym bloku wyróżnionych produktów, gdzie standardowy przycisk pętli nie sięga.

Czego nie robi

Peek skupia się na oknie szybkiego podglądu i ustawieniach wokół niego. Nie zmienia kart pojedynczych produktów i nie łączy się z żadną usługą zewnętrzną: jedyne przechowywane dane to dwie opcje WordPressa z Twoją konfiguracją, obie w całości usuwane przy skasowaniu wtyczki. Funkcje merchandisingowe, które wykraczają poza okno pojedynczego produktu, takie jak karuzela produktów powiązanych czy swatche wariantów, znajdują się w edycji PRO, a nie w darmowej wtyczce; opisujemy je poniżej.

Praktyczne wskazówki dla szybkiego podglądu, który konwertuje

Wtyczka daje mechanizm; o tym, jak dobrze działa, decyduje sposób jego ustawienia. Kilka wskazówek:

• Zawsze włączaj dodanie do koszyka. To jedyna funkcja, która sprawia, że szybki podgląd ma sens. Jeśli wyłączysz formularz koszyka, żeby „utrzymać okno czyste”, zbudowałeś wolniejszą drogę do karty produktu. Zostaw go włączonego.
• Nie przeładowuj okna. Pokaż galerię, cenę, dostępność i formularz koszyka. Oprzyj się pokusie wlania do niego całego opisu produktu. Pełna karta jest o jedno kliknięcie dalej dzięki linkowi „zobacz produkt” dla każdego, kto chce więcej.

Wskazówka: Szybki podgląd działa właśnie dlatego, że jest oszczędny. Pokaż galerię, cenę, dostępność i formularz koszyka, a pełny opis zostaw karcie produktu, która jest o jedno kliknięcie dalej dzięki linkowi „zobacz produkt”.

• Dopasuj przycisk do motywu. Przycisk z samą ikoną pasuje do gęstej, obrazkowej siatki; przycisk z ikoną i tekstem jest czytelniejszy w rzadkim katalogu. Wybierz styl, który od razu czyta się jako przycisk, bo szybki podgląd, którego nikt nie zauważa, to szybki podgląd, z którego nikt nie korzysta.
• Działaj świadomie z zasięgiem. Ładowanie przycisku tylko w pętlach sklepu i archiwów upraszcza sprawę. Rozszerzenie go na pętle produktów powiązanych i sprzedaży dodatkowej na kartach produktów może podnieść sprzedaż krzyżową, ale włączaj go tylko tam, gdzie naprawdę pomaga klientowi, a nie wszędzie z przyzwyczajenia.
• Ustaw rozsądną liczbę miniatur galerii. Kilka miniatur daje wyobrażenie o produkcie, nie zmieniając okna w pełną galerię. Dostrój liczbę do swoich zdjęć.

Peek a domyślne WooCommerce

Domyślne WooCommerce nie ma szybkiego podglądu w ogóle: każdy produkt wymaga pełnego załadowania strony, żeby go obejrzeć. Oto różnica dla samego szybkiego podglądu:

Funkcja	Domyślne WooCommerce	Peek
Podgląd produktu bez opuszczania listy	Nie	Okno AJAX z pętli sklepu i archiwów
Galeria, cena, SKU, dostępność, krótki opis w oknie	nie dotyczy	Tak, każda część przełączalna
Dodanie do koszyka w oknie	nie dotyczy	Tak, natywny formularz WooCommerce
Produkty wariantowe w oknie	nie dotyczy	Tak, przez skrypt wariantów WooCommerce
Ładowanie na żądanie	nie dotyczy	Tak (AJAX, bez jQuery w kodzie wtyczki)
Przesunięcie układu przy otwarciu	nie dotyczy	Brak; okno ukryte aż do otwarcia
Dostępne okno	nie dotyczy	Uwięzienie fokusu, Escape, zamykanie tłem, okno ARIA
Ręczne umieszczanie przycisku	nie dotyczy	Shortcode [peek_quick_view] / [peek]
Ostatnio oglądane, karuzela, swatche, analityka	Nie	Tak (Peek Pro)
Koszt	Za darmo (rdzeń, bez szybkiego podglądu)	Za darmo (GPL); Pro dodaje merchandising i analitykę

Wersja darmowa a PRO

Darmowa wtyczka Peek to kompletny szybki podgląd, a nie zapowiedź: okno AJAX, natywne dodanie do koszyka z wariantami, pełny ekran ustawień, shortcode i praca nad dostępnością są w zestawie. Peek Pro to dodatek, który wymaga zainstalowanej i aktywnej darmowej wtyczki, i rozwija ten fundament o merchandising oraz pomiary w oknie, dla sklepów, które chcą jeszcze mocniej podbijać konwersję. Dodaje ostatnio oglądane produkty (ze śledzeniem przez cookie, shortcode [peek_recently_viewed] i opcją automatycznego wstawiania), karuzelę produktów powiązanych na dole okna, swatche wariantów, które zastępują listy rozwijane wariantów próbkami koloru, obrazu lub etykiety, własne sekcje okna na treści takie jak informacje o wysyłce czy odznaki zaufania przed koszykiem lub po nim, nawigację wstecz i dalej między produktami wewnątrz okna, sterowanie stylem w kolorach marki oraz analitykę szybkiego podglądu, która śledzi otwarcia okna, akcje dodania do koszyka z okna i konwersje w kasie na produkt, z panelem i eksportem do CSV. Peek Pro dostarczany jest przez Freemius, a nie katalog WordPress.org.

W skrócie

Szybki podgląd przyspiesza przeglądanie, przynosząc produkt do klienta, zamiast odsyłać klienta do produktu. Działa tylko wtedy, gdy okno potrafi faktycznie dokończyć zadanie, więc rzeczy nie do negocjacji to prawdziwe dodanie do koszyka z wariantami, treść ładowana na żądanie bez jQuery, brak przesunięć układu i okno dostępne z klawiatury. Darmowa wtyczka Peek pokrywa to wszystko dostępnym oknem AJAX, pełnym ekranem ustawień i shortcode do ręcznego umieszczania; Peek Pro dokłada ostatnio oglądane, karuzelę powiązanych, swatche wariantów, własne sekcje, nawigację i stylowanie okna oraz analitykę szybkiego podglądu, gdy będziesz gotów, by w oknie prowadzić merchandising i mierzyć wyniki.