Skórki

Skórka ustawia, jak filtry wyglądają w sklepie: panel i jego grupy, wartości, liczby, kafle i próbki kolorów, wybrane filtry, przyciski, suwak, pasek i jego okienka, szuflada i arkusz na telefonie, formularze filtrów oraz wskaźniki ładowania. Zestawy filtrów decydują, co sklep oferuje; skórka decyduje, jak to wygląda.

Skórkami zarządza się w Filters → Skins, na trzech ekranach: Skins, Skin editor i Sales channels.

Skórki wbudowane i własne

Plugin przynosi skórki wbudowane. Są tylko do odczytu: aby zmienić którąś, zduplikuj ją.

Własna skórka stoi nad inną skórką, swoim rodzicem, i przechowuje tylko to, co zmienisz. Wszystko inne dziedziczy po rodzicu; własna skórka może stać nad inną własną skórką. Krój pisma zawsze pochodzi z motywu kanału sprzedaży.

Ekran Skins

Filters → Skins → Skins pokazuje kartę dla każdej skórki, dziewięć na stronę: próbkę jej wyglądu, nazwę, czym jest („Own skin inheriting from ’…’ — 3 changes”) i kanały, które ją pokazują. Zielona kropka oznacza skórkę pokazywaną przez kanał; kłódka oznacza skórkę wbudowaną. Najpierw są skórki wbudowane, każda z własnymi skórkami, które nad nią stoją.

Kliknięcie karty otwiera skórkę w edytorze skórek. Menu karty:

Działanie	Skutek
Edit / Preview	Otwiera skórkę w edytorze: własną do edycji, wbudowaną do obejrzenia.
Duplicate to own	Tworzy własną skórkę nad tą, nazwaną „… (copy)”. Na razie niczego nie zmienia i nie pokazuje jej żaden kanał.
Rename…	Zmienia nazwę. Nazwa techniczna zostaje bez zmian. Nie dla skórek wbudowanych.
Export JSON	Pobiera opublikowaną wersję skórki jako plik (przed pierwszą publikacją jej wersję roboczą).
Delete	Usuwa skórkę i jej opublikowane wersje. Niemożliwe dla skórki wbudowanej, skórki pokazywanej przez kanał sprzedaży ani skórki, po której dziedziczą inne skórki.

Import JSON nad kartami otwiera Skins → Import and export; zobacz Import i eksport.

Którą skórkę pokazuje kanał

Filters → Skins → Sales channels wymienia kanały sprzedaży ze sklepem, z kolumnami:

Kolumna	Pokazuje
Channel	Kanał i jego adres.
Channel theme	Motyw, którego używa kanał.
Skin	Skórkę, którą pokazuje kanał. Wybór tutaj zapisuje się od razu i sklep od razu go pokazuje.
Channel adjustments	Własną warstwę kanału nad skórką: none albo ile wartości ustawia i zmiany, które zawiera jej wersja robocza. Edit layer otwiera ją w edytorze.
State	Na ile skórka jest opublikowana: Published, Draft albo Draft · 2 changes, z wersją, którą pokazuje sklep.

Każdy kanał sprzedaży pokazuje jedną skórkę. Kanał bez wyboru pokazuje domyślną skórkę wbudowaną. Listę można zawęzić po Name i po Skin. Zmiana skórki kanału wymaga roli edytora filtrów.

Channel adjustments

Channel adjustments to cienka warstwa nad skórką kanału, tylko dla jednego kanału, na przykład z innym kolorem akcentu. Warstwa przechowuje tylko to, co się różni. Edit layer tworzy ją przy pierwszym użyciu i otwiera w edytorze skórek, gdzie jest widoczna tylko we własnym kanale.

Wartość ustawiona przez warstwę wygrywa w tym kanale ze skórką. Gdy edytujesz samą skórkę, taka wartość ma notkę, że dostosowania kanału ustawiają ją nad skórką: zmiana tam nie pokaże się na stronach tego kanału.

Wersja robocza i publikacja

Własna skórka i warstwa kanału mają wersję roboczą i wersje opublikowane. Save draft zachowuje zmiany, nie ruszając sklepu. Publish zamienia wersję roboczą w wygląd sklepu jako nową wersję. Skórka, która nigdy nie została opublikowana, jeszcze niczego nie dodaje: sklep pokazuje najbliższą opublikowaną skórkę, nad którą stoi.

Wartości, których sklep nie może użyć (kolor, który nie jest kolorem, rozmiar poza zakresem), są przy zapisie skórki pomijane, a komunikat mówi, ile ich było.

History (przycisk z zegarem) otwiera historię publikacji obok podglądu. Wersję można przywrócić do wersji roboczej; sklep zmienia się dopiero po Publish. Discard draft usuwa zmiany od ostatniej opublikowanej wersji, więc edytor pokazuje to, co pokazuje sklep. Opublikowane wersje wszystkich skórek są też wymienione w System → Versions.

Edytor skórek

Filters → Skins → Skin editor ma ustawienia skórki w kolumnie i obok podgląd strony sklepu na żywo.

Skórkę wybiera się na górze kolumny. Pasek stanu mówi, po czym dziedziczy.
Skórka wbudowana otwiera się tylko do odczytu, z Duplicate to adjust.
Search a skin setting znajduje ustawienia po nazwie, a także style elementów.
Każdy wiersz pokazuje, skąd pochodzi jego wartość: Inherited · from … albo Set here. Przycisk łańcucha obok zastępuje tutaj wartość dziedziczoną albo pozwala wierszowi znów dziedziczyć.

Podgląd

Podgląd to prawdziwa strona sklepu ze skórką taką, jaka jest w wersji roboczej, jeszcze przed zapisaniem.

State of the preview: As it is, With a choice (wartości wybrane w kilku grupach), Loading albo Empty (strona bez produktów).
Przełącznik urządzeń pokazuje stronę jak na Desktop, Tablet albo Phone.
Page of the preview wybiera Sales channel i Category; bez kategorii podgląd pokazuje Whole catalogue. Warstwa kanału jest widoczna tylko we własnym kanale.

Settings

Karta Settings zawiera wartości skórki w tych grupach.

Colours

Ustawienie	Skutek
Accent	Zaznaczone pola, wypełnienie suwaka, liczba na ‘Filters’.
Accent text	Linki i tekst w kolorze akcentu, na przykład ‘Clear’.
On the accent	Znacznik i wskaźnik ładowania na tle w kolorze akcentu.
Text	Tekst panelu.
Muted text	Tekst drugorzędny.
Lines and frames	Linie między grupami i ramki.
Panel ground	Tło panelu.
Group ground	Tło grupy; brak pozwala prześwitywać tłu panelu.
Focus ring	Obwódka wokół kontrolki z fokusem.
Unavailable box frame	Ramka pola, którego nie można wybrać.
Error ground, Error text	Komunikaty o błędach.

Typography

Ustawienie	Skutek
Font	Stały: z motywu kanału sprzedaży.
Group heading	Rozmiar nagłówka grupy, 12–20 px.
Value	Rozmiar tekstu wartości, 12–18 px.

Sizes

Ustawienie	Skutek
Value row	Wysokość wiersza wartości, 24–48 px.
Value row on touch	Cel dla palca na telefonach i tabletach, 40–56 px.
Checkbox	Rozmiar pola wyboru, 14–24 px.
Box frame	Grubość ramki pola, 1–3 px.
Group inset	Odstęp wewnątrz grupy, z każdej strony, 0–32 px.
Gap between groups	0–24 px.
Drawer from the bar	Szerokość szuflady otwieranej z paska, 320–560 px.
Room for rings	Stałe: miejsce, które każda ramka zostawia na obwódki fokusu.

Radii

Ustawienie	Skutek
Groups and cards	Promień narożników grup i kart, 0–16 px.
Boxes, tiles, button	Promień narożników pól, kafli i przycisku, 0–12 px.

Panel

Ustawienie	Skutek
Groups look	Lines, Cards albo No frames, w kolumnie i w szufladzie; pigułki paska zachowują własną ramkę.
Dense	Mniejsze wiersze i tekst przy wielu grupach, w kolumnie i w szufladzie.
Two columns of boxes	Listy, przyciski opcji i gwiazdki w dwóch kolumnach. Własne Columns filtra ma pierwszeństwo.

Counts

Ustawienie	Skutek
Count style	Badge, Light, Text, (12) albo Hidden. Hidden ukrywa każdą liczbę.
Count ground, Count text	Kolory liczby.
Count ground, unavailable	Także tło kafla i pola bez produktów.
Count text, unavailable	Także tekst wartości, kafla i pigułki bez produktów.

Values

Ustawienie	Skutek
List values as	Checkboxes albo Pills.
Rating stars	Kolor gwiazdek.
Switch, off	Kolor wyłączonego przełącznika.

Swatches and tiles

Ustawienie	Skutek
Swatch shape	Circle, Rounded, Slightly rounded albo Square.
Swatch size	20–40 px.
Counts of colours	In the tooltip only albo Always.
Chosen tile	Dark albo Accent outline (dodaje znacznik).
Chosen tile ground, Chosen tile text, Chosen tile frame	Kolory wybranego kafla.
Counts on tiles	In the tooltip albo Badge in the corner.
Tile without products	Dimmed 0 albo No badge.
Badge reach	Jak daleko plakietka w rogu wystaje poza kafel, 0–10 px.

Chips: Chip ground i Chip text, wybrane filtry.

Buttons: ‘Show N’ ground i ‘Show N’ text.

Slider: Slider handle frame.

Loaders and motion

Ustawienie	Skutek
Hourglass while a change waits to go out	Yes albo No.
Loader	Spinner, Pulse albo Bar.
Loader on the value clicked	No: tylko głowa grupy pokazuje, że liczby są w drodze.
Products while loading	Skeleton, Dim albo Nothing.
Motion	Normal, Reduced albo None. System kupującego, który prosi o ograniczenie ruchu, zawsze wygrywa.

Ustawienie, którego sklep przy pozostałych nigdy nie rysuje, jest zablokowane z notką, na przykład kolory liczby przy stylu liczby Hidden.

Style elementów

Karta Elements nadaje styl pojedynczym częściom filtrów, stan po stanie. Wybierz element z listy albo kliknij go w podglądzie; podgląd zaznacza każde miejsce, w którym występuje.

Elementy obejmują panel i jego tytuł, grupę i jej nagłówek, wiersz wartości, pole wyboru i przycisk opcji, liczbę, kafel, pigułkę, próbkę koloru, gwiazdki oceny, link kategorii, pole, tor, zakres i uchwyt suwaka, przełącznik, sekcje i karty grupy złożonej, nazwę i linię poziomu dopasowania, pigułki paska, przyciski narzędzi i okienko, arkusz z głową, stopką i tłem, wybrane filtry, przycisk zastosowania i przyciski drugorzędne, pusty wynik, części formularza filtrów, komunikat o błędzie, nagłówek listy i wskaźnik ładowania.

Każdy element ma stany, które go dotyczą: Normal, Hover, Selected, Open, Focused, Unavailable, Loading. Stan przechowuje tylko to, co różni się od Normal. Wartość ustawia się dla urządzenia pokazanego w podglądzie; właściwości są w czterech grupach:

Grupa	Właściwości
Typography	Size, Weight
Colours	Text, Background, Icon
Spacing and size	Inner spacing, Minimum height, Width, Maximum height
Border and shadow	Border colour, Corner radius, Shadow

Kontrola kontrastu

Pod ustawieniami edytor sprawdza kontrast każdej pary kolorów, którą sklep pokazuje razem, według WCAG 2.2 AA:

tekst na swoim tle potrzebuje 4.5:1 (Accent text, Text, Muted text, Error text, Count text, Chosen tile text, Chip text, ‘Show N’ text);
akcent, obwódka fokusu, gwiazdki, wyłączony przełącznik, ramka uchwytu suwaka, znacznik na akcencie i niedostępna liczba potrzebują 3:1;
własne pary tekstu i tła w stylach elementów potrzebują 4.5:1, w stanie i na urządzeniu, w których są ustawione.

Para poniżej swojego minimum jest wymieniona w To check before publishing, na przykład „Text: contrast 3.2, 4.5 needed.”. Show otwiera ustawienie, Open element. Kolor, którego sklep przy pozostałych ustawieniach nie rysuje, nie jest sprawdzany. Gdy każda para przechodzi, edytor mówi: „The contrast of every pair meets WCAG 2.2 AA.” Kontrola ostrzega; nie blokuje Publish.