Ou et comment modifier $HOOK_TOP

[Hyptnos]

Bonjour

je suis entrain de mettre en place un design pour une boutique en ligne, seulement le header (hook_top) s'intègre assez mal (trop haut et différente chose inutile)
j'arrive pas a trouver ou se trouve le contenu de cette variable ni ou et comment modifier un peu la disposition de tout cela

merci par avance
Cordialement

[SotEW]

Le HOOK_TOP n'est pas modifiable en soit, il ne correspond à aucun fichier. il s'agit en fait d'un "emplacement" où vont se placer différents éléments qui sont inscrit à ce HOOK.

Ainsi, pour supprimer des éléments, il te faudra les désinstaller dans le backoffice (onglet "Modules")

Et pour ceux que tu veux garder mais déplacer, il va malheureusement falloir modifier les fichier .tpl dans /modules/lemoduleàmodifier/ ou les lignes CSS correspondantes dans /themes/ton_theme/global.css

[Hyptnos]

Ok merci

mais par exemple dans le cas ou le 'bienvenu : connecter vous' ou encore les lien "votre compte" et "votre panier" avec le montant total d'achat
si je ne veux pas l'avoir dans le hooktop mais ailleur ou je l'aurais désirer pour une meilleur intégration
comment faire ?

Car par exemple actuellement j'ai repris dans module/blockuserinfo/blockuserinfo.tpl
les ligne qui m'intéressait pour les inclure directement dans le header.tpl de mon theme sa marche bien sauf qu'il me le met en anglais malgré que la langue soit forcé en francais

En gros je ne veux pas forcement supprimer les module présent dans HookTop mais plutot les décomposés séparement pour une intégration par ci par la

merci d'avance

[Fistou69]

Bonjour Hyptnos,

J'ai le même problème que toi je voudrais pouvoir positionner ces différents éléments à des endroit bien précis mais comment ?
J'ai essayer de modifier le css mais sans grand résultat.

Si quelqu'un pouvait faire un exemple sous forme de tuto, je pense que cela serait utile pour pas mal de monde ;-)

Je joint une capture pour visualiser mon besoin.

ATTENTION: il y a un problème avec les pièces jointes (elles sont représentées en grandeur réelle).

Merci par avance pour votre aide.

Salutations.

[Hyptnos]

Bas j'ai en thérorie réglé le probleme (en partie)
je m'explique
par exemple je voulais y mettre "bonjour, identifiez vous" juste au dessu de mon menu
donc j'ai repris ce bout de code la

       {l s='Welcome'},
       {if $logged}
{$customerName} ({l s='Log me out' })
       {else}
{l s='Log in'}
       {/if}

que j'ai mis dans un nouveau div que j'ai créer a l'endroit que ej voulais et mis le css qui va bien avec
ensuite petit passage dans backoffice pour y faire la traduction et c'est niquel

Me reste a faire la meme chose au différent élement que je desire mais le souci reste comment exclure (sans toucher au code) certain element de $HOOK_TOP
pas trouver dans backoffice :s

car finalement en faisant comme ca j'aurais des doublons (dans le header et dans mon design vu que je fais une duplication de code dans mont template d'un bout de code existant dans $HOOK_TOP)

Cordialement

[SotEW]

dans ce cas là, Hyptnos, c'est typiquement dans le CSS que tu dois faire les modifications.

Ne rajoute pas le contenu des .tpl dans le header, tu brises le liens entre les variables de smarty est les traductions correspondantes (d'où l'anglais (langue par défaut)).

Je ne suis pas un expert en CSS, loin de là. mais à grand coup de float, il est possible de réorganiser le tout.

Pour ton cas, fistou, des float: right avec un width assez grand permettrais de faire passer à la ligne, en alignant à droite. Théoriquement.


et je veux retrouver mon avataaaaaaaaar :vampire:


EDIT : tu as répondu trop vite, Hyptnos ^^


Alors, tu dois donc supprimer le module blockuserinfo que tu trouvera dans le backoffice, onglet 'modules"

Par contre, tu perdras aussi le lien vers le compte et le résumé du panier. Donc à moins de le déplacer en l'incluant manuellement dans le header, il faut juste que tu supprimes les lignes 2 à 10 de /modules/blockuserinfo/blockuserinfo.tpl

[Fistou69]

Merci SotEW et Hyptnos,

Je vais tester tout ça de suite.

Bonne journée.

[aDy]

Merci de ta réponse SotEW , car ce sujet m'intéresse également

Quand tu dis :

dans ce cas là, Hyptnos, c'est typiquement dans le CSS que tu dois faire les modifications.

Je ne comprends pas, si on fais que des modifs au niveau du css je comprends que cela suffis pour agencer nos modules (devises, langue, recherche, les liens header_links, et enfin le header_user) DANS le div header, mais si je souhaite que ces blocs s'affichent ailleurs ?

Dans mon cas je souhaiterais afficher le bloc devises, langues et le header_links (les liens : contact, plan du site, favoris) dans un div différent (tout en haut de ma page). Un simple changement de design quoi

Cela est possible à faire proprement, sans briser quoi que ce soit (liens entre les variables de smarty ou traductions correspondantes) ?

Merci beaucoup !

[SotEW]

En fait, il y a un problème de vocabulaire ici :

aDy, tu désignes le Header comme tout ce qu'il y a en haut de ton site, à coté du logo. Cette partie s'appelle pour prestashop le 'Top'. les modules sont donc associées au Hook TOP.

Le div Header, quand à lui, représente tout ce qu'il y a comme informations complémentaire sur la page, sans rien afficher (comme les META descriptions).

Ce que tu cherches à faire, c'est inclure quelque chose juste après le header, et avant le logo.

Et bien : c'est impossible à faire nativement. il faut rajouter le code manuellement dans header.tpl (fichier qui inclus dans la page web non seulement le vrai header, mais aussi le hook top, et la colonne de droite ! )

C'est un point sensible, largement discuté, et je pense en ce moment à une solution qui fonctionnerai bien : supprimer le logo du header.tpl, créer un 'module de logo' à la place, inclus dans le top. Il suffit ensuite de mettre les éléments dans le top avant le logo pour qu'ils soient tout en haut du site.

[Myriss]

pas bête du tout !

[SotEW]

Je vais sortir le module prochainement, affaire à suivre >> ICI <<

[aDy]

En fait, il y a un problème de vocabulaire ici :

aDy, tu désignes le Header comme tout ce qu'il y a en haut de ton site, à coté du logo. Cette partie s'appelle pour prestashop le 'Top'. les modules sont donc associées au Hook TOP.

Le div Header, quand à lui, représente tout ce qu'il y a comme informations complémentaire sur la page, sans rien afficher (comme les META descriptions).

Ce que tu cherches à faire, c'est inclure quelque chose juste après le header, et avant le logo.

Et bien : c'est impossible à faire nativement. il faut rajouter le code manuellement dans header.tpl (fichier qui inclus dans la page web non seulement le vrai header, mais aussi le hook top, et la colonne de droite ! )

C'est un point sensible, largement discuté, et je pense en ce moment à une solution qui fonctionnerai bien : supprimer le logo du header.tpl, créer un 'module de logo' à la place, inclus dans le top. Il suffit ensuite de mettre les éléments dans le top avant le logo pour qu'ils soient tout en haut du site.

Merci de ta réponse SotEW

Tu as raison de bien souligner le fait que il ne faut pas mélanger les termes des div (div# header) et termes propres à prestashop (HOOK_TOP).
Effectivement je parlais du HOOK_Top "englobé" dans le div# header

J'attends avec impatience ton nouveau module afin de tester cela ! Merci

[SotEW]

et bien, j'attends que ma situation actuelle se stabilise un peu, et je me lance ^^

ça ne devrais pas être trop long

[MrMerry]

Bonjour à toutes et à tous,

Je sais que la question a été déjà abordé, j'ai donc fouillé mais je n'ai pas trouvé les réponses qui me conviennent. Pourtant c'est tout simple je pense. Je suis encore débutant sur Prestashop et je ne fais que modifier global.css depuis le début. Ca se passe pas trop mal jusque là. Sauf que je commence à atteindre les limites de cette méthode.

Mon site : www.monster-shop.eu

Dans mon header, j'ai bidouillé les logos des fonctions contact, site map et ajouter aux favoris. Se trouvent donc en background des images. Cependant le problème c'est que le texte "contact, site map ou favoris" apparait toujours et je ne sais pas où aller pour modifier cela.

Ras le bol. je ne sais plus quoi faire...

[osef91]

Bonjour, 

 

Je suis entrain de développer un module prestashop et je souhaiterai rajouter du code HTML dans le HookTop. 

 

J'arrive à ajouter du JS ou du CSS grâce aux fonctions addJS et addCSS:

 

public function hookDisplayTop($params){

    Tools::addJS('https://code.jquery.com/ui/1.11.4/jquery-ui.js' 'all');

 

}

 

Mais comment fait-on pour insérer une div dans le dans le HookTop par exemple? 

 

Merci d'avance pour votre aide! 

Edited June 30, 2016 by osef91 (see edit history)

[Matt75]

Bonjour, 

 

Je suis entrain de développer un module prestashop et je souhaiterai rajouter du code HTML dans le HookTop. 

 

J'arrive à ajouter du JS ou du CSS grâce aux fonctions addJS et addCSS:

 

public function hookDisplayTop($params){

    Tools::addJS('https://code.jquery.com/ui/1.11.4/jquery-ui.js' 'all');

 

}

 

Mais comment fait-on pour insérer une div dans le dans le HookTop par exemple? 

 

Merci d'avance pour votre aide!

Salut,

 

Comme ceci :

public function hookDisplayTop($params) {
    return $this->display(__FILE__, 'hookDisplayTop.tpl', $this->getCacheId()); //Toujours laisser cette ligne en dernier
}

Ensuite tu créer un fichier hookDisplayTop.tpl qui contient ta div que tu mets au même endroit que le fichier PHP de ton module.

 

Cordialement

Edited June 30, 2016 by Matt75 (see edit history)

[osef91]

@ PrestaShop Enthusiast   Merci beaucoup!