Créer des filtres couleur, taille et prix dynamiques sur PrestaShop sans recharger la page
Konwersja i UX

Dynamiczne filtry koloru, rozmiaru i ceny w PrestaShop bez przeładowania strony

W katalogu liczącym ponad sto referencji filtry nie są wygodą, lecz warunkiem dostępu do produktów. Ich wdrożenie stawia trzy pytania: które atrybuty uczynić filtrowalnymi, jak utrzymać obciążenie przy dużym katalogu i jak uczynić je używalnymi na ekranie telefonu.

Konsekwencje tych filtrów dla pozycjonowania to odrębny temat, omawiany osobno.

Które atrybuty uczynić filtrowalnymi

Pokusa polega na zaproponowaniu wszystkiego. To błąd najczęstszy i najbardziej kosztowny, zarówno w wydajności, jak i w czytelności.

Trzy kryteria, by zachować filtr.

Jest uzupełniony w co najmniej 80% produktów kategorii. Filtr materiału wypełniony w trzydziestu produktach na dwieście tworzy mylące selekcje: klient sądzi, że zobaczył całą półkę, podczas gdy zobaczył to, co było udokumentowane.

Naprawdę różnicuje. Atrybut, w którym 95% produktów dzieli tę samą wartość, niczego nie filtruje. Spójrz na rozkład wartości przed decyzją.

Odpowiada kryterium wyboru. Klient filtruje po tym, co pomaga mu decydować, a nie po tym, co Twój dostawca uznał za warte udokumentowania. Waga w opakowaniu, wewnętrzna referencja czy kod celny nie mają czego szukać w panelu filtrów.

Punkt odniesienia: sześć do ośmiu filtrów na kategorię pokrywa niemal wszystkie potrzeby. Powyżej panel staje się formularzem.

Filtry różnią się według kategorii

Często zaniedbywany punkt projektowy, który robi różnicę między panelem użytecznym a generycznym.

Rozmiar obuwia ma sens przy butach, żaden przy akcesoriach. Moc ma sens przy elektronarzędziach, żaden przy śrubach.

Identyczny panel filtrów w całym sklepie pokazuje więc wszędzie kryteria bez wartości, co zagłusza kryteria istotne. Konfiguracja musi odbywać się per kategoria, z dziedziczonym i nadpisywalnym zestawem filtrów.

Praktyczny wniosek: proponowane wartości muszą ograniczać się do obecnych w bieżącej kategorii. Proponowanie trzydziestu kolorów, gdy kategoria zawiera tylko cztery, to częsty błąd implementacji.

Filtry Fasetowe AJAX do PrestaShopNawigacja fasetowa, która filtruje szybko i indeksuje rozsądnie€99,00

Typy filtrów

Cztery formy, każda dopasowana do typu danych.

Pola wyboru dla wartości dyskretnych: marka, materiał, rozmiar. Pozwalają na wielokrotny wybór, który jest oczekiwanym zachowaniem.

Próbki koloru dla kolorów, oczywiście, z nazwą w podpowiedzi. Tekstowa lista kolorów jest wyraźnie mniej skuteczna.

Suwak ceny z podwójnym uchwytem. Dwie ostrożności: pokazywać rzeczywiste granice kategorii zamiast stałych wartości i pozwolić na bezpośrednie wpisanie kwot tym, którzy wiedzą, czego szukają.

Przełączniki dla kryteriów binarnych: dostępny, w promocji, szybka dostawa. Umieszcza się je na górze panelu, bo są najczęściej używane.

Licznik wyników

Element decydujący o użyciu, a stawia prawdziwą trudność techniczną.

Pokazanie liczby produktów za każdą wartością chroni klienta przed wyborem pustej kombinacji. Tak robią wszystkie dojrzałe interfejsy filtrowania.

Koszt jest realny: obliczenie tych liczników oznacza tyle zapytań agregujących, ile jest wyświetlanych wartości, przy każdej zmianie selekcji.

Trzy podejścia zależnie od wielkości katalogu. Przy małym katalogu bezpośrednie obliczanie przechodzi bez optymalizacji. Przy średnim katalogu jedno zapytanie agregujące zastępuje zapytania per wartość. Przy dużym katalogu dedykowany indeks lub zewnętrzny silnik wyszukiwania staje się konieczny.

Uzupełniająca reguła wyświetlania: wartość z zerem wyników jest wyszarzana zamiast znikać. Jej zniknięcie sprawia, że lista skacze i dezorientuje.

Wydajność przy dużym katalogu

Trzy wąskie gardła, w kolejności pojawiania się.

Zapytania filtrujące. Filtr po kilku atrybutach tworzy wielokrotne złączenia na tabelach atrybutów i cech. To one kładą bazę na kolana przy dużych kategoriach.

Obliczanie liczników, wspomniane wyżej, które często kosztuje więcej niż samo filtrowanie.

Zliczanie całkowite, potrzebne do paginacji. Przy szerokiej selekcji obejmuje dziesiątki tysięcy wierszy.

Dwie dźwignie, zanim rozważysz przebudowę. Dedykowana tabela indeksu, która prekalkuluje odpowiedniki produkt-wartość, aktualizowana przy każdej zmianie katalogu. Oraz pamięć podręczna per kombinacja, o krótkim czasie życia, która przejmuje najczęstsze selekcje.

Uwaga metodyczna: mierz przed optymalizacją. Zmierz czas odpowiedzi filtrowania na największej kategorii, z trzema aktywnymi filtrami. Jeśli przekraczasz sekundę, problem jest realny i możliwy do zlokalizowania.

Zachowanie na urządzeniach mobilnych

To ono decyduje o realnym użyciu, skoro większość ruchu przez nie przechodzi.

Panel boczny z desktopu nie ma odpowiednika na telefonie. Rozwiązaniem, które działa, jest panel pełnoekranowy, otwierany przyciskiem, z filtrami ułożonymi pionowo.

Pięć reguł implementacji.

Przycisk otwierania pozostaje dostępny podczas przewijania, w pozycji stałej, z wyświetlaną liczbą aktywnych filtrów.

Zastosowanie jest jawne. Na telefonie filtrowanie przy każdym zaznaczeniu powoduje nieustanne przeładowania. Odwiedzający zaznacza, co chce, a potem zatwierdza przyciskiem pokazującym liczbę oczekiwanych wyników.

Aktywne filtry są widoczne po zamknięciu panelu, w formie etykiet usuwalnych jednym gestem.

Resetowanie jest dostępne bez ponownego otwierania panelu.

Panel zamyka się przyciskiem wstecz, bez opuszczania strony. Panel pełnoekranowy, który więzi przycisk wstecz, to poważne tarcie.

Co psuje się na produkcji

Cztery sytuacje do sprawdzenia po wdrożeniu.

Filtry na wariantach. Czy produkt dostępny w czerwieni w rozmiarze S i w błękicie w rozmiarze L powinien pojawić się w selekcji czerwony plus rozmiar L? Nie. Filtrowanie musi dotyczyć istniejących kombinacji, nie iloczynu atrybutów produktu.

Dostępność. Filtr dostępności oparty na ilości produktu bez uwzględnienia wariantów daje fałszywe trafienia.

Sortowanie po filtrowaniu. Musi się zachowywać, gdy odwiedzający zmienia filtr, inaczej wraca do zera przy każdej korekcie.

Puste kategorie po filtrowaniu. Przewidź użyteczny komunikat zamiast pustej strony: zaproponuj usunięcie ostatnio nałożonego filtra, który prawie zawsze jest tym, który opróżnił selekcję.

Mierzenie

Trzy wskaźniki.

Współczynnik użycia filtrów per kategoria. Kategoria, w której nikt nie filtruje, jest albo za mała, by tego potrzebować, albo ma niedopasowane filtry.

Ranking używanych filtrów. Prawie zawsze odkryjesz, że trzy filtry skupiają większość użyć, co uzasadnia przeniesienie ich na górę i rozważenie usunięcia pozostałych.

Współczynnik konwersji sesji z filtrowaniem w porównaniu z sesjami bez. Odwiedzający, który filtruje, ma bardziej precyzyjną intencję, a różnica mierzy wartość mechanizmu.

Moduł Filtrów Fasetowych AJAX dla PrestaShop wdraża ten mechanizm w PrestaShop 8 i 9: konfiguracja filtrowalnych atrybutów per kategoria, filtrowanie bez przeładowania z licznikami wyników, dedykowany indeks dla dużych katalogów i panel pełnoekranowy z jawnym zatwierdzaniem na telefonie.

Czytaj dalej

Powiązane artykuły