Jak to działa
Lokilo zamienia zbiór wpisów lokalizacji w przeszukiwalny, dostępny katalog. Ta strona wyjaśnia, jak się renderuje i jak korzystają z niego klienci.
Najpierw render po stronie serwera
Dział zatytułowany „Najpierw render po stronie serwera”Gdy strona zawiera shortcode [lokilo], Lokilo pobiera każdą opublikowaną lokalizację i renderuje je jako karty wprost w HTML, jako jedną listę. Ponieważ karty są w stronie od początku, katalog działa nawet przy wyłączonym JavaScript, a wyszukiwarki widzą pełną treść.
Natychmiastowe filtrowanie po stronie klienta
Dział zatytułowany „Natychmiastowe filtrowanie po stronie klienta”Gdy JavaScript jest dostępny, nad kartami pojawia się pole wyszukiwania. W miarę pisania Lokilo filtruje karty już obecne na stronie po:
- mieście,
- kodzie pocztowym lub
- nazwie sklepu.
Nie jest wysyłane żadne zapytanie i żadne dane nie opuszczają strony, filtrowanie odbywa się wyłącznie w przeglądarce, więc jest natychmiastowe nawet przy wielu sklepach. Liczba wyników jest ogłaszana przez region ARIA live, więc użytkownicy czytników ekranu słyszą, ile sklepów pasuje.
Każda karta
Dział zatytułowany „Każda karta”Karta pokazuje pola włączone w ustawieniach: zdjęcie sklepu, opis, adres, godziny otwarcia, telefon i e-mail. Telefon i e-mail renderują się jako linki click-to-call i mailto. Nie ma linku do wyznaczania trasy ani mapy, wersja darmowa nie renderuje współrzędnych.
Dostępność
Dział zatytułowany „Dostępność”Lokilo jest dostępny od podstaw:
- liczba wyników korzysta z regionu ARIA live,
- katalog obsługuje klawiaturę z widocznymi stylami focus,
- tekst wyłącznie dla czytników ekranu opisuje wyszukiwanie i wyniki oraz
- respektuje
prefers-reduced-motion.
Style panelu i sklepu są też świadome trybu ciemnego.
Zmiana znaczników
Dział zatytułowany „Zmiana znaczników”Lokilo nie obsługuje nadpisywania szablonów w motywie, szablon sklepowy ładuje się wyłącznie z katalogu wtyczki, więc kopia w motywie nie zostanie użyta. Aby przebudować wygląd katalogu, użyj CSS i klas .lokilo, .locator__card, .locator__name, .locator__address, .locator__hours, .locator__phone oraz bloku .locator__search.
Po stronie PHP wersja darmowa udostępnia trzy haki:
| Hak | Typ | Działanie |
|---|---|---|
locator/store_groups |
filtr | Zwróć listę ['label' => string, 'stores' => Store[]], aby wyrenderować katalog w nazwanych grupach zamiast jednej płaskiej listy. Lokilo Pro używa go do grupowania po regionach. |
locator/import_store_fields |
filtr | Zmienia tablicę pól, zanim import programowy utworzy lub zaktualizuje lokalizację. |
locator/store_imported |
akcja | Uruchamia się po programowym utworzeniu lub aktualizacji lokalizacji, z ID wpisu i oczyszczonymi polami. |
Wydajność
Dział zatytułowany „Wydajność”Lokilo ładuje swoje zasoby tylko na stronach zawierających shortcode i renderuje się bez przeskoków układu. Brak zewnętrznego API, klucza map i śledzenia utrzymuje niewielkie zarówno wagę strony, jak i powierzchnię prywatności.