How to Manage Assets in PrestaShop 1.6 & 1.7

The article is dedicated to adding JS and CSS as well as its managing in Prestashop 1.7 and earlier versions. The first part includes the methods used in both Prestashop versions while the second is about the difference in asset management in Prestashop 1.7.

Let’s consider adding JS and CSS using Prestashop 1.6 theme.

1. Add CSS and JS files to themes/ theme_name/css (or js).

2. Create Frontcontroller.php (if you need the files to be applied for all pages) or, for example, CategoryController.php (for category page) on the path /override/controllers/front/ or /modules/module_name/override/controllers/front/ (for modules). The list containing the names of different pages is at the end of the article.

3. Add the following (for the category page, as an example):

NOTE: if there are no changes, you need to delete /cache/class_index.php file. It is automatically generated with our changes.

The advantage of the method is the possibility to set the order of files loading. Also, files can be compressed and concatenated that improves web page performance.

Additionally, there’s a way to add files directly to header.tpl (/themes/theme_name/):

This way implies that files are loaded globally, but it’s not always necessary.

If compared with Prestashop 1.6, Prestashop 1.7 has improved the way the asserts (js, css, images) are managed. Now the process is simpler. We can manage files directly in the theme without modules, add css and js into HTML with async or defer attributes.

NOTE: the methods addJS (), addCSS (), addJqueryUI () and addJqueryPlugin () are backwards compatible.

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

Registered assets

Every page of every theme loads the following files:

• theme.css
• custom.css
• rtl.css (if a right-to-left language is detected)
• core.js
• theme.js
• custom.js

Registering in themes

First off, we need to create assets key at the beginning of /themes/%themename%/config/theme.yml and then register the necessary files. Page identifiers are based on the php_self property of each controller.

For example, if you need to add a third part library on all pages and a user library on the product page:

ID is a unique identifier necessary for each file. It’s useful for overriding or disabling what has been already loaded by the core or module.

Registering in modules

The best way to register your files is to use the registerStylesheet and registerJavascript methods in the parent FrontController class.

1. With a front controller module (override/controllers/front/FrontController.php):

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

PrestaShop Development

Take your online store to the next level with BelVG PrestaShop development

Visit the page

2. Without a front controller module (module_name/moduleName.php).

If you only have your module’s class, register your code on the actionFrontControllerSetMedia hook, and add your asset on the go inside the hook:

Unregistering

We need to know ID for unregistering.

In modules

We need to use the unregisterJavascript and unregisterStylesheet methods. The-identifier – specify the ID of the file.

Ecommerce Development

Take your online store to the next level with BelVG ecommerce development

Visit the page

In themes

Nowadays there’s the only way to unregister an asset without any module. You need to place an empty file where the module will be overridden.

Existing front office controllers

PrestaShop Modules

Take your store to the next level with PrestaShop modules from BelVG

Visit the store