Custom Hooks in Prestashop 1.7

Custom Hooks in Prestashop 1.7

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.

You can change modules positions and place them into various hooks using just one file — theme.yml.

It’s really easy to create your own hook and place modules into it.

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

Custom Hooks in Prestashop 1.7

Example:

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.

If you need any help with Prestashop Development, just contact us.



15 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:

  5. Don’t work… And it’s easier in the backoffice with Transplant a module. No need to touch code. Cheers!

  6. Hi Lena, I trying to use your example but it’s not working. Maybe I didn’t get the second part. It’s a little bit confuse. After add the hook in theme.yml … I inserted this in layout-both-columns.tpl:

    {block name=’header’}
    {include file=’_partials/header.tpl’}
    {/block}


    {if $page.page_name == ‘index’}
    {hook h=’displaySlider’}
    {/if}

    {block name=’notifications’}
    {include file=’_partials/notifications.tpl’}
    {/block}

    Is that right?

    Thanks.

  7. Hi, Adriano, in case changes were not applied, try to switch to another theme in admin panel, then switch back to yours.

  8. Hi, when adding a hook on the new version of prestashop 1.7 i get this error:

    Fatal error: Uncaught exception ‘Symfony\Component\Yaml\Exception\ParseException’ with message ‘A YAML file cannot contain tabs as indentation at line

    Did you experience this in the new prestashop version (1.7.1.2 )

    Thanks,
    Daniel

  9. Hi Daniel, yes custom hook works fine in the new prestashop version (1.7.1.2 ). Error message you’ve got means that you have syntax mistake. Be sure that you don’t use tab, only space allowed as the indentation in YAML files.

  10. Hi Lena ! Hi everybody !

    I am really stuck with the process.
    For the first step :

    On the theme.yml file I have this :
    displaySlider:
    – ps_imageslider
    displayFooterBefore:

    I don’t know where to put the following informations so I didn’t use them as it seems optional:
    custom_hooks:
    name: displaySlider
    title: displaySlider
    description: Display Image Slider module in a separate hook

    There is no custom hook block in my theme.yml file.

    For the second Step:
    I put this in the layout both column file:

    displaySlider:
    – ps_imageslider
    {if $page.page_name == ‘index’}
    {hook h=’displaySlider’}
    {/if}

    The only thing that change on my website is that now I have a text saying : displaySlider: ” – ps_imageslider” between the header and the orifginal prestashop slider.

    I don’t know what to do.

    There is nothing new into the position section in the back-office and there is no new table named ps_imageslider in the database.

    Can somebody help please ? Thank you

Post a new comment

top