How can we add new hooks on frontpage next to "displayHome" ?

[costino80]

Hello,

I'm trying to modify the layout of the frontpage and have for example two columns (hooks) inside the main container where I could attach modules.

On the footer or the header it's easy because there are .tpl files (footer.tpl, product.tpl,...) I can edit and change the layout with bootstrap. But for the main container (where the carrousel and the products are), it's different. I located the "displayHome" hook in a controller and I don't know how to edit this...😬

 

I've spend hours trying to add new hooks on the homepage organized in multiple columns. The "displayHome" hook would be one of them.

 

Has anybody an idea on how to add hooks on the homepage and change the layout easily (with bootstrap for example) ? 😀

 

Many thanks in advance for your help

 

[costino80]

Thank you.

Good idea !

That might work 😀

Can you call other modules inside a module ?

Do you have a quick demo code ?

Is there documentation for that ?

Thanks

[El Patron]

@ndiaga slightly off topic but one dev to another, you might like to incorporate our 'hook anywhere' module logic, you can hook a module to one or more existing hooks with type ahead.  you can find example in this free module.  as developers we cannot guess where to hook something, so this allows user to hook to one or more defined hooks.  

happy deving

[costino80]

Hello,

Thank you all for your answers and your help.

What I did in the end was to create custom Hooks on the homepage before displayHome and stylize those hooks / positions and not displayHome.

displayHome is empty and all my modules on the homepage are in these custom Hooks.

I created a child theme for that.

Example for one hook :

• In my theme.yml

hooks:
    custom_hooks:
      - name: displaySlider
        title: displaySlider
        description: Display slider above displayHome Hook
    modules_to_hook:
      displaySlider:
        - ps_imageslider

• In /templates/layouts/layout-both-columns.tpl, I added the hook where I wanted to appear :

{if $page.page_name == 'index'} 
      <section id="displaySlider">
       {hook h='displaySlider'}
       </section>
       {/if}

• In my custom.css file I stylized the id #displaySlider
• In /assets/js/theme.js I modified the code to hide the new hook when the mobile menu is opened

key: "toggleMobileMenu",
              value: function () {
                l()("#header").toggleClass("is-open"),
                  l()("#mobile_top_menu_wrapper").is(":visible")
                    ? l()(
                        "#notifications, #wrapper, #footer, #displaySlider"
                      ).hide()
                    : l()(
                        "#notifications, #wrapper, #footer, #displaySlider"
                      ).show();
              },

 

This is just for one custom Hook but you can be much more creative in the positions :

{if $page.page_name == 'index'}
       <section id="customTop">
       <div id="displayCustomTop" class="container">
       {hook h='displayCustomTop'}
       </div>
       </section>
       {/if}
       {if $page.page_name == 'index'}
      <section id="customHome">
       <div class="container">
       <div class="row">
       <div id="displayCustomLeft1" class="col-xs-12 col-lg-6 col-xl-6">
       {hook h='displayCustomLeft1'}
       </div>
        <div id="displayCustomRight1" class="col-xs-12 col-lg-6 col-xl-6">
       {hook h='displayCustomRight1'}
       </div>
       </div>
       </div>
       </section>
       {/if}

I hope it makes sense

Good luck everybody !

[Mediacom87]

Hi,

don't forget to read this documentation : https://devdocs.prestashop.com/1.7/modules/concepts/hooks/#using-hooks

[costino80]

On 6/16/2022 at 4:55 PM, Mediacom87 said:

Hi,

don't forget to read this documentation : https://devdocs.prestashop.com/1.7/modules/concepts/hooks/#using-hooks

Thanks. Something wrong with my method ?