Warning: You are browsing the documentation for PrestaShop 1.7, which is outdated.
You might want to read an updated version of this page for the current version, PrestaShop 8. Read the updated version of this page
With PrestaShop 1.7, all module overriding code goes to the
modules directory (in your module’s own directory).
This change was introduced with Pull Request #5020.
Examples in this page are based on this sample module directory structure:
. ├── css │ ├── external-lib.css │ └── style.css ├── js │ └── app.js ├── moduledemo.php └── views └── templates └── front ├── included-template.tpl └── moduledemo.tpl 5 directories, 6 files
With PrestaShop 1.7, here are the folder paths to create in order to override templates and assets:
. └── modules ├── css │ ├── external-lib.css │ └── style.css ├── js │ └── app.js └── views └── templates └── front ├── included-template.tpl └── moduledemo.tpl 6 directories, 5 files
Compared to what was needed in PrestaShop 1.6, it is much simpler:
. ├── css │ └── modules │ └── css │ ├── external-lib.css │ └── style.css ├── js │ └── modules │ └── js │ └── app.js └── modules └── views └── templates └── front ├── included-template.tpl └── moduledemo.tpl 10 directories, 5 files
There is one very important issue that you should be aware of. When loading a template file (for instance ‘moduledemo.tpl’), PrestaShop will look for overriding first, in the following order:
But if your
moduledemo.tpl file includes the
included-template.tpl file, you will have to override ‘included-template.tpl’ as well, even if you don’t want to modify it (nor to edit the path). This means that every file that an overridden file includes needs to be copy-pasted as-is in order for your override to work properly.
The issue goes both ways: if you want to modify the
included-template.tpl file, you will have to override the
moduledemo.tpl file that includes it.
PrestaShop 1.7 introduces a new way to include files in module templates. By using this method, all the expected rules will be followed:
PrestaShop 1.7 also introduces our own SmartyDev tool, an Smarty extension which allows you to see the template’s name within your generated HTML markup. This will help debugging a lot, especially because of template override.
Here an example of generated markup with SmartyDev activated:
[...] <a href="http://prestashop.ps/en/" class="dropdown-item">English</a> </li> </ul> </div> <!-- end /var/www/html/PrestaShop/themes/classic/modules/ps_languageselector/ps_languageselector.tpl --> <!-- begin /var/www/html/PrestaShop/themes/classic/modules/ps_customersignin/ps_customersignin.tpl --> <a class="logout hidden-sm-down" href="http://prestashop.ps/en/?mylogout=" rel="nofollow"> <i class="material-icons"></i> Sign out </a> <a class="account" href="http://prestashop.ps/en/my-account" title="View my customer account" rel="nofollow" > <i class="material-icons hidden-md-up logged"></i> <span class="hidden-sm-down">Julien Bourdeau</span> </a> <!-- end /var/www/html/PrestaShop/themes/classic/modules/ps_customersignin/ps_customersignin.tpl --> <!-- begin /var/www/html/PrestaShop/themes/classic/modules/ps_shoppingcart/ps_shoppingcart.tpl --> <div class="blockcart cart-preview " data-refresh-url="http://prestashop.ps/en/module/ps_shoppingcart/ajax"> <div class="header"> <i class="material-icons shopping-cart">shopping_cart</i> [...]
To use it, simply set the
_PS_MODE_DEV_ constant to
true in your installation’s
/config/defines.inc.php file: add the
define('_PS_MODE_DEV_', true); line to that file in order to turn the PrestaShop Developer Mode on, which features SmartyDev.