PrestaShop 1.5
Child pages
  • Theme development fundamentals

Versions Compared

Old Version 3

changes.mady.by.user Xavier Borderie

Saved on

compared with

New Version 4

changes.mady.by.user Xavier Borderie

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

PrestaShop's theme system is based on a template engine, called Smarty (http://www.smarty.net/), which allows web-designers and developers to easily build their own theme, with little technical knowledge.

Tip

All web-designers and developers should use the following developer tools:

They provide a lot of useful tools, among which DOM explorer, CSS editors, network inspector, etc., and are a huge help when debugging HTML, CSS, JavaScript, and even Ajax requests.

 

PrestaShop's technical architecture

...

  1. Do not mix HTML and PHP code, use Smarty tags in order to 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 XHML, 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 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 in the available classes.
  6. Do not ever edit PrestaShop's code files; always build your code into modules in order to facilitate updates.
  7. Always make sure to produce a clear and readable code, making it easy to maintain for anyone.
  8. Do comment your code, and write in English.
  9. When editing the theme on a production site, always put the shop in maintenance mode first, via the back-office' "Maintenance" preference page.
  10. Use modern browsers, such as Firefox, Google Chrome, IE9 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/).

...

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

...