[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"theme-db":3,"$fCk3hFe2BFsSA7K0C-uYBmfzGkzftYyMOTThGRGQY_B0":22,"$fKnz2vuX4bZz1LbUTiuFsvSZ3e07l5_5fqNYp4Tzdhi8":60,"megamenu":141,"header-db":197,"$feMx-91802LnZouskr69IN_gogv3pcoInQP3FPuMNWkM":210,"footer-db":224},{"theme":4},{"colors":5,"typography":13,"ui":17,"defaultColorMode":21},{"primary":6,"secondary":7,"background":8,"foreground":9,"muted":10,"headerBg":11,"footerBg":12,"topBarBg":9,"topBarText":11},"#4F46E5","#0D9488","#F9FAFB","#111827","#6B7280","#ffffff","#020617",{"fontFamily":14,"fontUrl":15,"baseFontSize":16},"Inter, system-ui, sans-serif","https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700&display=swap","16px",{"borderRadius":18,"contentWidth":19,"shadow":20},"lg","7xl",true,"light",{"title":23,"slug":24,"metaDescription":25,"category":26,"tags":27,"difficulty":33,"psVersions":34,"content":38,"faq":39,"tldr":55,"readingTime":56,"generatedAt":57,"publishDate":57,"relatedArticles":58,"sourceCategory":59},"Déplacer le bloc recherche PrestaShop dans le menu ou le header","deplacer-bloc-recherche-prestashop-hook-personnalise","Repositionnez la barre de recherche PrestaShop où vous voulez grâce aux hooks personnalisés. Méthode complète avec override, code et bonnes pratiques.","developpement",[28,29,30,31,32],"hook personnalisé","blocksearch","thème PrestaShop","menu horizontal","override module","intermediaire",[35,36,37],"1.6","1.7","8.x","\u003Ch1>Déplacer le bloc recherche PrestaShop dans le menu ou le header\u003C\u002Fh1>\n\u003Cp>Par défaut, PrestaShop affiche la barre de recherche rapide dans la colonne de droite ou en haut du header, selon le thème. Mais dans de nombreux cas, on souhaite la repositionner : l'intégrer directement dans le menu horizontal, la placer dans une zone spécifique du header, ou même la déplacer dans le footer.\u003C\u002Fp>\n\u003Cp>La méthode propre pour y parvenir repose sur la création d'un \u003Cstrong>hook personnalisé\u003C\u002Fstrong> et l'utilisation du système d'override de PrestaShop, sans jamais modifier les fichiers core.\u003C\u002Fp>\n\u003Ch2>Comprendre le mécanisme des hooks de recherche\u003C\u002Fh2>\n\u003Cp>Le module \u003Ccode>blocksearch\u003C\u002Fcode> (PrestaShop 1.6) ou \u003Ccode>ps_searchbar\u003C\u002Fcode> (PrestaShop 1.7+) s'accroche par défaut au hook \u003Ccode>displayTop\u003C\u002Fcode>. Ce hook est appelé dans le header du thème et affiche le formulaire de recherche à un emplacement prédéfini.\u003C\u002Fp>\n\u003Cp>Pour repositionner le bloc, deux approches sont possibles :\u003C\u002Fp>\n\u003Col>\n\u003Cli>**Créer un hook personnalisé** et y greffer le module\u003C\u002Fli>\n\u003Cli>**Dégreffer le module de `displayTop`** et le greffer sur un hook existant mieux positionné\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>La première méthode offre le plus de flexibilité.\u003C\u002Fp>\n\u003Ch2>Méthode 1 : Créer un hook personnalisé (PrestaShop 1.6)\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.6, le module \u003Ccode>blocksearch\u003C\u002Fcode> gère l'affichage via la méthode \u003Ccode>hookTop()\u003C\u002Fcode>. L'idée est de créer un nouveau hook qui réutilise cette même logique.\u003C\u002Fp>\n\u003Ch3>Étape 1 : Créer l'override du module\u003C\u002Fh3>\n\u003Cp>Créez le fichier \u003Ccode>override\u002Fmodules\u002Fblocksearch\u002Fblocksearch.php\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n<?php\n\u002F**\n * Override du module blocksearch\n * Ajout d'un hook personnalisé pour repositionner la recherche\n *\u002F\nclass BlockSearchOverride extends BlockSearch\n{\n    public function install()\n    {\n        return parent::install()\n            && $this->registerHook('displaySearchCustom');\n    }\n\n    \u002F**\n     * Hook personnalisé qui reprend le rendu du hook top\n     *\u002F\n    public function hookDisplaySearchCustom($params)\n    {\n        return $this->hookTop($params);\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\u003Cp>\u003Cstrong>Important :\u003C\u002Fstrong> Après avoir créé cet override, réinitialisez le module depuis le back-office (Modules > Blocksearch > Réinitialiser) afin que PrestaShop enregistre le nouveau hook dans la table \u003Ccode>ps_hook\u003C\u002Fcode>.\u003C\u002Fp>\u003C\u002Fblockquote>\n\u003Ch3>Étape 2 : Dégreffer le hook d'origine\u003C\u002Fh3>\n\u003Cp>Dans le back-office, allez dans \u003Cstrong>Modules > Positions\u003C\u002Fstrong> et supprimez la greffe de \u003Ccode>blocksearch\u003C\u002Fcode> sur le hook \u003Ccode>displayTop\u003C\u002Fcode>. Cela évite d'afficher la recherche en double.\u003C\u002Fp>\n\u003Ch3>Étape 3 : Appeler le hook dans le template\u003C\u002Fh3>\n\u003Cp>Placez l'appel du hook à l'endroit souhaité dans votre thème :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{hook h='displaySearchCustom'}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Par exemple, pour intégrer la recherche directement dans le menu horizontal, éditez le fichier \u003Ccode>themes\u002Fvotre_theme\u002Fmodules\u002Fblocktopmenu\u002Fblocktopmenu.tpl\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{if $MENU != ''}\n    <div id=\"block_top_menu\" class=\"sf-contener clearfix col-lg-12\">\n        <ul class=\"sf-menu clearfix menu-content\">\n            {$MENU}\n            <li class=\"sf-search\" style=\"float: right;\">\n                {hook h='displaySearchCustom'}\n            <\u002Fli>\n        <\u002Ful>\n    <\u002Fdiv>\n{\u002Fif}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Méthode 2 : Approche moderne avec PrestaShop 1.7 \u002F 8.x\u003C\u002Fh2>\n\u003Cp>Sur PrestaShop 1.7 et 8.x, le module de recherche s'appelle \u003Ccode>ps_searchbar\u003C\u002Fcode>. L'architecture a évolué et la méthode recommandée diffère.\u003C\u002Fp>\n\u003Ch3>Option A : Utiliser la greffe de module en back-office\u003C\u002Fh3>\n\u003Cp>PrestaShop 1.7+ propose nativement plus de hooks dans le header. Vous pouvez simplement :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Aller dans **Apparence > Positions des modules**\u003C\u002Fli>\n\u003Cli>Dégreffer `ps_searchbar` de son hook actuel\u003C\u002Fli>\n\u003Cli>Le greffer sur `displayNav` ou `displayNavFullWidth` selon votre besoin\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Option B : Override propre avec un hook personnalisé\u003C\u002Fh3>\n\u003Cp>Créez \u003Ccode>override\u002Fmodules\u002Fps_searchbar\u002Fps_searchbar.php\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">\n<?php\nif (!defined('_PS_VERSION_')) {\n    exit;\n}\n\nclass Ps_SearchBarOverride extends Ps_SearchBar\n{\n    public function install()\n    {\n        return parent::install()\n            && $this->registerHook('displaySearchCustom');\n    }\n\n    public function hookDisplaySearchCustom($params)\n    {\n        return $this->hookDisplayTop($params);\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Puis dans votre thème (template Twig sur PS 8.x) :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-twig\">\n{# templates\u002Flayouts\u002Flayout-full-width.tpl ou votre layout #}\n{{ hook('displaySearchCustom') }}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Option C : Widget (méthode recommandée sur 1.7+)\u003C\u002Fh3>\n\u003Cp>Le module \u003Ccode>ps_searchbar\u003C\u002Fcode> implémente l'interface \u003Ccode>WidgetInterface\u003C\u002Fcode>. Vous pouvez donc l'appeler directement n'importe où sans créer de hook :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-smarty\">\n{widget name='ps_searchbar'}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Ou en Twig :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-twig\">\n{{ widget('ps_searchbar') }}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>C'est la méthode la plus simple et la plus propre sur les versions récentes de PrestaShop.\u003C\u002Fp>\n\u003Ch2>Gérer le responsive avec Bootstrap\u003C\u002Fh2>\n\u003Cp>PrestaShop 1.6 utilise Bootstrap 3, tandis que les versions 1.7+ utilisent Bootstrap 4. Quand vous repositionnez la barre de recherche, pensez à l'encapsuler dans la grille Bootstrap pour garantir un affichage responsive correct :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\">\n<!-- Bootstrap 3 (PS 1.6) -->\n<div class=\"col-lg-4 col-md-6 col-sm-12\">\n    {hook h='displaySearchCustom'}\n<\u002Fdiv>\n\n<!-- Bootstrap 4 (PS 1.7+) -->\n<div class=\"col-lg-4 col-md-6 col-12\">\n    {hook h='displaySearchCustom'}\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Le système de grille Bootstrap divise l'écran en 12 colonnes. Utilisez les classes \u003Ccode>col-*\u003C\u002Fcode> pour définir la largeur de la barre de recherche selon la taille de l'écran :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>`col-lg-4` : occupe 4 colonnes sur grand écran (1\u002F3 de la largeur)\u003C\u002Fli>\n\u003Cli>`col-md-6` : occupe 6 colonnes sur écran moyen (1\u002F2 de la largeur)\u003C\u002Fli>\n\u003Cli>`col-sm-12` \u002F `col-12` : pleine largeur sur mobile\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Styliser la recherche dans sa nouvelle position\u003C\u002Fh2>\n\u003Cp>Après le déplacement, il est fréquent que le CSS d'origine ne s'adapte plus parfaitement. Ajoutez un style ciblé dans votre fichier CSS personnalisé :\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">\n\u002F* Recherche intégrée dans le menu horizontal *\u002F\n#block_top_menu .sf-search {\n    float: right;\n    padding: 5px 0;\n}\n\n#block_top_menu .sf-search input[type=\"text\"] {\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 20px;\n    padding: 6px 15px;\n    background: rgba(255, 255, 255, 0.1);\n    color: #fff;\n    transition: all 0.3s ease;\n    width: 200px;\n}\n\n#block_top_menu .sf-search input[type=\"text\"]:focus {\n    width: 300px;\n    background: rgba(255, 255, 255, 0.2);\n    outline: none;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Bonnes pratiques et pièges à éviter\u003C\u002Fh2>\n\u003Ch3>Ne jamais modifier les fichiers core\u003C\u002Fh3>\n\u003Cp>Modifier directement \u003Ccode>modules\u002Fblocksearch\u002Fblocksearch.php\u003C\u002Fcode> fonctionne, mais toute mise à jour du module écrasera vos modifications. Utilisez systématiquement le dossier \u003Ccode>override\u002F\u003C\u002Fcode> pour pérenniser vos personnalisations.\u003C\u002Fp>\n\u003Ch3>Penser au cache\u003C\u002Fh3>\n\u003Cp>Après toute modification de hook ou d'override :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Supprimez le fichier `app\u002Fcache\u002Fclass_index.php` (PS 1.6) ou `var\u002Fcache\u002F` (PS 1.7+)\u003C\u002Fli>\n\u003Cli>Videz le cache Smarty depuis le back-office\u003C\u002Fli>\n\u003Cli>Testez en navigation privée pour éviter les faux positifs\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Vérifier l'autocomplétion AJAX\u003C\u002Fh3>\n\u003Cp>Le module de recherche PrestaShop utilise des requêtes AJAX pour les suggestions. Après un déplacement, vérifiez que :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Le JavaScript du module est toujours chargé (vérifiez dans l'inspecteur réseau)\u003C\u002Fli>\n\u003Cli>L'élément `#search_query_top` conserve son ID (utilisé par le JS)\u003C\u002Fli>\n\u003Cli>Les suggestions s'affichent correctement dans le nouveau contexte CSS (z-index, position)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Attention au SEO\u003C\u002Fh3>\n\u003Cp>Le formulaire de recherche doit rester accessible. Vérifiez que :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>L'attribut `action` pointe bien vers la page de recherche\u003C\u002Fli>\n\u003Cli>L'input `name=\"s\"` ou `name=\"search_query\"` est présent\u003C\u002Fli>\n\u003Cli>Un label ou un placeholder descriptif est défini pour l'accessibilité\u003C\u002Fli>\n\u003C\u002Ful>",[40,43,46,49,52],{"q":41,"a":42},"Comment déplacer la barre de recherche PrestaShop dans le menu horizontal ?","Créez un hook personnalisé via un override du module blocksearch (PS 1.6) ou ps_searchbar (PS 1.7+), puis appelez ce hook dans le template du menu (blocktopmenu.tpl). Sur PrestaShop 1.7+, vous pouvez aussi utiliser la syntaxe {widget name='ps_searchbar'} directement dans le template souhaité, sans créer de hook.",{"q":44,"a":45},"Faut-il modifier directement le fichier blocksearch.php pour ajouter un hook ?","Non, ne modifiez jamais les fichiers core directement. Créez un fichier d'override dans override\u002Fmodules\u002Fblocksearch\u002Fblocksearch.php. Cela garantit que vos modifications survivront aux mises à jour du module. Après création de l'override, réinitialisez le module depuis le back-office.",{"q":47,"a":48},"Pourquoi la barre de recherche ne s'affiche pas après le déplacement ?","Les causes les plus fréquentes sont : le cache non vidé (supprimez class_index.php et videz le cache Smarty), le module non réinitialisé après ajout du nouveau hook, ou le module encore greffé sur l'ancien hook et non greffé sur le nouveau. Vérifiez aussi dans Modules > Positions que la greffe est bien active.",{"q":50,"a":51},"Comment rendre la barre de recherche responsive après déplacement ?","Encapsulez l'appel du hook dans une div avec les classes Bootstrap appropriées (col-lg-4 col-md-6 col-12). PrestaShop 1.6 utilise Bootstrap 3 et les versions 1.7+ utilisent Bootstrap 4. Ajustez les classes selon la largeur souhaitée sur chaque type d'écran.",{"q":53,"a":54},"Quelle est la méthode la plus simple sur PrestaShop 8 pour repositionner la recherche ?","Sur PrestaShop 8.x, utilisez la syntaxe widget : {{ widget('ps_searchbar') }} en Twig ou {widget name='ps_searchbar'} en Smarty. Cela affiche le module de recherche à n'importe quel endroit du thème sans avoir à créer de hook personnalisé ni d'override.","Pour déplacer la barre de recherche PrestaShop, créez un hook personnalisé via un override du module et appelez-le dans le template souhaité. Sur PrestaShop 1.7+, la syntaxe widget permet de l'afficher n'importe où sans override.",5,"2026-03-21T13:25:41.000Z",[],"PrestaShop pour les développeurs",{"columns":61},[62,78,108,129],{"title":63,"links":64},"Plateforme",[65,69,72,75],{"label":66,"href":67,"external":68},"Offre Starter (2 500 €)","\u002Foffre-starter",false,{"label":70,"href":71,"external":68},"Devenir Ambassadeur","\u002Fambassadeur",{"label":73,"href":74,"external":68},"Modules PrestaShop","\u002Fmodules",{"label":76,"href":77,"external":20},"CodeMyShop.com","https:\u002F\u002Fcodemyshop.com",{"title":79,"links":80},"Le Synedre",[81,84,87,90,93,96,99,102,105],{"label":82,"href":83,"external":68},"L'histoire","\u002Fsynedre",{"label":85,"href":86,"external":68},"Constitution","\u002Fsynedre\u002Fconstitution",{"label":88,"href":89,"external":68},"L'équipe","\u002Fequipe",{"label":91,"href":92,"external":68},"Le réacteur en direct","\u002Freacteur",{"label":94,"href":95,"external":68},"Le Drill (entraînement)","\u002Fdrill",{"label":97,"href":98,"external":68},"Protocole de réunion","\u002Fsynedre\u002Freunion",{"label":100,"href":101,"external":68},"Les agents IA","\u002Fagents-ia",{"label":103,"href":104,"external":68},"La Conduite","\u002Fsynedre\u002Fconduite",{"label":106,"href":107,"external":68},"Charte plateforme","\u002Fsynedre\u002Fcharte",{"title":109,"links":110},"Ressources",[111,114,117,120,123,126],{"label":112,"href":113,"external":68},"Blog","\u002Fblog",{"label":115,"href":116,"external":68},"Academy","\u002Facademy",{"label":118,"href":119,"external":68},"Dictionnaire","\u002Fdictionnaire",{"label":121,"href":122,"external":68},"Expertise PrestaShop","\u002Fexpertise",{"label":124,"href":125,"external":68},"Flywheel","\u002Fflywheel",{"label":127,"href":128,"external":68},"Manifeste","\u002Fmanifeste",{"title":130,"links":131},"À propos",[132,135,138],{"label":133,"href":134,"external":68},"Alexandre Carette","\u002Fa-propos",{"label":136,"href":137,"external":68},"Dossier de presse","\u002Fpresse",{"label":139,"href":140,"external":68},"Contact","\u002Fcontact",{"items":142},[143,152,158,164,172,180,185,191],{"id":144,"type":145,"label":146,"href":122,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":149,"children":150,"psChildren":151},41,"link",{"fr":147},"Expertise",null,0,[],[],{"id":153,"type":145,"label":154,"href":113,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":155,"children":156,"psChildren":157},42,{"fr":112},1,[],[],{"id":159,"type":145,"label":160,"href":74,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":161,"children":162,"psChildren":163},43,{"fr":73},2,[],[],{"id":165,"type":145,"label":166,"href":168,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":169,"children":170,"psChildren":171},44,{"fr":167},"Outils IA","\u002Foutils-ia",3,[],[],{"id":173,"type":145,"label":174,"href":67,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":176,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":177,"children":178,"psChildren":179},45,{"fr":175},"Offre Starter ✨",{"highlight":20},4,[],[],{"id":181,"type":145,"label":182,"href":116,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":56,"children":183,"psChildren":184},46,{"fr":115},[],[],{"id":186,"type":145,"label":187,"href":134,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":188,"children":189,"psChildren":190},47,{"fr":130},6,[],[],{"id":192,"type":145,"label":193,"href":140,"icon":148,"description":148,"badge":148,"groupTitle":148,"style":148,"gridColumns":148,"cssClass":148,"psCategoryId":148,"showPsChildren":68,"position":194,"children":195,"psChildren":196},48,{"fr":139},7,[],[],{"header":198},{"logo":199,"topBar":204,"contactEmail":207,"features":208,"navBar":148},{"src":200,"alt":201,"text":133,"href":202,"class":203},"\u002Flogo-ac.svg","Alexandre Carette — Architecte E-commerce Souverain","\u002F","h-10 w-10",{"message":148,"showLanguages":68,"align":205,"languages":206},"left",[],"contact@alexandrecarette.fr",{"showSearch":68,"showWishlist":68,"showLogin":20,"showContact":68,"showCart":68,"stickyHeader":20,"headerLayout":209},"inline",{"academy":211,"blog":212,"expertise":223},[],[213,217,220],{"title":214,"url":215,"score":155,"type":216},"PrestaShop headless avec Nuxt 3 : pourquoi séparer back et front","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-separation-front-back","blog",{"title":218,"url":219,"score":155,"type":216},"PrestaShop headless : Nuxt 3, pas Next.js — le choix souverain","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fprestashop-headless-nuxt-nextjs-souverainete",{"title":221,"url":222,"score":155,"type":216},"Sylius rachète PrestaShop : ce que ça change pour vous","\u002Fblog\u002Fprestashop\u002Farchitecture\u002Fsylius-rachat-prestashop-headless-souverainete",[],{"footer":225},{"theme":226,"description":148,"hours":148,"logo":227,"contact":228,"social":229,"bottomBar":239},"dark",{"src":200,"href":202,"alt":133},{"email":148,"phone":148,"address":148,"cta":148},[230,233,236],{"platform":231,"href":232,"label":231},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Falexandre-carette\u002F",{"platform":234,"href":235,"label":234},"malt","https:\u002F\u002Fwww.malt.fr\u002Fprofile\u002Falexandrecarette",{"platform":237,"href":238,"label":237},"github","https:\u002F\u002Fgithub.com\u002Fprest4cafe",{"copyright":148}]