Modifier code des "Hooks"

[cyclone200]

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.

[Eprz]

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.

 

[Steph13]

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'} ?

[coeos.pro]

hook  = crochet

un hook n'est pas un fichier, ce sont les modules qui s'accrochent sur ce hook.

[Steph13]

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

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

Mon  {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

Edited July 8, 2021 by Steph13 (see edit history)

[coeos.pro]

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

[Steph13]

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 ?

[coeos.pro]

tu le télécharges et ensuite depuis le back office tu le charges : https://www.coeos.pro/fr/content/7-installer-desinstaller-supprimer-un-module-prestashop

[Steph13]

D'accord merci !

Si quelqu'un d'autre a une solution je prends ^^

Edited July 9, 2021 by Steph13 (see edit history)

[Alexandre Carette]

Salut,

pour régler ton pb il faut que dans le fichier d'installation du module tu declares ton propre hook,  tu pourras ainsi l'injecter dans ton tpl via {hook h='tonHook'}

cdt

[Steph13]

Oui voilà je pense que c'est une manip dans le genre !

Par contre ça m'a l'air au dessus de mon niveau.

Je vais essayer de faire des recherches dans ce sens si il existe un tuto.

Merci

[coeos.pro]

si tu veux vraiment de l'aide je te conseil de donner un exemple concret, de dire "voila le point de départ et moi j'aimerai..."

[Steph13]

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

 

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

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

 

[Steph13]

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...

[Steph13]

Cela dit pour l'avenir si vous aviez un tuto qui expliquer comment faire ce que je souhaite mais de manière propre et pro je prends volontiers !

[cryoth]

Bonjour,

Si vous cherchez une façon de faire votre hook custom, voici la doc officielle qui explique comment faire un hook dit "custom" depuis un module :

https://devdocs.prestashop.com/1.7/modules/concepts/hooks/#going-further-creating-your-own-hook

[Steph13]

10 minutes ago, cryoth said:

Bonjour,

Si vous cherchez une façon de faire votre hook custom, voici la doc officielle qui explique comment faire un hook dit "custom" depuis un module :

https://devdocs.prestashop.com/1.7/modules/concepts/hooks/#going-further-creating-your-own-hook

SU-PER !!!! Merci

Je vais m'y pencher dès que je le peux !