LogoLogo
Homepage
  • Documentations for PrestaShop 1.5
  • English documentation 1.5
    • About PrestaShop 1.5
    • New features in PrestaShop 1.5
    • Getting Started
      • What you need to get started
      • Installing PrestaShop
      • Installing PrestaShop using the command line
      • Updating & Uninstalling
      • Misc. information
    • Updating PrestaShop
      • Automatic update
      • Manual update
      • Making and restoring your own backup
      • In case of issues
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • First steps with PrestaShop 1.5
      • Adding Products and Product Categories
      • A Look Inside the Catalog
      • Managing Orders
      • Managing Customers
      • Creating Price Rules and Vouchers
      • Managing Shipping
      • Understanding Local Settings
      • Managing Modules and Themes
      • Making the Native Modules Work
      • Understanding the Preferences
      • Understanding the Advanced Parameters
      • Administering the Back-Office
      • Understanding Statistics
      • Advanced Stock Management
      • Managing Multiple Shops
    • Developer Guide
      • Developer tutorials
        • Using the PrestaShop Web Service
          • Webservice one-page documentation
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Chapter 9 - Image management
          • Chapter 10 - Price management
          • Cheat-sheet - Concepts outlined in this tutorial
          • Web service reference
        • Helpers
          • HelperForm
          • HelperOptions
          • HelperList
          • Using helpers to overload a back-office template
        • New Developers Features In PrestaShop 1.5
        • Using the Context Object
        • DB class best practices
        • Public and overloadable methods
        • Overriding default behaviors
        • Using addJquery(), addJqueryPlugin() and addJqueryUI()
        • Handling special characters in links
        • Auto-updating modules
        • Front-Office Controllers
        • Controllers correspondence table
        • Specifics of multistore module development
        • Developer tips and tricks
        • PrestaShop's developer tools
        • Using the backward compatibility toolkit
      • Fundamentals
      • Coding Standards
      • Setting up your local development environment
      • Diving into PrestaShop Core development
      • Creating a PrestaShop module
      • Creating a front-office module
      • Creating a module with both front-end and back-end controllers
      • Hooks in PrestaShop 1.5
      • Translations in PrestaShop 1.5
      • How to use the Forge to contribute to PrestaShop
      • How to write a commit message
      • Contributing code to PrestaShop
    • Designer Guide
      • Theme development fundamentals
      • Integrating content in a page using hooks
      • Characteristics of a front-office theme
      • Characteristics of a back-office theme
      • Creating your own theme
      • Theme templates and Smarty
      • Using jQuery and Ajax
      • Best practices
      • Designer tutorials
        • Changes in version 1.5 which impact theme development
        • Changing a 1.4 theme to support gift products
        • Implementing layered navigation in a theme
    • System Administrator Guide
    • Merchant's Guide
      • Our advices
      • Sample price rules
    • FAQ
      • Using PrestaShop with WordPress
    • Troubleshooting
  • Documentation française 1.5
    • À propos de PrestaShop 1.5
    • Nouveautés de PrestaShop 1.5
    • Guide de démarrage
      • Ce dont vous avez besoin
      • Installer PrestaShop
      • Installer PrestaShop en ligne de commande
      • Mettre PrestaShop à jour
      • Informations diverses
    • Guide de mise à jour
      • Mise à jour automatique
      • Mise à jour manuelle
      • Faire une sauvegarde et la restaurer
      • En cas de problème
    • Guide de l'utilisateur
      • Formations
      • Personnaliser votre boutique
      • Parcourir le front-office
      • Se connecter au back-office de Prestashop
      • Premiers pas avec PrestaShop 1.5
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les commandes
      • Gérer les clients
      • Mettre en place des promotions
      • Gérer les transporteurs
      • Comprendre les réglages locaux
      • Gérer les modules et les thèmes
      • Configurer les modules natifs
      • Comprendre les préférences
      • Comprendre les paramètres avancés
      • Administrer le back-office
      • Comprendre les statistiques
      • Gestion avancée des stocks
      • Gérer plusieurs boutiques
    • Guide du développeur
      • Fondamentaux
      • Norme de développement
      • Mettre en place votre environnement de développement
      • Plonger dans le développement PrestaShop
      • Créer un module PrestaShop
      • Les hooks de PrestaShop 1.5
      • Les traductions dans PrestaShop 1.5
      • Comment utiliser la Forge pour contribuer à PrestaShop
      • Comment écrire un descriptif de modification
    • Guide de l'intégrateur
      • Fondamentaux de la création de thème
      • Intégrer du contenu dans une page à l'aide de hooks
      • Caractéristiques d'un thème front-office
      • Caractéristiques d'un thème back-office
      • Template de thème et Smarty
      • Utiliser jQuery et Ajax
      • Bonnes pratiques
    • Guide de l'administrateur système
    • Guide du vendeur
      • Exemples de promotions
      • Nos bons conseils
    • Questions fréquentes
    • Dépannage
  • Documentación española 1.5
    • Acerca de PrestaShop 1.5
    • Introducción
      • Lo que necesita para empezar
    • Guía del usuario
      • Formación
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office de PrestaShop
      • Primeros pasos con PrestaShop 1.5
      • Añadir productos y categorías de productos
      • Una mirada interna al catálogo
      • Gestionar pedidos
      • Gestionar clientes
      • Crear reglas de precios y cupones
      • Gestionar el transporte
      • Comprender la Configuración Local
      • Gestionar módulos y temas
      • Configurar los Módulos Nativos
      • Comprender las Preferencias
      • Comprender los Parámetros avanzados
      • Administrar el Back-Office
      • Comprender las estadísticas
      • Gestión avanzada de stock
      • Gestionar varias tiendas
    • Guía del Desarrollador
      • Tutoriales para Desarrolladores
        • Uso del Web Service de Prestashop
          • Capítulo 1 - Creación de acceso al Back Office
  • Документация на русском языке 1.5
    • Информация о PrestaShop 1.5
    • Новые функции в PrestaShop 1.5
    • Приступая к работе
      • Что нужно чтобы приступить к работе
      • Установка PrestaShop
      • Установка PrestaShop при помощи командной строки
      • Обновление и удаление PrestaShop
      • Прочая информация
    • Руководство пользователя
      • Обучение
      • Настройка вашего магазина
      • Изучение публичной части сайта
      • Бэк-офис PrestaShop
      • Первые шаги в PrestaShop 1.5
      • Добавление товаров и товарных категорий
      • Внутри каталога
      • Управление заказами
      • Работа с клиентами
      • Создание правил ценообразования корзины и ваучеров
      • Управление доставкой
      • Ориентация в локальных настройках
      • Управление модулями и темами
      • Настойка встроенных модулей
      • Ориентация в настройках
      • Ориентация в расширенных параметрах
      • Администрирование Back-Office
      • Ориентация в статистике
      • Расширенное управление запасами
      • Управление мультимагазином
Powered by GitBook
On this page
  • Theme development fundamentals
  • Concepts
  • PrestaShop's technical architecture
  • Concepts and technical information

Was this helpful?

  1. English documentation 1.5
  2. Designer Guide

Theme development fundamentals

PreviousDesigner GuideNextIntegrating content in a page using hooks

Last updated 4 years ago

Was this helpful?

Table of contents

/*<![CDATA[*/ div.rbtoc1597308500846 {padding: 0px;} div.rbtoc1597308500846 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597308500846 li {margin-left: 0px;padding-left: 0px;} /*]]>*/

Theme development fundamentals

Concepts

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

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

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

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

Our developer team chose not to use a PHP framework, such as Zend Framework, Symfony or CakePHP, so as to allow for better readability, and thus faster editing.

This also makes for better performances, since the software is only made of the lines of code it requires, and does not contain a bunch of supplemental generic libraries.

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

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.

Concepts and technical information

Best practices

Here is a non-exhaustive list of best practices that you should follow when creating a theme:

  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. Do not make SQL queries from a PHP controller (.php file at the root of PrestaShop); use the existing methods from the PrestaShop classes, or create new methods for these classes.

  4. Always check if a method you need already exists in the available classes.

  5. Do not ever edit PrestaShop's own files; always build your code into modules in order to facilitate updates.

  6. Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.

  7. Do comment your code, and write both method names and comments in plain English.

  8. When editing the theme on a production site, always put the shop in Maintenance Mode first, via the back-office' "Maintenance" preference page.

  9. Use modern browsers, such as Firefox, Google Chrome, IE10 or Opera (and make sure your friends and family members do too).

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

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

Overview of a theme's folder

Here is an overview of the file structure of a PrestaShop theme (here, the default one):

  • The /css folder contains all CSS 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 root of the folder contains TPL files only (Smarty files), as well as the preview.jpg file.

The /css, /img and /js folder are optional, the theme can perfectly work without them, it's up to you to create them.

Firefox: install Firebug (), a free extension for easy comparison and debugging between your CSS and the output.

Firefox/Chrome: install the Web Developer (), a free extension adds many handy web developer tools to your browser.

Safari 5+: use the Web Inspector (see ).

Chrome: use the Developer Tools (see ).

Opera 9.5+: use Dragonfly, a fully-featured debugging environment (see ).

Internet Explorer 8+: use the Developer Tools (see ).

Internet Explorer 6 and 7: install the IE Developer Toolbar (see ), or use Firebug Lite (see ).

See Wikpedia for more information:

This is the same principle as the Model–View–Controller (MVC) architecture, only in a simpler and more accessible way. Learn more about MVC on Wikipedia:

Always validate your HTML and CSS code using the W3C validators: for HTML and XHTML, for CSS.

Whenever possible, use CSS sprites (read and ).

http://getfirebug.com/
http://chrispederick.com/work/web-developer/
http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html
https://developers.google.com/chrome-developer-tools/docs/overview
http://www.opera.com/dragonfly/
http://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx
http://www.microsoft.com/en-us/download/details.aspx?id=18359
https://getfirebug.com/firebuglite
http://en.wikipedia.org/wiki/Multitier_architecture#Three-tier_architecture
http://en.wikipedia.org/wiki/Model-view-controller
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.alistapart.com/articles/sprites
http://www.alistapart.com/articles/sprites2/
http://www.smarty.net/
Theme development fundamentals
Concepts
PrestaShop's technical architecture
Model
View
Controller
Concepts and technical information
Best practices
How a theme works
Theme-specific folders
Overview of a theme's folder