Schematy wyglądu

Każda skórka RWD, zarówno systemowa, jak i własna, może stanowić podstawę tworzenia nowej skórki. Skórką przygotowaną specjalnie pod kątem dalszego rozwoju (jako skórka bazowa) jest skórka PLAIN. Źrodła dowolnej skórki można pobrać za pomocą linku "Pobierz źródła", który wyświetla się przy skórce.

Paczka ze skórką ZIP ma ściśle określoną strukurę katalogów:

Nazwę skórki, pod jaką będzie ona widoczna w systemie, jest nazwa głównego pliku .SCSS (paczka ZIP ze skórką może się nazywać tak samo, ale może też inaczej - nazwa pliku ZIP nie ma żadnego znaczenia z punktu widzenia systemu). Dlatego po ściągnięciu źródeł skórki, należy w trakcie modyfikacji skórki zmienić nazwę głównego pliku SCSS na własną, oraz folderu głównego skórki, na taką samą, jak nazwa pliku głównego (bez rozszerzenia .scss).

Modyfikację skórki należy rozpocząć od edycji pliku głównego *.scss i odpowiedniej korekty ścieżek do plików zależnych, aby po zmianie nazwy folderu głównego ścieżki te były poprawne. W pliku głównym *.scss oraz plikach zależnych z folderu głównego skórki można dokonywać wszelkich zmian mających na celu uzyskanie docelowego, pożądanego wyglądu skórki.

Do wykonywania zmian w skórkach potrzebna jest oczywiście wiedza z zakresu technologii CSS i SASS, przydatna może się także okazać znajomość systemu Bootstrap. Stąd też zmiany w tym zakresie powinny dokonywać osoby mające odpowiednie do tego celu kwalifikacje i wiedzę z zakresu projektowania wyglądu stron internetowych.

Wygląd maili można zmienić edytując plik /src/sass/[nazwa-skorki]/mail.scss. W podstawowej wersji plik ten czerpie z systemowego pliku vendor/abs/mail/mail.scss i w większości przypadków nie wymaga zmian, gdyż w swej domyślnej postaci czerpie ze zmiennych zdefiniowanych dla danej skórki (plik /src/sass/[nazwa-skorki] /_variables.scss), co powoduje, że maile powinny być spójne kolorystycznie ze skórką sklepu.

W celu korzystania ze zmodyfikowanej / utworzonej skórki należy ją odpowiednio spakować (ZIP) i wrzucić poprzez Panel Administracyjny do systemu (proces ten jest niżej bardziej szczegółowo jest opisany). W trakcie pracy nad skórką taki proces może się okazać jednak zbyt uciążliwy i pracochłonny, jeśli zmiany w plikach SASS są częste, a zmiany muszą być na bieżąco weryfikowane. W takiej sytuacji można skorzystać z kompilacji SASS na własnej stacji roboczej, z użyciem dowolnego narzędzia służącego do kompilacji SASS, np. aplikacji Koala (https://koala-app.com) dostępnej na różne platformy systemowe (Windows / iOS / Linux).

Po udanej kompilacji SASS, zawartość wynikowego pliku CSS można wkleić w sekcji CMS  Układ i wygląd  Własny CSS, a następnie zapisać lub skorzystać opcji podglądu. Należy pamiętać, że w przypadku wyboru tego sposobu pracy ze skórką, w celu eliminacji kolizji definicji CSS pochodzących ze skórki właściwej, należy na ten czas włączyć dla sklepu skórkę systemową o nazwie ZERO, która nie zawiera żadnych definicji CSS, dzięki czemu wszelkie reguły CSS będą pochodzić tylko i wyłącznie z treści wklejonej w module Własny CSS.

W celu korzystania ze zmodyfikowanej skórki należy spakować jej źródła w paczkę ZIP i załadować w Panelu Administracyjnym aplikacji. Paczka ZIP, aby została poprawnie przetworzona musi mieć odpowiednią strukturę katalogów - taką, jaka była paczce pobranej z serwera, przy czym istotna jest jedynie gałąź zaczynająca się od folderu "src", natomiast katalog "vendor" nie musi się znajdować w tworzonej paczce ZIP, gdyż jego zawartość i tak zostanie zignorowana. Poprawna paczka ZIP, dla przykładowej skórki o nazwie "my-skin" ma następującą strukturę wewnętrzną:

Tak przygotowaną paczkę ZIP należy załadować do aplikacji (CMS  Układ i wygląd  Schematy wyglądu  Schematy własne), korzystając z przycisku Wybierz w sekcji "Nowy schemat wyglądu". Po załadowaniu pliku ZIP na serwer i poprawnej kompilacji skórki, pojawi się ona na liście skórek własnych do wyboru. W przypadku jakichkolwiek błędów technicznych, zostanie wyświetlony komunikat błędu ze szczegółami dotyczącymi problemu. W przypadku błędów kompilacji SASS komunikat błędu opatrzony jest dodatkową informacją kompilatora SASS - jest to komunikat techniczny w j. angielskim.