System szablonów PrestaShop pozwala developerom i programistom łatwo zbudować swój własny szablon, pod warunkiem, że mają solidne podstawy techniczne.
System szablonów jest zbudowany na 3 - warstwowej architekturze :
/classes./themes.Szablon należy do warstwy prezentacji: Szablon plików znajduje się w folderze /themes, będzie obsługiwać dane dostępowe wysyłane przez warstwę aplikacji i ich powrót do warstwy aplikacji.
Zobacz w Wikipedii więcej informacji na temat architektury 3 warstwowej: http://en.wikipedia.org/wiki/Multitier_architecture#Three-tier_architecture
Architektura 3 - warstwowa ma wiele zalet:
/themes bez odczytania czy zrozumienia choćby jednej linijki kodu PHP.
Jest to ta sama zasada jak w Model-View-Controller (MVC) architektury, tylko jest to prostrzy i bardziej przystepny sposób. |
Model pokazuje zachowanie aplikacji: przetwarzania danych, interakcji bazy danych etc.
Opisuje lub zawiera dane które zostały przetworzone przez aplikacje. Zarządza tymi danymi i zapewnia ich integralność.
Widok jest interfejsem użytkownika z którym użytkownik wchodzi w interakcje.
Jego pierwszym zadaniem jest wyświetlanie danych, które są udzielane przez model. Jego druga rola służy do obsługi wszystkich działań ze strony użytkownika (kliknięcia myszą, wyboru elementów, przyciski, etc.), a także wysyła te zdarzenia do kontrolera.
Widok nie przetwarza, tylko wyświetla widok przetwarzania wykonywanego przez model i komunikuje się z użytkownikiem.
Kontroler ma za zadanie synchronizować zdarzenia pomiędzy Modelem a Widokiem i aktualizować obydwa jeśli jest taka potrzeba. Otrzymuje on wszystkie zdarzenia użytkownika i inicjuje potrzebne czynności do wykonania.
Jeśli jest potrzeba zmian danych, Kontroler zapyta Model w celu zmiany danych, a Model z kolei powiadomi, że dane zostały zmienione, tak aby widok mógł się aktualizować samoczynnie.
Szablon PrestaShop to zestaw plików które można edytować w celu zmiany wyglądu sklepu internetowego.
Oto kilka ważnych informacji:
/themes..tpl), pliku obrazów (.gif, .jpg, .png), z jednego lub więcej plików CSS (.css), i czasami także z plików JavaScript (.js).preview.jpg pliku w folderze umożliwiając właścicielowi sklepu zobaczenie wyglądu sklepu bezpośrednio z panelu adminstracyjnego, a następnie wybór odpowiedniego tematu.Trzeba być świadomym, że istnieje 5 głównych folderów PrestaShop:
/modules: To gdzie moduły są zlokalizowane. Moduł zawiera pliki szablonów, które mogą być w części tematycznej przedefiniowane./themes: Jest miejscem gdzie wszystkie tematy są zlokalizowane. Domyślny temat 1.5 jest w folderze /default (w 1.4, był w /prestashop)./mails: Tutaj są zlokalizowane wszystkie e-maile szablonu. E-mail szablonu powinien dokładnie odzwierciedlać styl i projekt głównego szablonu. Każdy sub-folder zawiera szablony dla danego języka./img: W tym miejscu są zlokalizowane wszystkie obrazy sklepu. Specyficzne obrazy dotyczące szablonu są we własnym folderze /img/pdf: Tutaj są zlokalizowane wszystkie modele dokumentów.Szablon PrestaShop jest zestawem plików które można edytować w celu zmiany wyglądu własnego sklepu internetowego.
Oto kilka ważnych ciekawostek:
/themes..tpl), pliki obrazów (.gif, .jpg, .png), z jednego lub więcej plików CSS (.css), i czasami nawet z plików JavaScript (.js).preview.jpg plik obrazka w folderze, umożliwiający właścicielowi sklepu zobaczenie wyglądu szablonu bezpośrednio z pozycji panelu adminstracyjnego i następnie wybór odpowiedniego motywu.Jako developer musisz zwrócić uwagę na 5 głównych folderów:
/modules:to gdzie wszystkie moduły są zlokalizowane. Moduły szablonów mają swoje pliki, możesz również przedefiniować części tematyczne./themes: tutaj są zlokalizowane wszystkie motywy. /default-bootstrap./default./prestashop./mails: Tutaj są zlokalizowane wszystkie szablony. Szablony e-mail powinny idealnie odzwierciedlać styl i design głównego motywu. Każdy sub-folder zawiera szablony dla danego języka./img: Tutaj są zlokalizowane obrazki sklepu. Specyficzne motywy obrazków są zapisywane we własnym folderze /img./pdf: Tutaj są zlokalizowane modele dokumentów.Oto podgląd na strukturę tematów w PrestaShop (tutaj domyśny motyw):
/css, zawiera wszystkie pliki CSSsass zawiera wszystkie foldery Sass.scss Pliki źródłowe, za nim zostaną skompilowane w plikach CSS./font contkie potrzebuje plików trzcionek./img zawiera wszystkie obrazki./js zawiera wszystkie pliki JavaScript./lang zawiera wszystkie tłumaczenia tematu.Jego prawa dostępu powinny być ustawione na CHMOD 666 (na przykład), tak, że narzędzie panelu adminstracyjnego do tłumaczenia może odczytywać i zapisywać do niego./mobile zawiera mobilną wersje strony./modules zawiera potrzebny szablon plików do wielu modułów.preview.jpg.Tak jak każda strona, szablony PrestaShop są wyświetlane jako mix HTML, CSS i JavaScript. Te trzy języki są podstawą każdej strony internetowej, dlatego powinienieś je znać za nim podejmiesz się edycji istniejącego tematu lub utworzysz nowy.
Domyślny szablon (/themes/default-bootstrap) używa HTML5, CSS3 i JQuery-steruje JavaScript (http://jquery.com/). Używamy jQuery v1.11+.
W swej istocie motyw PrestaShop jest oparty na silniku szablonu Smarty 3 (http://www.smarty.net/), co pozwala programistą i developerom łatwo zabudować własnego motywu, z niewielką wiedzą techniczną .
Smarty 2 jest od dawna przestarzała i nie powinna być używana do motywów w PrestaShop 1.6.
Od kiedy wersja 1.6 PrestaShop zawiera strukturę czołową Bootstrap (http://getbootstrap.com/). Jest to zbiór narzedzi HTML i CSS które pozwalają zbudować programiście ładną i responsywną stronę (co oznacza, że można je łatwo dostosować do dowolnej wielkości ekranu). Początkowo służyło to do wewnętrznych wzorców i projektów w firmie Twitter, ale szybko urosło do najczęściej używanej ramy struktury czołowej.
PrestaShop używa Bootstrapa dla obydwu narzędzi szablonu zarówno czołowego jak i panelu administracyjnego.
Projektanci tworzący nowy panel administracyjny muszą używać Bootstrapa. Projektanci tworzący nową stronę czołową powinni użyć Bootstrapa. Nie jest to obligatoryjne, ale Bootstrap jest mocno wkomponowany w PrestaShop. |
Bootstrap początkowo używa mniej dynamicznego arkusza stylów LESS (http://lesscss.org/), ale PrestaShop używa Bootstrapa dla portu Sass (https://github.com/twbs/bootstrap-sass), Sass jest językiem który inspiruje LESS. To umożliwia użycie ramy Compass.
Przewodnik dla projektanta poruszy ten temat głębiej o Bootstrapie w późniejszym rozdziale.
Wersja 1.6 także daje możliwość użycia języka skryptu Sass (http://sass-lang.com/), i komponuje się z ramką Compassa.
Sass (skrót składniowy arkusza stylów) jest preprocesorem CSSS3 czyli warstwą pomiedzy arkuszami stylów których jesteś autorem i.css plików które służą przeglądarce (jak powiedział Dan Cederholm: http://alistapart.com/article/why-sass). Ma on na celu ułatwianie życia podczas tworzenia plików CSS poprzez rozszerzenie języka CSS:
Zamiast bezpośredniego tworzenia plików .css, projektant tworzy plik .sass albo.scss który jest interpretowany do standardu pliku CSS przy użyciu wiersza polecenia lub narzędzia online.
Należy pamiętać, że można to zrobic zmieniając sposób w jaki używane jest zwykły proces CSS: Jak znowu pisze Dan Cederholm, "Sass jest przedłużeniem CSS3, a jego SCSS (“Sassy CSS”) składnia jest rozszerzeniem CSS3. Oznacza to, że ważny dokument CSS3 jest również ważnym dokumentem SCSS."
Ze swej strony, Compass (http://compass-style.org/) jest ramą Sassa – czyli kombinacja narzędzi jest stworzoną, aby pomóc budować i zarządzać plikami CSS używając języka Sass. Jest napisany w Ruby.
Ten przewodnik projektanta zagłębi się mocniej w Sass i Compass w następnym rozdziale.
Wszyscy projektanci stron i programiści powinni stosować następujące rozszeżenia przeglądarki:
Zapewniają one wiele przydatnych narzędzi, wśród których DOM explorer, edytor CSS, network inspector, itp., a to ogromna pomoc podczas debugowania HTML, CSS, JavaScript, i nawet żądań Ajaxa.
Tutaj znajduje się niewyczerpująca lista najlepszych porad którymi powinieneś się kierować kiedy kreujesz widok:
.css..php w pliku root PrestaShop); używaj istniejące metody z klasy PrestaShop, albo użyj nowej metody dla tej klasy.