\n2. Starting template as a prototype<\/a>
\n3. Environment configuration<\/a>
\n4. Bundler<\/a>
\n5. Theme creation and editing<\/a>
\nCore.js in Prestashop 1.7<\/a>
\nModule scripts<\/a><\/p>\n
As you commence to build PrestaShop theme, make sure you have enough background knowledge on:<\/p>\n
- \n
- CSS, Js, HTML, Smarty 3 template engine, localization, data model and modularization in PrestaShop;<\/li>\n
- Symfony and its Twig template engine<\/li>\n
- Sass<\/li>\n
- Bourbon<\/li>\n
- Composer<\/li>\n
- webpack bundling process;<\/li>\n
- node.js, node.js modules and NPM package manager;<\/li>\n
- GIT<\/li>\n<\/ul>\n
<\/a>1. Initial configuration<\/h2>\n
To begin the installation process, enable Dev Mode in PrestaShop<\/a>. After that clone PrestaShop repository to your global directory on web server:<\/p>\n
\r\n1 $ git clone https:\/\/github.com\/PrestaShop\/PrestaShop <folder_name>\r\n<\/pre>\n
Then switch from the current dev branch to the stable version. To do that, follow to the directory with repository and run the following commands:<\/p>\n
1 $ cd <folder_name>\r\n2 $ git describe --tags $(git rev-list --tags --max-count=3)\r\n\r\n\r\n<\/pre>\n
After that you will get the list of available versions:<\/p>\n
![\"Prestashop](\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" "\\"How")
<\/a><\/p>\nSwitch to 1.7.x.x version (1.7.4.4 in our case)<\/p>\n
\r\n1 $ git checkout 1.7.43.44\r\n<\/pre>\n
Now everything is ready for installation<\/a>.<\/p>\n
- \n
- First Install Composer<\/a>;<\/li>\n
- Navigate to the root directory of the cloned repository and run the command:<\/li>\n<\/ul>\n
1 composer install<\/pre>\n
<\/a>2. Starting template as a prototype<\/h2>\n
When the initial configuration is completed, you will need to decide which template is the best base for your new theme. At the moment there are two themes for developers: classic<\/a> and StarterTheme<\/a>. The difference between them is that StarterTheme has basic functionality, while Classic is a default theme (you can find source files<\/a> at the official repository). Personally I prefer to use Classic. After you cloned PrestaShop, I’m sure you already have source files and Classic theme in themes\/ directory, but what concerns installation and configuration of StarterTheme, you can find all the necessary information on github<\/a>.<\/p>\n
<\/a>3. Environment configuration<\/h2>\n
After you decide what theme to use as a prototype, proceed with operational environment installation. If you’re not sure you have the right version of node.js, you can install NVM(Node Version Manager)<\/a>:<\/p>\n
- \n
- Node.js<\/a> installation;<\/li>\n
- Webpack global package installation (by npm<\/a> package manager);<\/li>\n<\/ul>\n
For Windows users:<\/p>\n
1 $ npm i -g webpack\r\n<\/pre>\n
For others:<\/p>\n
1 $ sudo npm i -g webpack\r\n<\/pre>\n
If you have already read our article about template files structure<\/a>, then you know that all source files are carried in <theme_folder>\/_dev\/<\/strong> directory, as well as assembler config file and package.json, in which all the dependencies are described. So you need to go to this directory and define the dependencies:<\/p>\n
1 <theme_folder>\/_dev$ npm install\r\n<\/pre>\n
This is all for the configuration, which is a necessary preparation stage before we can get down to the theme creation itself. If you are unsure you’ll be able to perform everything described above correctly, I strongly advise you to refresh your knowledge on node.js, npm\/yarn and webpack – or simply request a consultation<\/a> with us.<\/p>\n
<\/a>4. Bundler<\/h2>\n
Navigate to <theme_folder>\/_dev<\/strong> and run:<\/p>\n
1 $ npm run build\r\n<\/pre>\n
– bundling all the Prestashop theme source files;<\/p>\n
1 $ npm run watch\r\n<\/pre>\n
– tracking mode: bundler doesn’t stop its work, but is waiting for any changes and performs recompilation (very fast by means of caching).<\/p>\n
If you’re not sure you have the right version of node.js, you can install NVM(Node Version Manager)<\/a><\/p>\n
I would recommend to use Webpack<\/a>, which is a pretty powerful bundler. No matter what pre(post)processor you use, Webpack works with any type, as long as you configure it beforehand. The same applies to JS: you can use any language you are accustomed to: es – 2015, Coffeescript, Typescript. Additionally, it would be great if you set up LiveReload<\/a> to speed up development process.<\/p>\n
<\/a>![\"support_prestashop\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/06\/support_prestashop.png\" "\\"How")
PrestaShop Support & Maintenance<\/h3>
Take your online store to the next level with BelVG PrestaShop Support & Maintenance<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
<\/a>5. Theme creation and editing<\/h2>\n
First off, edit the theme_folder\/config\/theme.yml<\/em> file.; filling in the required parameters<\/a> will be enough. If you’re not quite accustomed with the Prestashop 1.7 theme.yml file, here’s<\/a> where you can find everything about it. As a new theme is created, it is assumed that all scripts should be collected into a single bundle theme.js.<\/p>\n
As an example, I tested several themes from Addons Marketplace<\/a>. All tests were run with a limited Internet connection – Good 3G (40ms, 1.5Mb\/s, 750kb\/s).<\/p>\n
Here’s the results I got:<\/p>\n
<\/a><\/p>\nAs you can see, some themes took almost 30 seconds to load, with the size of JavaScripts from 0.6 to 1.3 MB. (I don’t include the results of 1.9MB since the compression was disabled there). Therefore, 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 advantages and disadvantages. If you chose the preload method, add the following code to the template head:<\/p>\n
1 <!-- \/templates\/_partials\/head.tpl -->\r\n2 <link rel=\"preload\" href=\"{$urls.base_url}themes\/core.js\" as=\"script\">\r\n3 <link rel=\"preload\" href=\"{$urls.js_url}theme.js\" as=\"script\"><\/pre>\nThis 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
![\"Andrey_Dubina\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2015\/11\/Andrey_Dubina.png\" "\\"How")
Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Andrey<\/a><\/div>\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>Core.js in Prestashop 1.7<\/h2>\n
Core.js is provided by PrestaShop. This file was written in compliance with the ES6 standards and complied with the help of Babel <\/a>in ES5 to provide compatibility with old browsers, with webpack<\/a> 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
- \n
- changedCheckoutStep;<\/li>\n
- clickQuickView;<\/li>\n
- editAddress;<\/li>\n
- editDelivery;<\/li>\n
- handleError;<\/li>\n
- updateCart;<\/li>\n
- updatedAddressForm;<\/li>\n
- updatedCart;<\/li>\n
- updatedDeliveryForm;<\/li>\n
- updatedProduct;<\/li>\n
- updateProduct.<\/li>\n<\/ul>\n
The interaction is based on the Event model which uses EventEmitter<\/a> (you can learn more about it in the Node.js manual<\/a>).<\/p>\n
Here is an approximate performance algorithm of an event model:<\/p>\n
- \n
- Registering an event handler in the event manager (in our case this is the PrestaShop global variable).<\/li>\n
- 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).<\/li>\n
- Sending the event to the event manager (using the .emit<\/a> method, indicating the type of the event as the first argument).<\/li>\n
- 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<\/a> or .once<\/a> methods which receive two obligatory parameters – the name of the event and the function of the event handler).<\/li>\n
- The event manager calls the handler.<\/li>\n
- Proceeding to point 2.<\/li>\n<\/ul>\n
This model will provide you great flexibility in your work. You should also pay extra attention to handleError. Error handling is often ignored by developers, but using this event will help you cover nearly all possible errors mostly related to Ajax queries.<\/p>\n
What concerns other events (such as editAddress, editDelivery, updatedAddressForm, updatedDeliveryForm<\/em>), you can add a custom form validation, upload processing and product updating (events: clickQuickView, updatedAddressForm, updatedDeliveryForm, updatedProduct, updateProduct, updateProductList<\/em>).<\/p>\n
<\/a>Module scripts<\/h2>\n
Want to modify or remove\/exclude module scripts from a page? It is quite simple: to redefine a JS or CSS module file, create a copy of the same file in the theme folder, retaining the original path to the file. To delete or cancel the connection, keep the redefined file empty.<\/p>\n
Source files:<\/p>\n
1 <code>\r\n2 modules\/<module_name>\/path\/to\/file.{css,js}\r\n3 modules\/ps_imageslider\/js\/homeslider.js\r\n4 <\/code><\/pre>\nRedefining:<\/p>\n
1 <code>\r\n2 <theme_folder>\/modules\/<module_name>\/path\/to\/file.{css,js}\r\n3 my_theme\/modules\/ps_imageslider\/js\/homeslider.js\r\n4 <\/code><\/pre>\nIf you have any questions, please, feel free to leave your comments below!<\/p>\n
- 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<\/a> or .once<\/a> methods which receive two obligatory parameters – the name of the event and the function of the event handler).<\/li>\n
- Webpack global package installation (by npm<\/a> package manager);<\/li>\n<\/ul>\n
- Navigate to the root directory of the cloned repository and run the command:<\/li>\n<\/ul>\n
- First Install Composer<\/a>;<\/li>\n
![\"Prestashop](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/photo_2018-11-12_15-35-45.jpg\" "\\"How")
<\/a><\/p>\n![\"How-to-Create-a-Theme-for-Prestashop-1.7\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/How-to-Create-a-Theme-for-Prestashop-1.7_image.jpg\" "\\"How")
<\/a><\/p>\n![\"development_prestashop\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/06\/development_prestashop.png\" "\\"How")