Not long ago Prestashop 1.7 has been released and as you know there are many
\nchanges in it. Here is the short list of the most important changes:<\/p>\n
- \n
- Old themes are not compatible with new 1.7 version;<\/span><\/li>\n
- Theme files structure<\/span><\/a> has been changed;<\/span><\/li>\n
- Now it’s possible to connect various styles and scripts, depending on pages and priority (it can be configured by <\/span>theme.yml<\/span><\/i>);<\/span><\/li>\n
- Bootstrap 4<\/span><\/a>;<\/span><\/li>\n
- Ability to create and use <\/span>custom hooks<\/span><\/a>;<\/span><\/li>\n<\/ul>\n
<\/a>![\"development_prestashop\"](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2019\/06\/development_prestashop.png\" "\\"How")
PrestaShop Development<\/h3>
Take your online store to the next level with BelVG PrestaShop Development <\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
1. Initial configuration<\/strong><\/p>\n
It’s required to have a fundamental GIT knowledge. Let’s clone Prestashop repository to our global directory on web server:<\/p>\n
$ git clone https:\/\/github.com\/PrestaShop\/PrestaShop <folder_name>\r\n<\/pre>\n
Further it’s necessary to switch from the current dev branch to the stable version. To do that, let’s follow to the directory with repository and run the following commands:<\/p>\n
$ cd <folder_name>\r\n$ git tag\r\n<\/pre>\n
After that you will face the list of available versions:<\/p>\n
![\"How](\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" "\\"How")
<\/p>\nLet’s switch to 1.7.x.x version (in my case it’s 1.7.0.3)<\/span><\/p>\n
$ git checkout 1.7.0.3<\/pre>\n
So now everything is ready for <\/span>installation<\/span><\/a>.<\/span><\/p>\n
- \n
- At first Install Composer<\/a>;<\/span><\/li>\n
- Navigate to the root directory of the cloned repository and run the command:<\/span><\/span>\n
composer install<\/pre>\n<\/li>\n<\/ul>\n
It’s important, that in order to use this installation method you should already have enabled <\/span>Dev Mode in Prestashop<\/span><\/a>.<\/span><\/p>\n
2.<\/b> Starting template as a prototype<\/b><\/p>\n
After the first step is completed, we should decide which template is the best fit for creating your new one. At the moment there are two themes provided for developers: <\/span>classic<\/span> and <\/span>StarterTheme<\/span>. The difference between them is only that StarterTheme has only basic functionality, rather then Classic is a default theme (you can find <\/span>source files<\/span> on the official repository). <\/span>As for me, I prefer to use Classic one. And after you cloned Prestashop, I’m sure you already have source files and Classic theme itself in <\/span>themes\/<\/b> directory, but what concerns how to install and configure StarterTheme, all this information you can find on <\/span>github<\/span>.<\/span><\/p>\n
3. Environment configuration<\/b><\/p>\n
After you decide what theme to use as a prototype, let’s start operational environment installation:<\/span><\/p>\n
- \n
- Node.js<\/a><\/span> installation;<\/span><\/li>\n
- Webpack global package installation (by <\/span>npm<\/span><\/a> package manager);<\/span><\/li>\n<\/ul>\n
For Windows users: <\/span><\/p>\n
$ npm i -g webpack<\/pre>\n
For others: <\/span><\/p>\n
$ sudo npm i -g webpack<\/pre>\n
After that let’s navigate to <\/span><theme_folder>\/_dev\/ <\/b>directory, and if you have already read our <\/span>article about template files structure<\/span><\/a>, then you should know that all source files are carried in this directory, as well as assembler config file and of course package.json, in which all the dependencies are described. So let’s define these dependencies: <\/span><\/p>\n
<theme_folder>\/_dev$ npm install\r\n<\/pre>\n
Here we almost completed indispensable minimum of required configurations and now we’re ready to start the most important part – theme creation. And if you are not familiar with the technologies described above, it is highly recommended to read more about node.js, npm\/yarn and webpack. Or just request a consultation<\/span><\/a>.<\/span><\/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
Now you can run the bundler. In order to do that just navigate to <\/span><theme_folder>\/_dev <\/b>and run:<\/span><\/p>\n
$ webpack<\/pre>\n
– bundling all the Prestashop theme source files;<\/span><\/p>\n
$ webpack -w<\/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);<\/span><\/p>\n
Webpack<\/span><\/a> is a pretty powerful bundler, and if you are still not familiar with it, it’s time to get into. <\/span>No matter what pre(post)processor you use, webpack will work properly with any type, as long as you configure it before. The same with js, you can use everything you want: es – 2015, coffeescript, typescript.<\/span><\/p>\n
Additionally 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<\/span><\/a> and will start first steps of the theme editing.<\/span><\/p>\n
- Webpack global package installation (by <\/span>npm<\/span><\/a> package manager);<\/span><\/li>\n<\/ul>\n
- Navigate to the root directory of the cloned repository and run the command:<\/span><\/span>\n
- Theme files structure<\/span><\/a> has been changed;<\/span><\/li>\n
![\"How](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2017\/02\/how-to-create-a-theme-in-prestashop-1.7.png\" "\\"How")
<\/p>\n