Aplikacja obsługuje style graficzne, odpowiedzialne za wygląd i funkcjonalność sklepu (części klienckiej).
Każdy styl graficzny znajduje się w osobnym podfolderze /skins/default/ (style uniwersalne) lub /skins/user/ (style użytkownika) '
Pełna struktura folderów i plików. Ich funkcje wraz z dostępnymi zmiennymi opisane są w sekcji dostępne zmienne.
- /skins/default/nazwastylu/
- boxes/ - szablony modułów
- Banner/box.tpl
- Basket/box.tpl
- Bestseller/box.tpl
- Currencies/box.tpl
- Custom/box.tpl
- LanguageList/box.tpl
- Login/box.tpl
- Menu/box.tpl
- NewProducts/box.tpl
- Newsletter/box.tpl
- Polls/box.tpl
- Pricelist/box.tpl
- Producers/box.tpl
- ProductFilter/box.tpl
- ProductOfTheDay/box.tpl
- Recent/box.tpl
- Search/box.tpl
- SpecialOffer/box.tpl
- UsersOnline/box.tpl
- cache/ - miejsce przechowywania skompilowanych szablonów
- images/ - wszystkie pliki graficzne stylu
- user/ - pliki dodawane do stylu za pomocą panelu administracyjnego
- js/ - pliki JavaScript
- user.js - własny skrypt JS, edytowany w panelu administracyjnym
- scripts/ - szablony stylu
- basket/
- index.tpl
- step2.tpl
- address.tpl
- step3.tpl
- done.tpl
- finished.tpl
- categories/
- list.tpl
- contact/
- index.tpl
- index/
- index.tpl
- info/
- index.tpl
- links/
- index.tpl
- login/
- login.tpl
- passremind.tpl
- passremind2.tpl
- register.tpl
- news/
- index.tpl
- list.tpl
- newsletter/
- unsign.tpl
- off/
- index.tpl
- panel/
- address-edit.tpl
- address.tpl
- comments.tpl
- edit.tpl
- favourites.tpl
- index.tpl
- orders.tpl
- order.tpl
- password.tpl
- payment.tpl
- plugin/
- execute.tpl
- pricelist/
- html.tpl
- product/
- index.tpl
- list.tpl
- mailfriend.tpl
- search.tpl
- styles/ - pliki CSS
- user.css - własny styl CSS, edytowany w panelu administracyjnym
- files.ini - spis plików wraz z sumami kontrolnymi
- preview.jpg - podgląd, używany w galerii stylów
- settings.ini - konfiguracja stylu
Wymagana jest obecność wszystkich plików i folderów z powyższej listy. W ostateczności można pominąć foldery modułów (boxes), co do których mamy pewność, że nie będą używane.
Wszystkie pliki, znajdujące się w domyślnych stylach, ale niewymienione na liście powyżej wynikają wyłącznie z samej budowy stylu. Są to np. pliki szablonów jak header.tpl, czy footer.tpl, umieszczane wewnątrz innych za pomocą funkcji:
{include file='header.tpl'}
Lista zmiennych dostępnych w każdym szablonie. Jeden szablon reprezentuje jedną akcję kontrolera.
Poprzez panel administracyjny można edytować zawartość dwóch plików użytkownika:
W pliku header.tpl znajduje się warunek, który umieszcza ww. pliki w sekcji <head> o ile tylko nie są puste. Ponieważ wstawiane są jako ostatnie, umożliwia to łatwą modyfikację wyglądu i zachowania strony, bez ingerencji w wewnętrzne pliki stylu.
Program korzysta z systemu szablonów Smarty w wersji 2.x. Poza ogólnodostępnymi funkcjami, dostępne są tzw. helpery:
O ile opcja PAGE_CACHE nie jest wyłączona w pliku /environment/config/settings.ini, wszystkie style graficzne po wygenerowaniu ostatecznego kodu HTML, zapisywane są w cache. Modyfikacja zachowania cache odbywa się poprzez helper {dynamic} oraz parametry {include}.
Pełny opis funkcjonalności znajduje się w dziale Mechanizmy wewnętrzne.
W pliku settings.ini znajduje się konfiguracja stylu, składa się on z sekcji:
W głównym folderze każdego stylu musi znajdować się plik files.ini. Służy on do listowania plików w panelu administracyjnym (Zaawansowana edycja) oraz „oceny”, czy styl został zmodyfikowany. Składnia pliku files.ini.
Jedynym wymaganiem co do CSS, na którym opiera się kod klasy Shop, jest istnienie klasy none, która wymusza niewidoczność obiektu.
.none { display: none !important; }
Reszta implementacji zależy tylko od administratora.
Style korzystają z otwartego frameworka MooTools w wersji 1.3 oraz galerii zdjęć Milkbox. Wymagane moduły MooTools:
Większość funkcjonalności została umieszczona w klasie Shop. Dodatkowo każdy styl dysponuje własnym skryptem /js/main.js, który uzupełnia zachowanie klasy, a następnie - w zdarzeniu domready - tworzy jej instancję.