PrestaShop 1.6
Child pages
  • Podstawy rozwoju szablonu

Versions Compared

Old Version 1

changes.mady.by.user Jash Technologie

Saved on

compared with

New Version 2

changes.mady.by.user Jash Technologie

Saved on

Key

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

...

Podstawy rozwoju templatki

Table of Contents

Concept

PrestaShop's templating system enables web-designers and developers to easily build their own theme, provided they have a solid technical grounding.

...

Info

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: http://en.wikipedia.org/wiki/Model-view-controller

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.

...

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.

...

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

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.

...

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

More specifically, the default template (/themes/default-bootstrap) uses HTML5, CSS3 and jQuery-driven JavaScript (http://jquery.com/). We use jQuery v1.11+.

Smarty 3

At its core, a PrestaShop's theme is based on the Smarty 3 template engine (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 PrestaShop 1.6 themes.

Bootstrap v3

Since version 1.6, PrestaShop includes the Bootstrap front-end framework (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.

...

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 (http://sass-lang.com/), and the accompanying Compass framework.

...

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:

...

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.

Best practices

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

...