Zasada podziału
Storefront jest technologią zamkniętą: nie ma plików szablonu do edycji, własny kod wchodzi wyłącznie przez moduły własne dostępne w pakiecie Premium. Projekt został pod to napisany. Z dwudziestu pięciu elementów tych trzech widoków dwadzieścia jeden powstaje z modułów, które NORD ma w standardzie i które konfiguruje się w edytorze bez linijki kodu.
moduł NORD element powstaje z gotowego modułu, praca to konfiguracja i treść.
moduł własny element wymaga kodu po stronie programisty, z wariantem zastępczym opisanym obok.
Strona główna
| Element serwisu | Realizacja | Uwagi wdrożeniowe |
|---|---|---|
| Pas z adresem i godziną wysyłki | moduł NORD Górny pasek informacyjny | Przewijanie wyłączone. Treść statyczna, żeby adres zamówień dało się kliknąć w każdej chwili. |
| Nagłówek z wyszukiwarką i koszykiem | moduł NORD Lepki nagłówek, Smart Menu | Menu w trybie rozwijanym. Wyszukiwarka pełnoekranowa NORD zastępuje pole inline bez zmiany układu. |
| Pasek działów | moduł NORD Smart Menu, drugi poziom | Kolejność działów wynika z udziału w obrocie, a nie z alfabetu: balony przed konstrukcjami, poradnik na końcu. |
| Próbnik: siatka odcieni z filtrem rodziny | moduł własny | Filtrowanie bez przeładowania to jedyny element pierwszego ekranu poza siatką modułów. Wariant zastępczy: Kafle kategorii Pro z dwunastoma rodzinami koloru, każdy kafel prowadzi do listy. Traci się natychmiastowość, zostaje ścieżka. |
| Arkusz metryki po wyborze odcienia | moduł własny | Wspólny z próbnikiem. Wariant zastępczy: przejście na kartę produktu, gdzie metryka jest w standardzie. |
| Punkty koloru na zdjęciu realizacji | moduł NORD Punkty na zdjęciu | Moduł obsługuje odnośniki do produktów wprost. W makiecie punkt zaznacza odcień w próbniku obok; po wdrożeniu prowadzi do karty produktu. |
| Zestawy gotowych palet | moduł NORD Baner: obraz + treść, cztery wystąpienia | Dodanie całego zestawu jednym przyciskiem: zestaw zakładany jako produkt złożony w Shoperze, nie jako skrypt. Pasek barw wchodzi jako grafika zestawu. |
| Podręczna paleta (pasek u dołu) | moduł własny | Odpowiednik wyjęcia kilku kart z próbnika i położenia obok siebie. Trzyma wybór między podstronami. Wariantu zastępczego w NORD nie ma; bez modułu własnego pozostaje lista ulubionych z Shopera, która nie pokazuje odcieni obok siebie. |
| Liczydło girlandy | moduł własny | Formularz przeliczający metry na sztuki i opakowania. Wariant zastępczy: tabela przeliczeniowa w module Tabele responsywne, dla trzech typowych długości. Traci się dowolną długość i koszt materiału. |
| Kafle asortymentu poza balonami | moduł NORD Kafle kategorii Pro | Układ siatki o zróżnicowanych proporcjach. Moduł pozwala na wiele wystąpień o różnej liczbie kolumn. |
| Arkusz nowości | moduł NORD Slider nowości w widoku listy | Standardowy slider NORD przestawiony na jedną kolumnę. Format wiersza zamiast kafla to kwestia stylu, nie modułu. |
| Pasek do bezpłatnej wysyłki | moduł NORD Pasek postępu darmowej wysyłki | Synchronizuje się z koszykiem w standardzie modułu. |
| Warunki zamówienia | moduł NORD Ikony informacyjne | Bez ikon: moduł dopuszcza sam tekst. Ikony przy każdej pozycji dodałyby ozdobę bez informacji. |
| Poradnik | moduł NORD Slider wpisów bloga | Wpisy pochodzą z bloga sklepu. Automatyczny spis treści wpisu wchodzi z modułu. |
| Stopka | moduł NORD Moduł kontaktowy, Układ kolumnowy, Copyright | Moduł kontaktowy wystawia dane w schema.org, więc wyszukiwarka odczyta adres zamówień i godziny pracy. |
Lista kategorii
| Element serwisu | Realizacja | Uwagi wdrożeniowe |
|---|---|---|
| Pole barwy zamiast zdjęcia produktu | moduł NORD Warianty produktu na listach | Moduł pokazuje kolory wariantów na liście. Trzeba uzupełnić wartości barwne w atrybutach produktów; to praca w katalogu, nie w kodzie. |
| Filtry: rodzina, wykończenie, producent | moduł NORD Filtry Shopera | Rodzina koloru i wykończenie zakładane jako atrybuty filtrowalne. Największa część nakładu leży tutaj i po stronie katalogu. |
| Drugie zdjęcie po najechaniu | moduł NORD w standardzie | Dla balonów drugie zdjęcie to kadr girlandy w tym odcieniu. |
| Rozwijany opis kategorii | moduł NORD Rozwijane opisy kategorii | Opis nad listą i pod listą, oba zwijane. |
| Stan magazynowy przy próbce | moduł NORD Ikony na karcie produktu | Etykieta tekstowa obowiązkowa, kolor kropki tylko jako wzmocnienie. |
Karta produktu
| Element serwisu | Realizacja | Uwagi wdrożeniowe |
|---|---|---|
| Duże pole barwy jako pierwszy obraz | moduł NORD Galeria, pierwszy kadr | Najprościej: jednolita grafika odcienia wgrana jako pierwsze zdjęcie produktu. Nie wymaga kodu, wymaga wygenerowania grafik dla katalogu; przygotujemy je hurtowo z wartości barwnych. |
| Wybór rozmiaru i opakowania | moduł NORD Nowoczesne warianty produktu | Rozmiar jako wariant z ceną i osobnym stanem magazynowym. |
| Tabela zużycia na metr girlandy | moduł NORD Tabele responsywne | Ta sama tabela dla całej kategorii, wstawiana z jednego miejsca w opisie zbiorczym. |
| Zestawy z tym odcieniem | moduł NORD Produkty powiązane | Powiązanie zakładane w katalogu, przy produkcie złożonym zestawu. |
| Sąsiedzi w rodzinie koloru | moduł NORD Slider produktów z kategorii | Sterowany atrybutem rodziny koloru. |
| Zastrzeżenie o wierności odcienia | moduł NORD Opis produktu | Jedna treść dla całej kategorii, prowadząca do Próbnika. Podnosi sprzedaż Próbnika i zbija reklamacje o odcień. |
Cztery moduły własne i co dają
Po wdrożeniu wariantów zastępczych sklep działa w całości na NORD. Poniższe pozycje są tym, co odróżnia go od innych sklepów na tym samym szablonie, i tylko one wymagają programisty.
- Próbnik z filtrem rodziny. Pierwszy ekran, na którym wybór zaczyna się od koloru. Bez niego użytkownik przechodzi przez kafle kategorii, czyli o jedno przeładowanie dalej. Skala: jeden moduł JavaScript operujący na danych katalogu, bez zmian w kasie i koszyku.
- Podręczna paleta. Pasek u dołu ekranu, do którego dekoratorka przypina od dwóch do sześciu odcieni i widzi je obok siebie, tak jak układa karty z fizycznego próbnika. Wybór przechodzi między podstronami i wchodzi do koszyka jednym przyciskiem. Skala: moduł JavaScript plus zapis w przeglądarce. Przy koncie klienta paleta przenosi się na serwer, żeby przechodziła między urządzeniami.
- Liczydło girlandy. Przelicza metry na sztuki, opakowania i koszt materiału. Odpowiada na pytanie, któremu sklep poświęcił osobny wpis na blogu. Skala: formularz i tabela przeliczników jako dane konfiguracyjne, żeby zmiana współczynnika nie wymagała wejścia w kod.
- Dodanie całego zestawu. Realizowalne bez kodu, jeśli zestawy założymy jako produkty złożone. Moduł własny potrzebny tylko wtedy, gdy zestaw ma być konfigurowalny przez klientkę, czyli z podmianą pojedynczego odcienia w palecie.
Kolejność prac
Kolejność ustawiona tak, żeby po każdym etapie sklep dało się pokazać.
- Atrybuty katalogu: rodzina koloru, wykończenie, wartość barwna, producent. Bez tego żaden filtr ani próbnik nie ma z czego działać.
- Konfiguracja NORD: nagłówek, menu, pasek informacyjny, stopka, kafle kategorii, warunki zamówienia.
- Karta produktu i lista kategorii z wariantami kolorystycznymi.
- Zestawy jako produkty złożone, z grafikami palet.
- Moduły własne: próbnik, potem podręczna paleta, na końcu liczydło.
Poza zakresem tego projektu
Makieta obejmuje trzy widoki ścieżki zakupowej. Nie są zaprojektowane: koszyk, kasa, konto klienta, lista wpisów bloga, strony informacyjne i regulaminowe, widok wyników wyszukiwania oraz widoki produktów cyfrowych i kursów. Część z nich w Storefroncie ma układ narzucony przez platformę, więc praca sprowadza się tam do warstwy stylu i nie zmienia niczego w powyższym podziale.