Déplacer le bloc recherche PrestaShop dans le menu ou le header

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.

La méthode propre pour y parvenir repose sur la création d'un hook personnalisé et l'utilisation du système d'override de PrestaShop, sans jamais modifier les fichiers core.

Comprendre le mécanisme des hooks de recherche

Le module blocksearch (PrestaShop 1.6) ou ps_searchbar (PrestaShop 1.7+) s'accroche par défaut au hook displayTop. Ce hook est appelé dans le header du thème et affiche le formulaire de recherche à un emplacement prédéfini.

Pour repositionner le bloc, deux approches sont possibles :

1. **Créer un hook personnalisé** et y greffer le module
2. **Dégreffer le module de `displayTop`** et le greffer sur un hook existant mieux positionné

La première méthode offre le plus de flexibilité.

Méthode 1 : Créer un hook personnalisé (PrestaShop 1.6)

Sur PrestaShop 1.6, le module blocksearch gère l'affichage via la méthode hookTop(). L'idée est de créer un nouveau hook qui réutilise cette même logique.

Étape 1 : Créer l'override du module

Créez le fichier override/modules/blocksearch/blocksearch.php :

<?php
/**
 * Override du module blocksearch
 * Ajout d'un hook personnalisé pour repositionner la recherche
 */
class BlockSearchOverride extends BlockSearch
{
    public function install()
    {
        return parent::install()
            && $this->registerHook('displaySearchCustom');
    }

    /**
     * Hook personnalisé qui reprend le rendu du hook top
     */
    public function hookDisplaySearchCustom($params)
    {
        return $this->hookTop($params);
    }
}

Important : 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 ps_hook.

Étape 2 : Dégreffer le hook d'origine

Dans le back-office, allez dans Modules > Positions et supprimez la greffe de blocksearch sur le hook displayTop. Cela évite d'afficher la recherche en double.

Étape 3 : Appeler le hook dans le template

Placez l'appel du hook à l'endroit souhaité dans votre thème :

{hook h='displaySearchCustom'}

Par exemple, pour intégrer la recherche directement dans le menu horizontal, éditez le fichier themes/votre_theme/modules/blocktopmenu/blocktopmenu.tpl :

{if $MENU != ''}
    <div id="block_top_menu" class="sf-contener clearfix col-lg-12">
        <ul class="sf-menu clearfix menu-content">
            {$MENU}
            <li class="sf-search" style="float: right;">
                {hook h='displaySearchCustom'}
            </li>
        </ul>
    </div>
{/if}

Méthode 2 : Approche moderne avec PrestaShop 1.7 / 8.x

Sur PrestaShop 1.7 et 8.x, le module de recherche s'appelle ps_searchbar. L'architecture a évolué et la méthode recommandée diffère.

Option A : Utiliser la greffe de module en back-office

PrestaShop 1.7+ propose nativement plus de hooks dans le header. Vous pouvez simplement :

1. Aller dans **Apparence > Positions des modules**
2. Dégreffer `ps_searchbar` de son hook actuel
3. Le greffer sur `displayNav` ou `displayNavFullWidth` selon votre besoin

Option B : Override propre avec un hook personnalisé

Créez override/modules/ps_searchbar/ps_searchbar.php :

<?php
if (!defined('_PS_VERSION_')) {
    exit;
}

class Ps_SearchBarOverride extends Ps_SearchBar
{
    public function install()
    {
        return parent::install()
            && $this->registerHook('displaySearchCustom');
    }

    public function hookDisplaySearchCustom($params)
    {
        return $this->hookDisplayTop($params);
    }
}

Puis dans votre thème (template Twig sur PS 8.x) :

{# templates/layouts/layout-full-width.tpl ou votre layout #}
{{ hook('displaySearchCustom') }}

Option C : Widget (méthode recommandée sur 1.7+)

Le module ps_searchbar implémente l'interface WidgetInterface. Vous pouvez donc l'appeler directement n'importe où sans créer de hook :

{widget name='ps_searchbar'}

Ou en Twig :

{{ widget('ps_searchbar') }}

C'est la méthode la plus simple et la plus propre sur les versions récentes de PrestaShop.

Gérer le responsive avec Bootstrap

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 :

<!-- Bootstrap 3 (PS 1.6) -->
<div class="col-lg-4 col-md-6 col-sm-12">
    {hook h='displaySearchCustom'}
</div>

<!-- Bootstrap 4 (PS 1.7+) -->
<div class="col-lg-4 col-md-6 col-12">
    {hook h='displaySearchCustom'}
</div>

Le système de grille Bootstrap divise l'écran en 12 colonnes. Utilisez les classes col-* pour définir la largeur de la barre de recherche selon la taille de l'écran :

• `col-lg-4` : occupe 4 colonnes sur grand écran (1/3 de la largeur)
• `col-md-6` : occupe 6 colonnes sur écran moyen (1/2 de la largeur)
• `col-sm-12` / `col-12` : pleine largeur sur mobile

Styliser la recherche dans sa nouvelle position

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

/* Recherche intégrée dans le menu horizontal */
#block_top_menu .sf-search {
    float: right;
    padding: 5px 0;
}

#block_top_menu .sf-search input[type="text"] {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 6px 15px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
    width: 200px;
}

#block_top_menu .sf-search input[type="text"]:focus {
    width: 300px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

Bonnes pratiques et pièges à éviter

Ne jamais modifier les fichiers core

Modifier directement modules/blocksearch/blocksearch.php fonctionne, mais toute mise à jour du module écrasera vos modifications. Utilisez systématiquement le dossier override/ pour pérenniser vos personnalisations.

Penser au cache

Après toute modification de hook ou d'override :

1. Supprimez le fichier `app/cache/class_index.php` (PS 1.6) ou `var/cache/` (PS 1.7+)
2. Videz le cache Smarty depuis le back-office
3. Testez en navigation privée pour éviter les faux positifs

Vérifier l'autocomplétion AJAX

Le module de recherche PrestaShop utilise des requêtes AJAX pour les suggestions. Après un déplacement, vérifiez que :

• Le JavaScript du module est toujours chargé (vérifiez dans l'inspecteur réseau)
• L'élément `#search_query_top` conserve son ID (utilisé par le JS)
• Les suggestions s'affichent correctement dans le nouveau contexte CSS (z-index, position)

Attention au SEO

Le formulaire de recherche doit rester accessible. Vérifiez que :

• L'attribut `action` pointe bien vers la page de recherche
• L'input `name="s"` ou `name="search_query"` est présent
• Un label ou un placeholder descriptif est défini pour l'accessibilité