...
Podstawy rozwoju szablonu
Table of Contents |
---|
...
Koncepcja
PrestaShop's templating system enables web-designers and developers to easily build their own theme, provided they have a solid technical grounding.
The templating system is based on a 3-tier architecture:
- Data tier (data objects). Database access is controlled through files in the
/classes
folder. - Application tier (data control). User-provided content is controlled by files in the root folder.
- Presentation tier (design). All of the theme's files are in the
/themes
folder.
A theme belongs to the Presentation tier: your template files, located in the /themes
folder, will handle the data sent by the Application tier, and return information to the Application tier.
See Wikipedia for more information on the 3-tier architectureSystem 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 :
- Poziom danych (obiekty danych). Dostęp do bazy danych jest kontrolowany poprzez pliki w folderze
/classes
. - Warstwa aplikacji (kontrola danych). Treści dostarczane przez uzytkowników są kontrolowane przez pliki w folderze głównym.
- Poziom prezentacji (projekt).Wszystkie pliki tematu są w folderze
/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
A Architektura 3 - tier architecture has many advantages:
- It is easier to read the software's code.
- Developers can add and edit code faster.
- Graphic designer and HTML integrators can work with the confines of the
/themes
folder without having to understand or even read a single line of PHP code. - Developers can work on additional data and modules that the HTML integrators can make use of.
...
warstwowa ma wiele zalet:
- Ułatwia odczytanie kodu.
- Programiści mogą dodawać i edytować kod szybciej.
- Graficy i integratorzy HTML mogą pracowć z zakresem powierzonych folderów
/themes
bez odczytania czy zrozumienia choćby jednej linijki kodu PHP. - Programiści mogą pracować na dodatkowych danych i modułach, które mogą wykorzystać integratorzy HTML.
Info |
---|
Jest to ta sama zasada jak w Model-View-Controller (MVC) architektury, tylko jest to prostrzy i bardziej przystepny sposób. |
Model
A model represents the application's behavior: data processing, database interaction, etc.
It describes or contains the data that have been processed by the application. It manages this data and guarantees its integrity.
View
A view is the interface with which the user interacts.
Its first role is to display the data that is been provided by the model. Its second role is to handle all the actions from the user (mouse click, element selection, buttons, etc.), and send these events to the controller.
The View does not do any processing; it only displays the result of the processing performed by the model, and interacts with the user.
Controller
The Controller manages synchronization events between the Model and the View, and updates both as needed. It receives all the user events and triggers the actions to perform.
If an action needs data to be changed, the Controller will "ask" the Model to change the data, and in turn the Model will notify the View that the data has been changed, so that the View can update itself.
How a theme works
A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.
Here are a few important tidbits:
...
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
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
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.
Jak działa szablon
Szablon PrestaShop to zestaw plików które można edytować w celu zmiany wyglądu sklepu internetowego.
Oto kilka ważnych informacji:
- Wszystkie tematy i pliki mają swoje lokalizacje w folderze głównym
/themes
. - Każdy z motywów ma swój własny sub-folder w folderze głównym tematów.
- Każdy z tematów jest wykonany z pliku szablonów (
.tpl
), pliku obrazów (.gif
,.jpg
,.png
), one or more CSS files z jednego lub więcej plików CSS (.css
), and sometimes even JavaScript files i czasami także z plików JavaScript (.js
). - Each theme has a Każdy z temtów ma podgląd 180*200
preview.jpg
image file in its folder, enabling the shop-owner to see what the theme looks like directly from the back office, and select the theme appropriately.
Theme-specific folders
As a theme developer, there are mostly 5 PrestaShop folders you must be aware of:
/modules
: this is where all the modules are located. A module has templates files, can also redefine theme parts./themes
: this is where all the themes are located. The default 1.5 theme is in the/default
folder (in 1.4, it was 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.
Specyficzne foldery szablonu
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
: this is where all the e-mail templates are located. E-mail templates should ideally reflect the style and design of the main theme. Each sub-folder contains language-specific templates/img
: this is where all the store's images are located. Theme-specific images are stored in the theme's own/img
folder./pdf
: this is where all the document models are located.
General information
How a theme works
A PrestaShop theme is a set of files which you can edit in order to change the look of your online shop.
Here are a few important tidbits:
- All themes have their files located in the
/themes
root folder. - Each theme has its own sub-folder, in the main themes folder.
- Each theme is made of template files (
.tpl
), image files 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.
Generalne informacje
Jak działają szablony
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:
- Wszystkie motywy mają swoją lokalizacje w w folderze głównym
/themes
. - Każdy z motywów ma swój własny sub-folder w głównym folderze tematów.
- Każdy z motywów jest wykonany z pliku szablonów (
.tpl
), pliki obrazów (.gif
,.jpg
,.png
), one or more CSS files z jednego lub więcej plików CSS (.css
), and sometimes even JavaScript files i czasami nawet z plików JavaScript (.js
). - Each theme has a Każdy z nich ma 180*200
preview.jpg
image file in its folder, enabling the shop-owner to see what the theme looks like directly from the back office, and select the theme appropriately.
Theme-specific folders
As a theme developer, there are mostly 5 root folders you must be aware of:
/modules
: this is where all the modules are located. A module has templates files, can also redefine theme parts./themes
: this is where all the themes are located.- The default 1.6 theme is in the
/default-bootstrap
folder. - The default 1.5 theme was in the
/default
folder. - The default 1.4 theme was in the
/prestashop
folder.
- The default 1.6 theme is in the
/mails
: this is where all the e-mail templates are located. E-mail templates should ideally reflect the style and design of the main theme. Each sub-folder contains language-specific templates./img
: this is where all the store's images are located. Theme-specific images are stored in the theme's own/img
folder./pdf
: this is where all the document models are located.
Overview of a theme's folder
Here is an overview of the file structure of a PrestaShop theme (here, the default theme):
- The
/css
folder contains all CSS files.- The
/sass
folder contains all the Sass.scss
source files, before they are compiled into the CSS files.
- The
- The
/font
folder contains the needed font files. - The
/img
folder contains all images. - The
/js
folder contains all the JavaScript files. - The
/lang
folder contains the theme's translations. Its access rights should be set at CHMOD 666 (for instance), so that the back office translation tool can read and write into it. - The
/mobile
folder contains the mobile version of the theme. - The
/modules
folder contains the needed template files for many modules. - The root of the folder contains TPL files only (Smarty files), as well as the
preview.jpg
thumbnail file.
Technologies
Basics
Just like any website, PrestaShop's themes are displayed as a mix of HTML, CSS and JavaScript. These three languages form the foundation of any site on the Web, and you should know them before attempting to edit an existing theme or create a brand new one.
...
- 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.
Specyficzne foldery szablonów
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.- Domyślny motyw 1.6 jest w folderze
/default-bootstrap
. - Domyślny motyw 1.5 był w folderze
/default
. - Domyślny motyw 1.4 był w folderze
/prestashop
.
- Domyślny motyw 1.6 jest w folderze
/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.
Podgląd na folder tematów
Oto podgląd na strukturę tematów w PrestaShop (tutaj domyśny motyw):
- Folder
/css
, zawiera wszystkie pliki CSS- Folder
sass
zawiera wszystkie foldery Sass.scss
Pliki źródłowe, za nim zostaną skompilowane w plikach CSS.
- Folder
- Folder
/font
contkie potrzebuje plików trzcionek. - Foder
/img
zawiera wszystkie obrazki. - Folder
/js
zawiera wszystkie pliki JavaScript. - Folder
/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. - Folder
/mobile
zawiera mobilną wersje strony. - Folder
/modules
zawiera potrzebny szablon plików do wielu modułów. - Folder główny zawiera tylko pliki TPL (pliki Smarty), jak również plik miniatur
preview.jpg
.
Technologie
Podstawy
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
) uses używa HTML5, CSS3 and jQueryi JQuery-driven steruje JavaScript (http://jquery.com/). We use Używamy jQuery v1.11+.
Smarty 3
At its core, a PrestaShop's theme is based on the Smarty 3 template engine W swej istocie motyw PrestaShop jest oparty na silniku szablonu Smarty 3 (http://www.smarty.net/), which allows web-designers and developers to easily build their own theme, with little technical knowledge.Smarty 2 has long been deprecated, and should not be used for 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 themes.
Bootstrap v3
Since version Od kiedy wersja 1.6 , PrestaShop includes the Bootstrap front-end framework PrestaShop zawiera strukturę czołową Bootstrap (http://getbootstrap.com/). It is a collection of HTML and CSS tools built to help web designer create consistently beautiful and responsive designs (meaning that they can easily adapt to any screen size). Initially an internal effort to document and share common design patterns and assets within the Twitter company, it has quickly grown to become the most used front-end framework.
PrestaShop uses Bootstrap for both its front office and back office default templates.
Info |
---|
Designers creating a new back office theme MUST use Bootstrap. Designers creating a new front office theme SHOULD use Bootstrap. While this is not an obligation, Bootstrap is deeply built into PrestaShop. |
Bootstrap initially uses the LESS dynamic stylesheet language 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.
Info |
---|
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/), but PrestaShop uses the Bootstrap For Sass port ale PrestaShop używa Bootstrapa dla portu Sass (https://github.com/twbs/bootstrap-sass), Sass being the language that inspired LESS. This makes it possible to use the Compass framework.
This Designer Guide will dive on more depth into Bootstrap in a later chapter.
Sass and Compass
Version 1.6 also makes it possible to use the Sass scripting language 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.
Sass i Compass
Wersja 1.6 także daje możliwość użycia języka skryptu Sass (http://sass-lang.com/), and the accompanying Compass frameworki komponuje się z ramką Compassa.
Sass (short for Syntactically Awesome Stylesheets) is a CSS3 preprocessor – that is, a layer between the stylesheets you author and the .css
files you serve to the browser (as said by Dan Cederholm hereskró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). It aims at making life easier when creating CSS files by extending the CSS language:
- It adds variables, mixins, and functions (with heritage).
- It helps prevent code repetition.
- It makes it easier to maintain code.
- It makes writing code faster.
- etc.
Instead of directly creating .css
files, the designer creates .sass
or .scss
files which are then interpreted into standard CSS files using a command-line program or an online tool.
Note that this can be done with altering the way you are used your usual CSS process: as Dan Cederholm writes again, "Sass is an extension of CSS3, and its SCSS (“Sassy CSS”) syntax is a superset of CSS3. Meaning, any valid CSS3 document is a valid SCSS document as well."
For its partMa on na celu ułatwianie życia podczas tworzenia plików CSS poprzez rozszerzenie języka CSS:
- Dodaje zmienne wstawek i funkcje (dziedziczy).
- To pomaga w zapobiec powtórzenia kodu.
- To sprawia, że łatwiej jest zachować kod.
- To sprawia, że piszę się go szybciej.
- etc.
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/) is a Sass framework – that is, a combination of tools created to help you build and manage your CSS files using the Sass language. It is written in Ruby.
This Designer Guide will dive on more depth into Sass and Compass in a later chapter.
Advices
Browser extensions
All web-designers and developers should use the following developer browser extensions:
...
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.
Porady
Rozszerzenia przeglądarki
Wszyscy projektanci stron i programiści powinni stosować następujące rozszeżenia przeglądarki:
- Firefox: używa narzędzi programistów (zobacz https://developer.mozilla.org/en-US/docs/Tools). They can even help you work with SassMogą tobie nawet pomóc przy pracy z Sassem: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
- Firefox: alternatively, install alternatywnie instaluje wtyczkę Firebug (http://getfirebug.com/), a free extension for easy comparison and debugging between your CSS and the outputdarmowe rozszerzenie dla łatwiejzego porównania i debugowania pomiędzy twoim CSS a wyjściem.
- Firefox/Chrome: install the Web Developer zainstalować programistę stron (http://chrispederick.com/work/web-developer/), a free extension adds many handy web developer tools to your browserbezpłatne rozszerzenie dodające wiele ręcznie stworzonych narzędzi przez programistów do twojej przeglądarki.
- Safari 5+: use the Web Inspector (see używa inspektora stron (zobacz https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html).
- Chrome: use the Developer Tools (see używa narzędzi programisty (zobacz https://developer.chrome.com/devtools/index).
- Opera 9.5+: use używa Dragonfly, a fully-featured debugging environment (see w pełni funkcjonalne środowisko debugowania (zobacz http://www.opera.com/dragonfly/).
- Internet Explorer 8+: use the Developer Tools (see używa narzędzi programisty (zobacz http://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx).
- Internet Explorer 6 and 7: install the IE Developer Toolbar (see http://www.microsoft.com/en-us/download/details.aspx?id=18359), or use albo użyj Firebug Lite (see zobacz https://getfirebug.com/firebuglite).
They provide a lot of useful tools, among which Zapewniają one wiele przydatnych narzędzi, wśród których DOM explorer, edytor CSS editors, network inspector, etcitp., and are a huge help when debugging a to ogromna pomoc podczas debugowania HTML, CSS, JavaScript, and even Ajax requestsi nawet żądań Ajaxa.
Best practices
Here is a non-exhaustive list of best practices that you should follow when creating a theme:
...
Najlepsze porady
Tutaj znajduje się niewyczerpująca lista najlepszych porad którymi powinieneś się kierować kiedy kreujesz widok:
- Nie mieszaj kodu HTML i PHP; używaj tagów Smarty w celu uzyskania dynicznej strony.
- Nie mieszaj kodu HTML i CSS; kod CSS wstawiaj w separator pliku
.css
. - Zawsze uprawamacniaj swój kod HTML i CSS używając walidatora W3C: http://validator.w3.org/ for dla HTML and i XHTML, http://jigsaw.w3.org/css-validator/ for dla CSS.
- Do not make SQL queries from a PHP controller Nie rób zapytań SQL z kontrolera PHP (
.php
file at the w pliku root of PrestaShop); use the existing methods from the PrestaShop classes, or create new methods for these classes. - Always check if a method you need already exists in the available classes.
- Do not ever edit PrestaShop's own files; always build your code into modules in order to facilitate updates.
- Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.
- Do comment your code, and write both method names and comments in plain English.
- When editing the theme on a production site, always put the shop in Maintenance Mode first, via the back office' "Maintenance" preference page.
- Use modern browsers, such as Firefox (latest non-beta version), Google Chrome (latest non-beta version), IE10+ or Opera (latest non-beta version) – and make sure your friends and family members do too!
- Whenever possible, use CSS sprites (read używaj istniejące metody z klasy PrestaShop, albo użyj nowej metody dla tej klasy.
- Zawsze sprawdzaj czy metoda której potrzebujesz czasem już nie istnieje w dostępnych klasach.
- Nigdy nie edytuj plików własnych PrestaShop, zawsze twórz swój kod w modułach w celu ułatwienia aktualizacji.
- Zawsze upewnij się że tworzysz przejrzysty i czytelny kod, na przyszłość twój kod będzie łatwy do odczytania przez inne osoby.
- Komentarze do kodu i nazwy metod napisz w prostym języku angielskim.
- Kiedy edytujesz motyw na stronie produkcyjnej sklepu, zawsze pamiętaj żeby najpierw umieścić sklep w trybie konserwacji poprzez panel administracyjny "Konserwacja " w zakładce preferencje.
- Używaj nowoczesnch przeglądarek takich jak, Firefox (najnowsza wersja non-beta), Google Chrome (najnowsza wersja non-beta), IE10+ albo Opera (najnowsza wersja non-beta) – i upewnij się że twoi znajomi rodzina również!
- Jeśli to tylko możliwe używaj CSS sprites (czytaj http://www.alistapart.com/articles/sprites and i http://www.alistapart.com/articles/sprites2/).
- Disable your browser's cache when developingWyłącz pamieć podręczną swojej przeglądarki kiedy pracujesz.