{"id":12945,"date":"2017-04-19T14:45:18","date_gmt":"2017-04-19T11:45:18","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=12945"},"modified":"2025-02-21T19:42:17","modified_gmt":"2025-02-21T17:42:17","slug":"how-to-create-a-theme-for-prestashop-1-7-part-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-create-a-theme-for-prestashop-1-7-part-2.html","title":{"rendered":"How to Create a Theme for Prestashop 1.7. Part 2"},"content":{"rendered":"\n

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.<\/a><\/p>\n

So, let’s begin! First off, edit the theme_folder\/config\/theme.yml<\/em> file. It will be enough just to fill in the required parameters<\/a>. Here you may also find some more information about the Prestashop 1.7 theme.yml file<\/a>. 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<\/a>. 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.<\/p>\n

Below you may find the results:<\/p>\n

\"How<\/a><\/p>\n

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). <\/em>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<\/a>, 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:<\/p>\n

<!-- \/templates\/_partials\/head.tpl -->\r\n<link rel=\"preload\" href=\"{$urls.base_url}themes\/core.js\" as=\"script\">\r\n<link rel=\"preload\" href=\"{$urls.js_url}theme.js\" as=\"script\"><\/pre>\n
This is what will happen: browsers that support preload<\/a> 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.<\/p>\n
Note<\/strong>: this code will not work if you enable the compression and merging of js. Yet the problem can be solved with one simple module.<\/p>\n
<\/a>
\"modules
PrestaShop Modules<\/h3>
Take your online store to the next level with BelVG PrestaShop Modules<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
Core.js in Prestashop 1.7<\/h2>\n
Core.js is provided by PrestaShop. This file was written in compliance with the es-2015 standard and complied with the help of Babel <\/a>in es5 to provide compatibility with old browsers, webpack v1<\/a> is used as a bundler. The file has the the highest priority – 0<\/a>. It imports<\/a> the jQuery v2<\/a> library, as well as follows the logic of PrestaShop and generates various events upon user actions, such as:<\/p>\n