Get Free Audit

How to Create a Theme for Prestashop 1.7. Part 2

Apr 19, 2017

3153 David Narbutovich

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:

How to Create a Theme for Prestashop 1.7. Part 2_image

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.

modules prestashop belvg

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:

Andrey_Dubina
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!

support_prestashop

PrestaShop Support & Maintenance

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

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

4 Comments

  1. Brandon,
    as the subject is pretty difficult, it deserves a separate article. Here you’ll find examples for webpack 1.x 2.x 3.x (watch demo repo).

  2. In the previous article you said “iAdditionally it would be great to set up livereload to speed up development process. We will cover this point in the next part of the article and will start first steps of the theme editing.” Was this click bait or are you planning on expanding this article in the future?

  3. Hello Elena, unfortunately the following manual can not be applied to 1.6 version.

Post a new comment

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