How to Create a Theme for Prestashop 1.7. Part 2

This part continues our series of articles for newbies dedicated to creating themes in Prestashop 1.7. Today we are going to elaborate on peculiarities of JavaScript. We also recommend you to check our previous article that describes how to set up a Prestashop 1.7 environment for a developer.

So, let’s begin! First off, edit the theme_folder/config/theme.yml file. It will be enough just to fill in the required parameters. Here you may also find some more information about the Prestashop 1.7 theme.yml file. When you create a new theme it is assumed that all scripts should be collected into a single bundle theme.js. Here is a short test of several themes from Addons Marketplace. All tests have been run with a limited Internet connection – we have selected to use the Good 3G (40ms, 1.5Mb/s, 750kb/s) connection.

Below you may find the results:

As seen from the above results the load time of certain themes reaches almost 30 seconds and the size of JavaScripts is almost 0.6-1.3 MB. (We do not count the results of 1.9MB since the compression was disabled there). Therefore we can conclude that it is better to load big js files asynchronously. It is possible to achieve this using such methods as: requirejs, webpack dynamic import, <script src=”…” async> and preload. Each method has its own set of advantages and disadvantages. As concerns the preload method, add the following code to the template head:

This is what will happen: browsers that support preload will parse the head of an html document and will launch the execution of obligatory scripts in the background: core.js and theme.js files, which are located at the bottom of an html document just before the closing </body> tag. You can also add and connect other scripts to your html pages.

Note: this code will not work if you enable the compression and merging of js. Yet the problem can be solved with one simple module.

PrestaShop Modules

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

Visit the page

Core.js in Prestashop 1.7

Core.js is provided by PrestaShop. This file was written in compliance with the es-2015 standard and complied with the help of Babel in es5 to provide compatibility with old browsers, webpack v1 is used as a bundler. The file has the the highest priority – 0. It imports the jQuery v2 library, as well as follows the logic of PrestaShop and generates various events upon user actions, such as:

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

Talk to Andrey

• changedCheckoutStep;
• clickQuickView;
• editAddress;
• editDelivery;
• handleError;
• updateCart;
• updatedAddressForm;
• updatedCart;
• updatedDeliveryForm;
• updatedProduct;
• updateProduct.

The interaction is based on the Event model which uses EventEmitter (you can learn more about EventEmitter in the Node.js manual).

Here is an approximate performance algorithm of an event model:

• Registering an event handler in the event manager (in our case this is the Prestashop global variable).
• Generating an event as a response to some external action (clicking the Add to Cart button, filling in the country name into the delivery field etc).
• Sending the event to the event manager (using the .emit method, indicating the type of the event as the first argument).
• The event manager receives the event and searches for a registered handler (to register a custom handler for an event one can use the .on or .once methods which receive two obligatory parameters – the name of the event and the function of the event handler).
• The event manager calls the handler.
• Proceeding to point 2.

Following this model gives us a lot of flexibility. We should also pay special attention to handleError. Error handling is often ignored by developers, but by using this event you can cover almost all possible errors which will be mostly related to Ajax queries.

Also, for other events (such as editAddress, editDelivery, updatedAddressForm, updatedDeliveryForm) you can add a custom form validation, upload processing and product updating (events: clickQuickView, updatedAddressForm, updatedDeliveryForm, updatedProduct, updateProduct, updateProductList).

It is also important to mention modules’ scripts

How is it possible to modify them or remove/exclude from a page? It is quite simple: to redefine a js or css module file you need to create a copy of the same file in the theme folder, retaining the original path to the file. To delete (cancel the connection) a script you should keep the redefined file empty.

Source files:

Redefining:

Additionally, it would be great to set up livereload to speed up the development process.

If you have any questions, please, feel free to leave your comments below!

PrestaShop Support & Maintenance

Take your online store to the next level with BelVG PrestaShop Support & Maintenance

Visit the page