Jump to content

Modifier code des "Hooks"


Recommended Posts

Bonsoir à tous,

Je rencontre un léger problème dans l'édition d'un thème Prestashop.

 

J'ai par exemple ceci dans mon header.tpl :

	<div id="page" class="clearfix">
			<!-- Header -->						
			{$HOOK_TOP}													

J'aimerais savoir ou modifier le code qui sera inséré par {$HOOK_TOP} ?

 

Auriez-vous une idée ?

 

 

 

Merci de votre aide.

 

Bien cordialement,

K.D.

Link to comment
Share on other sites

Bonjour @cyclone200,

 

Pour trouver les modules greffés sur ce hook, rendez-vous dans votre back-office puis dans Modules -> Positions.

Cherchez le hook "displayTop" et regardez les modules qui y sont greffés.

 

À partir de là, vous pourrez savoir quel module vous souhaitez modifier.

 

En espérant vous avoir aidé.

 

Cordialement,

Elia PEREZ.

 

Link to comment
Share on other sites

  • 5 years later...

Bonjour, je remonte le sujet.

Il y a-t-il moyen de modifier les hook par le code ?

Car là ça modifie juste l'emplacement des hooks.

Dans les fichiers .tpl les hooks ressemblent à ça :  {hook h='displayTop'}

Il n'y a pas un fichier qui contiendrait le détail de ce {hook h='displayTop'} ?

Link to comment
Share on other sites

Oui je l'avais compris au fil de mes lectures.

Pour détailler un peu plus ce que je souhaite faire :

M
on  {hook h='displayTop'} dans le template est dans cette div : <div class="col-md-12 col-sm-12 position-static">

<div class="col-md-12 col-sm-12 position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
</div>

Or, le {hook h='displayTop'} sur mon site (via Apparences => Positions) est composé de

- Menu principal  - v2.1.1 (Ajoute un menu horizontal en haut de votre site e-commerce)

- Barre de recherche  - v2.0.1 (Ajoute un bloc avec un champ de recherche rapide)

Donc en faisant F12 le code HTML rendu est, si je ne me trompe pas (voir image jointe) :

En rouge c'est bien ce qui apparait dans le .tpl : "col-md-12 col-sm-12 position-static"

En Jaune c'est bien mon module menu principal

En Vert c'est bien mon module bloc de recherche

Vu le code du .tpl, ces 2 modules s'affichent dans la COL 12, ils se partagent donc et espace. Quand mon menu comporte trop de catégories, la barre search passe à la ligne tout seul...

J'aurais aimé donc les placer sur 2 col ayant chacune sa largeur (peut-être genre COL 9 pour le menu et COL 3 pour la recherche) afin que ce soit les catégories du menu qui aillent à la ligne sans déranger ma barre de recherche.

Quel fichier dois-je donc toucher pour faire cette manip ?

Merci

hooktop.png

Edited by Steph13 (see edit history)
Link to comment
Share on other sites

1 hour ago, coeos.pro said:

essaye mon module gratuit https://www.coeos.pro/fr/modules-prestashop/116-quel-est-ce-module-quel-est-ce-hook.html il te donnera peut être les informations que tu cherches

Je ne sais pas s'il sera utile pour ce cas là en tout cas il me semble peut-être être utile pour un autre de mes problèmes ici :

 

Comment ça s'installe ? Je télécharge et je mets le dossiers sur le ftp dans modules ?

Link to comment
Share on other sites

J'ai développé ce que je voulais faire au dessus avec des captures d'écrans, je ne sais pas si c'est suffisant ?

Je vais essayer de mieux expliquer :

Sur mon site j'ai le logo que j'ai centré (dans une COL 12)

En dessous j'ai encore une COL 12 qui comprends mon hook DisplayTop, qui lui même comprends 2 modules :

- Menu principal  - v2.1.1 (Ajoute un menu horizontal en haut de votre site e-commerce)

- Barre de recherche  - v2.0.1 (Ajoute un bloc avec un champ de recherche rapide)

{block name='header_top'}
  <div class="header-top">
    <div class="container">
       <div class="row">
        <div class="col-md-12 hidden-sm-down" id="_desktop_logo">
            {if $page.page_name == 'index'}
              <h1>
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
              </h1>
            {else}
                <a href="{$urls.base_url}">
                  <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
                </a>
            {/if}
        </div>
        <div class="col-md-12 col-sm-12 position-static">
          {hook h='displayTop'}
          <div class="clearfix"></div>
        </div>
      </div>

 

Quand je n'ai que 2 ou 3 catégories menus à afficher, j'ai bien mon menu qui est à gauche et ma barre de recherche à droite (sur la même ligne, COL 12) :cas1.png.63cba1de4c19d880e7435f30ff63b8ca.png

 

Mais dès que je greffe des catégories ou des pages au menu, j'ai ma barre de recherche qui passe à la ligne :

cas2.png.0fa13dc3f155a3bfc7888fc93d46ef3c.png

Du coup c'est pas très esthétique. J'aurais aimé que ce soient mes catégories qui passent à la ligne, laissant ma barre de recherche à sa place.

Le problème avec  {hook h='displayTop'} c'est qu'il englobe lui même les 2 modules dans une <div class="col-md-12 col-sm-12 position-static">

J'aimerais donc séparer et faire un truc du genre :

 <div class="col-md-10 col-sm-12 position-static">{hook h='monMenu'}</div>

 <div class="col-md-2 col-sm-12 position-static">{hook h='maBarreDeRecherche'}</div>

Séparer mes 2 modules afin qu'ils ne soient pas groupés dans le COL 12 mais dissociés chacun dans son COL (9 ou 10 pour mon menu et 2 ou 3 pour ma barre de recherche) :

cas3.png.9b19332c6a9a6d9c472e3bbd1bee2e5f.png

 

Link to comment
Share on other sites

A moins que ce soit possible avec un bidouille plus simple : via l'outil dev (F12) j'ai essayé d'attribuer un width:200px à l'élément (id="_desktop_top_menu") qui comporte mes catégories/menu et ils passent seuls à la ligne, comme je le souhaite sans faire bouger ma barre de recherche.

J'ai essayé avec un width en % c'est le même résultat.

En adaptant ensuite cette valeur (px ou %) avec des médias queries en fonction de la taille de l'appareil...

Surement  plus simple et plus safe pour une ptite bidouilleuse du dimanche comme moi...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...