Prestashop: add custom hook to insert modules in different positions

Before we start: English is not my first language so it is likely that, in this post, there will be some mistakes. Please let me know of them so that I can correct!

In these days I’m setting up a new Prestashop site (to tell the truth, it is the first!) and I’ve already had some problems.

I was using default-bootstrap as theme and I couldn’t  move the slide under the top menu (that I’ve removed) to the main column in order to have the categories on the left sidebar and the slide right beside them. After searching for few minutes I discovered the problem was related to  a missing hook in the position that I wanted.

A hook is a “placeholder” for modules that Prestashop uses. When in a template a hook is called, all the modules hooked to it are loaded.

Not every module can be connected to a hook: they need to have a function saying they are “compatible“.

What we want to do is create a hook, put it in right position (editing the template) and assign the needed module to it.

Let’s see how we can achieve this!

First of all, we need to create an entry in the database for our hook. We can do it using a simple module called Hook Manager downloadable from Prestashop Forum. (You can also do the same thing manually, just google it and you’ll find what to add in the db).

In Hook Manager, set a name for the new hook and show it in Positions (then save, of course):

As you can see, my hook is displayTopCenter.

Now we need to create a smarty variable in order to call the hook from the theme. To do this we need to modify the controller of the page(s) where we want to display the hook, in my case IndexController (for the list of controllers see the files in /controllers/front but DO NOT EDIT them).

Create a new file in /override/controllers/front with the exact same name (IndexController.php) and write this code:

Replace HOOK_TOP_CENTER and displayTopCenter according to your hook. If you are editing another controller change the class name (and the extends) also. After that go in /cache and remove (or better rename) class_index.php.

Now let’s edit the template: the file we need to modify is index.tpl (if you’re editing the home page) in themes/name_of_the_theme.

Add {$HOOK_TOP_CENTER} (don’t forget “$”) where you want the modules to be displayed and save.

The modules we want to use know nothing about the existence of our new hook, we have to say them they’re compatible and how they should behave.

First of all, find the php file of the module (in modules/name_of_the_module) and search for “public function hook”: all the results are one after another, after the last one add something like this:

Through this lines we’re saying to the module that when it is hooked to displayTopCenter it has to behave exactly as when it is connected to displayTopColumn.

You should edit displayTopColumn according to your needs: for example, if you have the module hooked in displayHome and you want it to display the exact same thing when transplanted in your new hook, you should replace displayTopColumn with displayHome.
Save the changes and… we’ve finished!

Now go in Positions, transplant the module e select the new hook. Visit your site and, if all went well, you should see something new!