Odwiedzający przegląda kategorię, schodzi do czterdziestego produktu, otwiera kartę, cofa się i ląduje na górze strony 1. Musi wszystko powtórzyć. To jedna z najczęściej zgłaszanych przeszkód w dużych katalogach, a zarazem jedna z najtańszych do usunięcia.
Dlaczego powrót nie działa
Trzy odrębne przyczyny, z różnymi rozwiązaniami.
Strona jest przeładowywana z serwera. Przy cofnięciu przeglądarka może podać stronę z pamięci podręcznej albo pobrać ją ponownie. W drugim przypadku ginie cały stan wizualny, łącznie z pozycją przewijania.
Treść jest wczytywana po pierwszym renderowaniu. W kategorii z nieskończonym przewijaniem lub filtrami asynchronicznymi strona wraca do stanu wyjściowego: produkty wczytane przewijaniem po powrocie już nie istnieją.
Stan nawigacji nie znajduje się w adresie. Jeśli paginacja, filtry i sortowanie nie odbijają się w adresie, przeglądarka nie ma jak ich odtworzyć.
Ta ostatnia przyczyna jest najbardziej strukturalna: bez stanu w adresie żadne wiarygodne odtworzenie nie jest możliwe.
Co należy zapamiętać
Cztery elementy, z których tylko dwa są oczywiste.
Pozycja przewijania. Najbardziej widoczna i paradoksalnie najmniej istotna: jeśli wyświetlone są właściwe produkty, odwiedzający szybko odnajduje swój punkt odniesienia.
Bieżąca strona lub liczba wczytanych partii. To punkt decydujący. Odwiedzający, który dotarł do sześćdziesiątego produktu, musi odnaleźć te sześćdziesiąt produktów, a nie pierwsze dwadzieścia.
Aktywne filtry i sortowanie. Powinny znaleźć się w adresie, co rozwiązuje problem niezależnie od jakiegokolwiek mechanizmu zapamiętywania.
Obejrzany produkt. Odtworzenie pozycji jest dobre, ale sprowadzenie odwiedzającego dokładnie na miniaturę produktu, który właśnie oglądał, z lekkim podświetleniem, jest wyraźnie lepsze. Natychmiast podejmuje przerwany wątek.
Nieskończone przewijanie PrestaShop: paginacja SEO i powrót do pozycjiNieskończone przewijanie w kategoriach z zachowaną paginacją SEO i powrotem do dokładnej pozycji po wizycie na karcie produktu.€69,00
Dwa podejścia techniczne
Stan w adresie. Każda zmiana filtra, sortowania lub strony aktualizuje adres bez przeładowania. Cofnięcie odtwarza stan w sposób naturalny, bo adres go opisuje.
To podejście solidniejsze: działa również przy udostępnianiu odnośnika, otwieraniu w nowej karcie i indeksowaniu. W zamian wymaga czystej obsługi historii nawigacji, z rozróżnieniem zmian tworzących wpis historii od tych, które zastępują wpis bieżący.
Użyteczna zasada: zmiana filtra tworzy wpis, samo przewijanie zastępuje wpis bieżący. Bez tego rozróżnienia przycisk wstecz zmusza odwiedzającego do przejścia przez dziesięć stanów pośrednich, zanim opuści kategorię.
Magazyn sesji. Stan zapisywany jest po stronie przeglądarki przy opuszczaniu strony i odtwarzany po powrocie. Prostszy w realizacji i ograniczony: nie działa przy udostępnionym odnośniku ani w nowej karcie.
Kombinacja, która działa: adres niesie filtry, sortowanie i paginację, magazyn sesji niesie pozycję przewijania i identyfikator ostatnio oglądanego produktu.
Przypadek nowej karty
Zachowanie bardzo rozpowszechnione i rzadko obsługiwane: odwiedzający otwiera karty produktów w nowych kartach przeglądarki, trzyma pięć otwartych i wraca do karty kategorii.
Dobra wiadomość: w tym przypadku karta kategorii nie została przeładowana, a jej stan jest nienaruszony. Żaden mechanizm nie jest potrzebny.
Mimo to dwa punkty czujności. Jeśli wasza strona automatycznie przeładowuje treść po powrocie fokusu, na przykład by odświeżyć stany magazynowe, niszczycie ten stan. A podświetlenie ostatnio oglądanego produktu w tym scenariuszu nie działa, ponieważ otwarto kilka produktów.
Dobra praktyka polega na wizualnym oznaczeniu wszystkich już obejrzanych produktów w siatce, nie tylko ostatniego. Przydaje się w obu scenariuszach i pomaga odwiedzającemu orientować się w długiej liście.
Nieskończone przewijanie czy paginacja
Powrót do pozycji jest trudniejszy przy nieskończonym przewijaniu, i to waży w wyborze między nimi.
Przy klasycznej paginacji adres zawiera numer strony, powrót działa naturalnie, a indeksowanie jest proste. Wadą jest dodatkowe kliknięcie na każdej stronie.
Przy nieskończonym przewijaniu przeglądanie jest płynniejsze, ale pojawiają się trzy problemy: powrót do pozycji, dostęp do stopki, która staje się nieosiągalna, oraz indeksowanie produktów wczytywanych dynamicznie.
Rozwiązanie pośrednie usuwa większość tych punktów: przewijanie wczytujące automatycznie dwie lub trzy partie, a potem wyraźny przycisk „pokaż więcej”, z aktualizacją adresu przy każdej partii. Zachowujecie płynność na początku przeglądania, adres pozostaje możliwy do udostępnienia, a stopka znów staje się osiągalna.
Co psuje odtworzenie
Cztery sytuacje do sprawdzenia po wdrożeniu.
Pamięć podręczna serwera. Strona z pamięci podręcznej może zostać podana w stanie innym niż oczekiwany. Sprawdźcie zachowanie w warunkach rzeczywistych, nie tylko w środowisku deweloperskim.
Zmiana stanu magazynowego. Jeśli produkt staje się niedostępny między wyjściem a powrotem, siatka się zmienia, a zapamiętana pozycja przestaje pasować. Odtwarzajcie po identyfikatorze produktu, a nie po pozycji w pikselach.
Wyświetlanie responsywne. Pozycja w pikselach obliczona na komputerze nie ma sensu, jeśli odwiedzający w międzyczasie obrócił telefon. To kolejny powód, by myśleć produktami, a nie odległością.
Bloki o zmiennej wysokości. Pasek promocyjny albo blok wczytany z opóźnieniem przesuwają siatkę. Poczekajcie na zakończenie wczytywania elementów nad siatką, zanim odtworzycie pozycję.
Pomiar
Wystarczą dwa wskaźniki, a liczy się drugi.
Liczba produktów obejrzanych w sesji w objętych kategoriach. Odwiedzający, który nie traci już swojej pozycji, siłą rzeczy ogląda ich więcej.
Współczynnik powrotów do kategorii z kart produktów. Jeśli rośnie po wdrożeniu, wasza ścieżka porównywania działa. Jeśli pozostaje niski, problem leży gdzie indziej, prawdopodobnie w samej karcie produktu.
Moduł Nieskończone Przewijanie dla PrestaShop obsługuje to zachowanie w PrestaShop 8 i 9: stopniowe wczytywanie z aktualizacją adresu przy każdej partii, odtworzenie strony i pozycji po powrocie z karty produktu, oznaczanie już obejrzanych produktów oraz wyraźny przycisk po pierwszych partiach, by zachować dostęp do stopki.