Jak działa konfigurator
Kupujący widzi jedną rzecz: girlandę, która zmienia kolor. Pod spodem dzieje się rachunek na czterech pozycjach katalogowych, mapa odcieni na produkty i podmiana plików zdjęć. Ta strona opisuje obie warstwy, bo od nich zależy, co da się później zmienić bez programisty.
Co widzi kupujący
Konfigurator jest pierwszym ekranem sklepu, a nie osobnym narzędziem, do którego trzeba trafić. Ścieżka ma trzy ruchy: wybór długości, wybór odcinka, wybór odcienia. Po każdym z nich zmienia się podgląd, lista pozycji i cena.
Dlaczego zdjęcia, a nie wypełnienie kolorem
Balon z lateksu ma refleks, przezierność i cień od sąsiada. Koło wypełnione wartością z palety pokazuje barwnik, a nie produkt, i przy odbiorze paczki kończy się rozmową o tym, że „na ekranie było inaczej”. W tym konfiguratorze każda próbka i każdy odcinek podglądu to plik zdjęcia. W wersji sklepowej pliki podmienia się na fotografie z sesji, bez zmiany w kodzie.
Stan siedzi w adresie
Wybrane odcienie i długość zapisują się w adresie strony, więc zestawienie da się wysłać komuś do oceny albo wrócić do niego następnego dnia. Adres jest krótki, bo zawiera indeksy katalogowe, a te są potrzebne i tak.
/?w=m40&k=SL-201,SL-209,SL-103,SL-701
Klawiatura i czytnik ekranu
- Szyna odcinków jest listą zakładek: strzałki przechodzą między odcinkami, Home i End skaczą na skrajne.
- Paleta jest listą wyboru: strzałki przesuwają próbkę, spacja i Enter zatwierdzają, odcień niedostępny jest oznaczony i pomijany przy wyborze.
- Podgląd jest obrazem, więc zmiana odcienia byłaby dla czytnika ekranu niema. Ogłasza ją obszar aktywny pod podglądem: nazwa odcinka, nazwa odcienia, indeks.
- Kolor nie jest jedynym nośnikiem informacji: przy każdej próbce stoi nazwa i indeks, a wybrany odcinek ma obrys i podpis.
Co dzieje się po stronie sklepu
Sklep na Shoper Storefront nie daje dostępu do plików szablonu, więc gotowego pliku HTML nie da się tam wgrać. Konfigurator wchodzi jako moduł własny szablonu: blok znaczników z własnym skryptem, wstawiany w miejsce wskazane w edytorze układu. Moduł jest jeden i obsługuje całą stronę produktu.
Mapa odcienia na produkt
Konfigurator nie zna identyfikatorów produktów z kodu. Czyta je z mapy w konfiguracji modułu, w której jeden wiersz opisuje jeden odcień. Dołożenie odcienia to dopisanie wiersza i wgranie czterech plików zdjęć; wydanie nowej wersji modułu nie jest do tego potrzebne.
| Indeks | Nazwa | Wykończenie | Produkt w sklepie | Pliki zdjęć |
|---|---|---|---|---|
| SL-201 | Malina | mat | 4187 | 12 |
| SL-401 | Perła biała | perła | 4212 | 12 |
| SL-501 | Chrom złoty | chrom | 4230 | 12 |
| SL-504 | Chrom miedziany | chrom | 4233 (brak stanu) | 12 |
Cztery pozycje w koszyku
Jeden zestaw to cztery pozycje katalogowe i akcesoria, bo każdy odcień schodzi ze stanu osobno. Moduł dodaje je po kolei przez firmowe API koszyka i po każdej odpowiedzi sprawdza, czy pozycja rzeczywiście weszła. Jeżeli któraś się nie powiedzie, wycofuje pozostałe i pokazuje, na czym stanęło; koszyk z dwoma odcinkami z czterech jest gorszy niż komunikat o błędzie.
Pozycje wchodzą z opisem odcinka i indeksem odcienia, żeby na liście zamówień w panelu było widać, co dokładnie kompletować. Gdyby pole opisu pozycji okazało się niedostępne, awaryjnym rozwiązaniem jest komentarz do zamówienia z pełnym zestawieniem; treść jest ta sama, zmienia się tylko miejsce.
Braki i ostatnie sztuki
Stan magazynowy przychodzi razem z mapą. Odcień bez stanu zostaje widoczny w palecie, ale nie da się go wybrać, a pod nazwą stoi informacja o braku. Odcień z niskim stanem można kupić i jest oznaczony. Ukrywanie brakujących odcieni byłoby wygodniejsze w kodzie i gorsze dla kupującego, bo szukałby ich potem w wyszukiwarce.
Zdjęcia: ile ich jest i jak się ładują
Trzy długości razy cztery odcinki razy 58 odcieni to 696 plików. Widoczne są zawsze cztery, więc reszta nie waży nic do momentu wyboru. Paleta korzysta z jednego atlasu miniatur zamiast 58 osobnych żądań. Podmiana odcinka idzie przez drugą warstwę obrazu i przenikanie, żeby w miejscu zmiany nie mrugało białe pole.
W tej realizacji pliki powstały z renderu, bo sesji zdjęciowej nie było. Model cieniowania jest fizyczny, nie dekoracyjny: rozproszenie z owinięciem terminatora, dwa odblaski, światło obrysowe i cień kontaktowy. Nazwy plików i ich geometria są docelowe, więc materiał z sesji wchodzi na to miejsce bez zmian po stronie kodu.
assets/odcinki/m40-luk-sl-201.webp
assets/odcinki/{wariant}-{odcinek}-{indeks}.webp
Czego tu nie ma
Zakresem tej realizacji jest konfigurator i jego styk z koszykiem. Poza zakresem zostały: kasa i płatności, konto klienta, wyszukiwarka, blog i śledzenie przesyłki. Nie mają one reprezentacji w interfejsie, bo przycisk, który nic nie robi, jest gorszy niż jego brak.
Koszyk w tej wersji trzyma zestaw w pamięci przeglądarki, żeby dało się sprawdzić całą ścieżkę od doboru koloru do rachunku. W sklepie to samo miejsce zajmuje koszyk platformy i to on prowadzi zamówienie dalej.