Custom Hooks in Prestashop 1.7

December 15, 2016 / Posted in Prestashop, Prestashop 1.7, Tips&Tricks by Lena Tsybulenko
Custom Hooks in Prestashop 1.7
Download PDF

Here is a small tip on how to use hooks in Prestashop 1.7. In comparison with Prestashop 1.6 version, I can say that 1.7 is a sweet candy. Theme development process is much easier and faster. It is rather easy to change modules positions and place them into various hooks using just one file — theme.yml. It’s easy to create your own hook and place modules into it.

Let’s take a look at example and add a full width slider in a default theme layout.

Custom Hooks in Prestashop 1.7

Example:

1) Go to theme.yml file and find block “hooks”:

Custom Hooks in Prestashop 1.7

In order to add your own hook, just add the following strings:

You can also add a description to a new hook in the “custom hooks” block:

We have just declared a hook and now we are able to call it in any template.

2) In order to add full width slider in a default theme, please navigate theme/templates/layouts/layout-both-columns.tpl file and place previously created hook between <header> and <section id=”wrapper”> tags. And we need to add the following condition to display a slider only on a homepage:

That’s it.

The result is here.



5 comments

  1. I try to create custom hook like your example but with no success. I make all the changes but when i go to positions page on backend and try to change module slider position to my new position i can’t because there is no “displaySlider” position.

  2. Haralake,

    Haralake, you don’t need to change module position in backoffice, because it is already in created hook. The advice to make all things work, try to switch theme to default theme in backoffice and then back to yours – that will lead slider will appear in new position.

  3. Hello,

    Thank you for this tuto, i’m also looking for custom height image slider, do you where i could find it ?

  4. Jimmy,
    You can set slider height in css styles.
    Find imageslider.scss file in your_theme/_dev/css/components folder and set height to any you need:

Post a new comment