układ katalogowy (produkty)

Układ katalogowy prezentuje produkty w formie siatki lub listy z grafiką i ceną.

Siatka, lista i to, co je łączy

Układ katalogowy to sposób prezentacji zbioru produktów, w którym każdy rekord otrzymuje kafelek lub wiersz z miniaturą, nazwą, ceną i przyciskiem akcji. Technicznie realizuje się go dziś najczęściej przez CSS Grid z regułą repeat(auto-fill, minmax(...)) albo przez flexbox z zawijaniem, dzięki czemu liczba kolumn dopasowuje się do szerokości okna bez osobnych reguł dla każdego progu. Wariant listowy prezentuje ten sam zestaw danych w jednym słupku, zostawiając więcej miejsca na opis i parametry.

Wybór między nimi nie jest kwestią gustu. Siatka wygrywa tam, gdzie decyduje wygląd produktu, lista tam, gdzie klient porównuje parametry techniczne, na przykład podzespoły komputerowe różniące się pojemnością i taktowaniem.

Wydajność, czyli gdzie katalog zabija stronę

Katalog jest najcięższą podstroną sklepu, bo ładuje kilkadziesiąt obrazów naraz. Trzy mechanizmy decydują o odczuciu szybkości. Leniwe ładowanie przez atrybut loading z wartością lazy odkłada pobranie grafik spoza widocznego obszaru. Podanie atrybutów width i height albo proporcji w CSS zapobiega przeskakiwaniu treści przy dorysowywaniu obrazków, co jest mierzone jako przesunięcia układu. Serwowanie miniatur w rozdzielczości faktycznie wyświetlanej, zamiast skalowania zdjęć produktowych w przeglądarce, potrafi zmniejszyć transfer wielokrotnie.

Osobna decyzja to stronicowanie kontra przewijanie nieskończone. To drugie wygląda nowocześnie, ale utrudnia powrót do miejsca przeglądania i wymaga dodatkowej pracy, żeby roboty wyszukiwarek w ogóle zobaczyły dalsze produkty.

Usterki, które zgłaszają klienci sklepów

Rozjeżdżająca się siatka na telefonie zwykle wynika z jednego elementu o stałej szerokości w pikselach, na przykład zbyt szerokiej etykiety promocji, która rozpycha komórkę. Drugi typowy problem to kafelki różnej wysokości, gdy nazwy produktów mają różną liczbę wierszy; rozwiązuje się to wyrównaniem elementów w gridzie i ograniczeniem liczby linii tekstu. Trzeci to filtry i sortowanie generujące adresy z parametrami, które mnożą w wyszukiwarce niemal identyczne wersje tej samej strony, jeśli nie oznaczy się ich znacznikiem canonical. Czwarty, najbardziej frustrujący dla właściciela, to katalog działający poprawnie w przeglądarce testowej, a pusty u klienta, bo lista produktów jest dorysowywana skryptem blokowanym przez wtyczkę.

Sklep, który musi działać także w nocy

Utrzymujemy zaplecze techniczne małych sklepów: serwer, certyfikat, kopie zapasowe bazy i plików, aktualizacje, a także komputery, na których pracuje obsługa zamówień. Gdy sklep zintegrowany jest z magazynem prowadzonym w Subiekcie albo WAPRO na SQL Server, sprawdzamy również synchronizację stanów, bo pusta siatka produktów bywa skutkiem zerwanej wymiany danych, a nie błędu w szablonie. Dyżurujemy przez całą dobę, siedem dni w tygodniu, co przy sklepie sprzedającym po godzinach ma wymierne znaczenie.