Asset Management in Prestashop 1.6 and 1.7

January 18, 2018 Denis Kulikouski Prestashop
Asset Management in Prestashop 1.6 and 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.

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):

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.

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

Controller’s filename Description
AddressController.php Used by address.php to edit a customer’s address.
AddressesController.php Used by addresses.php to get customer’s addresses.
AuthController.php Used by authentication.php for customer login.
BestSalesController.php Used by best-sales.php to get best-sellers.
CartController.php Used by cart.php to manage the customer’s cart.
CategoryController Used by category.php to get product categories.
CmsController.php Used by cms.php to get a CMS page.
CompareController.php Used by products-comparison.php to compare products.
ContactController.php Used by contact-form.php to send messages.
DiscountController.php Used by discount.php to get a customer’s vouchers.
GuestTrackingController.php Used by guest-tracking.php to manage guest orders.
HistoryController.php Used by history.php to get a customer’s orders.
IdentityController.php Used by identity.php for customer’s personal info.
IndexController.php Used by index.php to display the homepage.
ManufacturerController.php Used by manufacturer.php to get manufacturers.
MyAccountController.php Used by my-account.php to manage customer account.
NewProductsController.php Used by new-products.php to get new products.
OrderConfirmationController.php Used by order-confirmation.php for order confirmation.
OrderController.php Used by order.php to manage the five-step checkout.
OrderDetailController.php Used by order-detail.php to get a customer order.
OrderFollowController.php Used by order-follow.php to get a customer’s returns.
OrderOpcController.php Used by order-opc.php to manage one-page checkout.
OrderReturnController.php Used by order-return.php to get a merchandise return.
OrderSlipController.php Used by order-slip.php to get a customer’s credit slips.
PageNotFoundController.php Used by 404.php to manage the “Page not found” page.
ParentOrderController.php Manages shared order code.
PasswordController.php Used by password.php to reset a lost password.
PricesDropController.php Used by prices-drop.php to get discounted products.
ProductController.php Used by product.php to get a product.
SearchController.php Used by search.php to get search results.
SitemapController.php Used by sitemap.php to get the sitemap.
StoresController.php Used by stores.php to get store information.
SupplierController.php Used by supplier.php to get suppliers.


Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *