Użycie
Ten przewodnik prowadzi od świeżej instalacji do działającej porównywarki produktów, a potem wyjaśnia zachowanie na sklepie.
1. Włącz porównanie i ustaw limit
Dział zatytułowany „1. Włącz porównanie i ustaw limit”Otwórz menu Versus, włącz porównanie i ustaw, ile produktów można porównać naraz (2–6). Większość sklepów wybiera 3 lub 4 — dość, by było użyteczne, mało, by tabela pozostała czytelna na telefonie.
2. Wybierz, gdzie pojawia się przycisk
Dział zatytułowany „2. Wybierz, gdzie pojawia się przycisk”Włącz przycisk Porównaj na listach sklepu i archiwów, na karcie produktu lub w obu miejscach. Opcją Pozwól gościom zdecyduj, czy niezalogowani odwiedzający mogą porównywać, czy tylko zalogowani klienci.
3. Wybierz porównywane pola
Dział zatytułowany „3. Wybierz porównywane pola”Wskaż, które standardowe pola pokazują się jako wiersze — cena, SKU, dostępność, krótki opis — i czy dołączane są atrybuty produktu. Sklep z odzieżą doda rozmiar, kolor i materiał; sklep z elektroniką oprze się na atrybutach dla parametrów.
4. Dostrój zachowanie tabeli
Dział zatytułowany „4. Dostrój zachowanie tabeli”- Włącz Podświetlaj różnice, by różniące się wartości się wyróżniały.
- Włącz Domyślnie tylko różnice, jeśli klient ma trafić od razu na same różnice.
- Zdecyduj, które kontrolki kolumny pokazać — zdjęcie, dodaj do koszyka, usuń — w nagłówku każdej kolumny.
5. Sprawdź na sklepie
Dział zatytułowany „5. Sprawdź na sklepie”Otwórz listę sklepu. Każdy kwalifikujący się produkt pokazuje przycisk Porównaj; kliknięcie przełącza produkt na liście, a stan wciśnięcia przycisku się aktualizuje. Otwórz porównanie — zakładka Porównanie w Moim koncie dla zalogowanego klienta albo dedykowany adres porównania dla gościa — i sprawdź, że produkty ustawiają się w kolumny, z podświetlonymi różnicami i działającym przełącznikiem „tylko różnice”.
Jak zachowuje się porównanie
Dział zatytułowany „Jak zachowuje się porównanie”- Goście budują listę zapisaną per przeglądarka. Gdy gość się zaloguje, lista jest łączona z kontem, więc nic nie ginie przy logowaniu.
- Klienci mają trwałą zakładkę Porównanie w Moim koncie.
- Gdy lista jest na limicie i klient doda kolejny produkt, najstarszy element jest usuwany automatycznie.
- Usunięcie produktu z tabeli odświeża ją w miejscu; licznik na linku porównania aktualizuje się przy zmianach listy.
Typowe scenariusze
Dział zatytułowany „Typowe scenariusze”- Katalog bogaty w parametry. Dołącz atrybuty produktu i włącz „tylko różnice”, by długa tabela parametrów zwęziła się do tego, co różni modele.
- Sklep przyjazny gościom. Pozwól gościom i ustaw przycisk na listach, by odwiedzający mogli porównywać przed założeniem konta; ich lista przenosi się przy rejestracji.
- Zwięzłe porównanie. Ukryj zdjęcie i dodawanie do koszyka w nagłówku kolumny, by tabela była ciaśniejsza i nastawiona na parametry.
Dostosowanie tekstów
Dział zatytułowany „Dostosowanie tekstów”Sekcją Etykiety i teksty zmień brzmienie przycisku porównania, przycisku usuwania, linku porównania, przełącznika różnic, przycisku wyczyść wszystko i komunikatu pustej listy — albo zostaw puste, by użyć tłumaczonych domyślnych. Do pełnej lokalizacji przetłumacz domenę versus (versus.pot w /languages).
Wydajność i dostępność
Dział zatytułowany „Wydajność i dostępność”Front to czysty JavaScript — bez jQuery — odroczony i ładowany w stopce. Tabela przewija się poziomo we własnym kontenerze, więc dodanie kolumn nigdy nie przebudowuje strony (bez CLS). Przyciski porównania niosą stan aria-pressed, a uprzejmy region live ogłasza zmiany listy czytnikom ekranu, z widocznym fokusem i pełną obsługą klawiatury. Błędy sieci i podwójne wysłania są obsługiwane łagodnie, a tabela odświeża się automatycznie po usunięciu.