Creating Custom Hooks in PrestaShop 1.7

Creating Custom Hooks in PrestaShop 1.7

Hooks in PrestaShop is the most important component for inserting modules into your theme. In this article, I will try to talk about all the pitfalls that can be encountered while using this important and interesting functionality.

Basic hooks in PrestaShop

Let’s start with the basic names of hooks that are used in PrestaShop.

Hook’s name Hook’s description
displayHeader For inserting modules in the header
displayTop For inserting modules between the header and the content
displayBanner For inserting banners or images before the cap
displayHome For inserting modules on the main page
displayLeftColumn For inserting modules in the left column
displayRightColumn For inserting modules in the right column
displayFooter For inserting modules into the footer
displayNotFound For inserting modules on the error page

You can find a more detailed list of all hooks in the official PrestaShop documentation.

Creating custom hooks in PrestaShop

Now let’s take a look at creating your own hooks in a PrestaShop theme. To do it, we go to the theme’s directory, for example, /themes/classic/, and select the necessary template in the templates/ folder. I chose the site’s header template that is located at /themes/classic/templates/_partials/header.tpl. With the help of the {hook h = ‘MyCustomNameHooks’} construction we will add our hook to the header of our template: {hook h = ‘MySocialListHeader’}.

For this purpose, I prepared a childBelvg child theme for the classic theme. The structure is the same, however, we will override our /themes/childBelvg/templates/_partials/header.tpl header file. We will also add a social network module to our file with the help of bootstrap. I added another block and thus divided our header into 3 columns.

image6

After we added our hook to the header, we need to make it display on the admin panel. To do this, we’ll go to the configuration file of our /themes/childBelvg/config/theme.yml theme and add the following construction:

global_settings:

hooks:
custom_hooks:
– name: displayMySocialListHeader
title: displayMySocialListHeader
description: Add social block in the header
modules_to_hook:
displayMySocialListHeader:
– ps_socialfollow

Now we will do this in our code editor (IDE):

image8

The complete configuration of the /themes/childBelvg/config/theme.yml file will look like this:

parent: classic
name: childBelvg
display_name: My child Theme Belvg
version: 1.0.0

assets:
 use_parent_assets: true

global_settings:

 hooks:
   custom_hooks:
     – name: displayMySocialListHeader
       title: displayMySocialListHeader
       description: Add social block in the header
   modules_to_hook:
     displayMySocialListHeader:
       – ps_socialfollow

 image_types:
   cart_default:
     width: 125
     height: 125
     scope: [products]
   small_default:
     width: 98
     height: 98
     scope: [products, categories, manufacturers, suppliers]
   medium_default:
     width: 452
     height: 452
     scope: [products, manufacturers, suppliers]
   home_default:
     width: 250
     height: 250
     scope: [products]
   large_default:
     width: 800
     height: 800
     scope: [products, manufacturers, suppliers]
   category_default:
     width: 141
     height: 180
     scope: [categories]

theme_settings:
 default_layout: layout-full-width

Now let’s see if we have our hook on the admin panel. Go to the hook management at Admin panel → Design → Positions → Transplant a module.

image2

Now we can go to the store frontend and see the changes:

image5

Done. Hope this was useful, please leave your comments in the comment section if something remained unclear.



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *