PrestaCraft on Facebook

Please like our page on Facebook to get notifications about new tutorials :)


PrestaCraft

PrestaCraft on Facebook

Please like our page on Facebook to get notifications about new tutorials :)


PrestaCraft

For many years of my experience with PrestaShop I came across many useful websites that turned out to be very helpful when using this CMS system.

Today I’m going to show you the list of 10 things that you can consider useful if you are running PrestaShop store. I will divide it to three sections:

  • Module tools
  • Theme tools
  • Other tools

Module tools

1. PrestaShop module generator

URL: https://validator.prestashop.com/

To use this tool you should create account first or sign in. Then, click on the “Module generator” link which is visible in the top navigation bar. You’ll see form which looks like this:

This one allows you to generate simple, basic module compliant with PS coding standards. It’s not only good for those who are learning about module development but also for people creating their next module – as a great boilerplate.

It has three sections which are described perfectly, so you should not face any problem. If you’ve filled all necessary fields, those 3 circles should become green, as you can see below:

Click “Create” and your freshly generated module will start downloading! It is ready to install in your store. Be sure to check all files included in this .zip archive and see how things are done there, because this is good place to start module development and learn best practices.

2. PrestaShop module validator

URL: https://validator.prestashop.com/

The URL address is the same as in previous point. Right after logging in to PrestaShop validator website you are going to see a form which allows you to upload your module .zip file or fill in your GitHub repository name.

You are also able to select PrestaShop versions compliancy. This is especially useful whenever you want to validate a module for specific releases (older like 1.4 or newer – 1.7). It is also fine to skip this step as there is already one compliancy selected by default.

After clicking the magic “Process the validation” button you will see the validation result page.

In an ideal world you should see all labels in the left sidebar with blue/green color and with a check mark. However it’s normal that during your module’s first validation you’ll (most likely) see some more or less important errors and notices.

Check tab-by-tab for error messages and try to solve them by fixing your code. Repeat this process until your module is totally valid and you’ll be sure your code is matching PrestaShop’s official standards.

3. PrestUI

URL: https://github.com/Scritik/prestui

This is a handy tool which is useful if you want to create module configuration page that complies with PrestaShop interface and look. It complies pseudo-HTML code to final HTML, thanks to RiotJS library.

It’s compatible with all popular PS versions. GitHub repository contains simple documentation, so it’s the best place to start your adventure with PrestUI.

I must admit that I found this recently and it’s a new tool for me. I will use it for sure in my newer modules 🙂

4. ContentBox

URL: https://contentbox.org/

This module is pure greatness. If you’ll ever need to put any customizable HTML content and hook it whenever you want to – this module is for you.

It displays tinyMCE textarea editor where you can put (and modify anytime) your content and hook it to desired place. Furthermore, it has multilanguage, multistore support and is compatible with PrestaShop 1.7. You can generate your own module on their website – just scroll down and click “Generate your Module”.

Then go to the module configuration page where you can fill the content for all available languages, as you can see below:

You are also able to choose some additional options from settings located at the bottom of page. It looks like this:

If everything is set – press save. The last thing to do is to move your module to desired hook(s). To do so head over to Modules > Positions in BackOffice menu. In the top right corner click “Transplant a module”.

And there you go! As simple as that. Remember you can do this as many times as you need to. So if your store is going to have several places with configurable content, this is a very nice tools which will help you with that.

Theme tools

5. Classic rocket theme

URL: https://github.com/PrestaShop/classic-rocket

It is wonderful rework of PrestaShop’s “classic theme” (1.7) which has much better performance, accessibility and SEO.

Main features (taken from its readme):

  • last version of Twitter Bootstrap
  • lazy loading images
  • offcanvas for main menu and filter menu
  • less css and less js
  • form accessibility and better validation
  • SEO: Hn, rel prev/next for pagination…
  • font performance
  • better responsive

So far I can’t imagine better theme boilerplate for FrontEnd developers working with PrestaShop 1.7.

6. PrestaShop UI Kit

URL: https://build.prestashop.com/prestashop-ui-kit/

The set of CSS and JS files which contains all HTML (and Bootstrap) components compatible with PrestaShop style and colors. Please note that its look is based on 1.7 PS version (however you can use it wherever you want to, even outside PrestaShop ecosystem).

The easiest way to see it is by entering its URL and looking at all pages (0-18) from the left sidebar. In my personal opinion it just looks amazing!

Other tools

7. htaccess and htpasswd generator

URL: http://build.prestashop.com/tools/htaccess-generator-protect-your-prestashop-backoffice

Another tool coming from PrestaShop team. This one will help you securing your store pages – FrontOffice or BackOffice.

If you fill the form at the bottom of page correctly upload generated files to your server, then everyone entering your page will be asked for username and password. It’s the most basic way of securing any website and you could already see it somewhere else. In chrome browser (and in polish language) it looks like this:

8. Build.PrestaShop.com

URL: http://build.prestashop.com

This is something new which came out after PS 1.7 release. Authors name it: “Official blog for PrestaShop development written by the product and core dev team, and PrestaShop contributors“.

Here you can find posts and useful articles about newest PrestaShop releases and future plans for this CMS. There is also the Core Weekly series where you can check report highlights changes in PrestaShop’s codebase – such as: new features, bug fixes, documentation changes and more.

I recommend checking this website at least once a week if you want to stay up-to-date with PrestaShop ecosystem – especially if you are developer.

9. Thirty Bees

URL: http://thirtybees.com

Unfortunately PrestaShop team has ended support for 1.6 version with the end of June 30th 2019 (and here you can read more about it). That’s because they want you to go with 1.7 version which is the newest one and is updated frequently. But it doesn’t mean 1.6 version was bad. Just the opposite – for many people this version was just doing it’s job right.

So what is “thirty bees”? It’s a project which has been launched by well known people from developers community (to be more specific – from PrestaShop’s forum mostly). They used PrestaShop 1.6 as core of their e-commerce system and had improved many features, especially in performance aspects. Thirty Bees is also releasing modules which were missing in PrestaShop official standard modulebase.

It’s definitely worth checking for those who like PrestaShop 1.6 with its features and interface more than 1.7.

10. PrestaShop profiler

This is a beast feature which may seem to be “hidden” for most PrestaShop users. It is built in PrestaShop core. It shows you loading time of specific elements (like hooks, modules, SQL queries) so you are able to check what is loading fast but more important – what is loading slow. To enable it open the file config/defines.inc.php first. You must set _PS_MODE_DEV_ and _PS_DEBUG_PROFILING_ to true.

Remember that enabling this feature will show a big report visible to everyone visiting your store! It should be done in test/development environment.

Open any FrontOffice or BackOffice page and scroll down to the bottom of your browser. You’ll see the performance tables:

As you can see it could be much faster. You can check details for SQL queries and their locations:

And you can see hooks execution time:

From above example we can deduce that hookproductfooter is the main reason and it comes from module crossselling which is executing too complex query. What can you do? The most simple way is to disable this module. But if you need to use it – try to change its code so it won’t be asking your database for results. Instead write a code which will read the data from prepared file.

After little rework you can get result like this:

Final words

As you can see there is many tools which may help you dealing with different PrestaShop things. If you know something useful which was not included – let me know in comments.

Thanks for reading!

Leave a comment

Your email address will not be published.

Be the first to post a comment!

Leave a comment

Your email address will not be published.