...

Theme development fundamentals

Concepts

...

• 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.

See Wikpedia for more information: http://en.wikipedia.org/wiki/Multitier_architecture#Three-tier_architecture

...

A 3-tier architecture has many advantages:

• It 's 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.

...

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 View does not do any processing; it only displays the result of the processing performed by the model, and interacts with the user.

...

1. Do not mix HTML and PHP code, ; use Smarty tags in order to get a dynamic page.
2. Do not mix HTML and CSS code, ; put the CSS code in a separate .css file.
3. Always validate your HTML and CSS code using the W3C validators: http://validator.w3.org/ for HTML and XHMLXHTML, http://jigsaw.w3.org/css-validator/ for CSS.
4. Do not make SQL queries from a PHP controller (.php file at the root of PrestaShop); prefer use the use of existing methods from the PrestaShop classes, or create new methods for these classes.
5. Always check if a method you need does not already exist exists in the available classes.
6. Do not ever edit PrestaShop's code own files; always build your code into modules in order to facilitate updates.
7. Always make Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.
8. Do comment your code, and write both method names and comments in plain English.
9. When editing the theme on a production site, always put the shop in maintenance mode Maintenance Mode first, via the back-office' "Maintenance" preference page.
10. Use modern browsers, such as Firefox, Google Chrome, IE9 IE10 or Opera (and make sure your friends and family members do too).
11. Whenever possible, use CSS sprites (read http://www.alistapart.com/articles/sprites and http://www.alistapart.com/articles/sprites2/).

...

• 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 (.gif, .jpg, .png), one or more CSS files (.css), and sometimes even JavaScript files (.js).
• Each theme has a 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.

...

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 /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 image /img folder.
• /pdf: this is where all the document models are located.

...