Optimiser l'expérience utilisateur sur PrestaShop : Comment améliorer la recherche par référence produit

Dans le monde du e-commerce, chaque détail compte pour offrir une expérience utilisateur fluide et intuitive. Parmi les fonctionnalités essentielles d'une boutique en ligne, le moteur de recherche joue un rôle crucial dans le parcours d'achat. Chez Platane, nous avons constaté qu'un problème récurrent sur les sites PrestaShop concerne la recherche par référence produit, particulièrement lorsque les références recherchées n'existent pas ou correspondent à des produits désactivés.

Le problème de la recherche par référence sur PrestaShop

PrestaShop propose nativement une fonctionnalité de recherche approximative (fuzzy search) qui, bien que pratique dans de nombreux cas, peut créer une confusion pour les utilisateurs dans certaines situations spécifiques.

Prenons un scénario courant : un client recherche un produit en utilisant une référence précise (par exemple "211345"). Si cette référence n'existe pas dans votre catalogue ou correspond à un produit désactivé, PrestaShop affiche par défaut des résultats "proches" numériquement, sans aucune indication que la référence exacte n'a pas été trouvée.

Cette situation présente plusieurs problèmes :

• Le client peut croire à tort que les produits affichés correspondent à sa recherche
• Aucun message ne l'informe que sa référence exacte n'existe pas
• Les résultats approximatifs peuvent être totalement différents du produit recherché
• L'expérience utilisateur est dégradée, pouvant mener à de la frustration ou à l'abandon

Une solution sur mesure pour améliorer l'expérience utilisateur

Face à cette problématique, nous avons développé une solution élégante qui respecte l'architecture de PrestaShop tout en améliorant significativement l'expérience utilisateur. Notre approche consiste à créer un override du contrôleur de recherche pour détecter spécifiquement les recherches par référence et afficher un message d'avertissement approprié.

Étape 1 : Override du SearchController.php

La première étape consiste à créer un override du contrôleur de recherche natif de PrestaShop. Cet override permet d'intercepter la requête de recherche et d'appliquer une logique personnalisée lorsqu'une référence produit est détectée.

<?php
// override/controllers/front/SearchController.php

class SearchController extends SearchControllerCore
{
    public function initContent()
    {
        parent::initContent();
        
        // Récupération de la requête de recherche
        $query = Tools::getValue('s');
        
        // Vérification si la recherche est composée uniquement de chiffres (référence produit)
        if (preg_match('/^\d+$/', $query)) {
            // Recherche du produit actif avec cette référence exacte
            $productId = $this->findActiveProductByReference($query);
            
            // Si aucun produit actif n'est trouvé avec cette référence
            if (!$productId) {
                $this->context->smarty->assign([
                    'reference_not_found' => true,
                    'searched_reference' => $query
                ]);
            }
        }
    }
    
    /**
     * Recherche un produit actif par sa référence
     * 
     * @param string $reference La référence à rechercher
     * @return int|false L'ID du produit si trouvé, false sinon
     */
    private function findActiveProductByReference($reference)
    {
        return (int)Db::getInstance()->getValue('
            SELECT p.id_product
            FROM '._DB_PREFIX_.'product p
            WHERE p.reference = "'.pSQL($reference).'"
            AND p.active = 1
            AND p.id_shop = '.(int)$this->context->shop->id
        );
    }
}

Étape 2 : Modification du template search.tpl

Une fois l'override en place, nous devons adapter le template de la page de résultats de recherche pour afficher le message d'avertissement lorsque nécessaire.

{* themes/YOUR_THEME/templates/catalog/listing/search.tpl *}

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
  <h1>{l s='Search results' d='Shop.Theme.Catalog'}</h1>
  
  {* Ajout du message d'avertissement pour référence non trouvée *}
  {if isset($reference_not_found) && $reference_not_found}
    <div class="alert alert-warning reference-not-found">
      <p>
        {l s='Attention : la référence "%reference%" n\'a pas été trouvée.' sprintf=['%reference%' => $searched_reference] d='Shop.Theme.Catalog'}
      </p>
      <p>
        {l s='Les produits ci-dessous sont affichés à titre informatif et peuvent ne pas correspondre à votre recherche initiale.' d='Shop.Theme.Catalog'}
      </p>
    </div>
  {/if}
  
  {$listing.pagination.total_items} {if $listing.pagination.total_items > 1}{l s='products' d='Shop.Theme.Catalog'}{else}{l s='product' d='Shop.Theme.Catalog'}{/if}
{/block}

Étape 3 : Optimisation responsive

Pour garantir une expérience utilisateur optimale sur tous les appareils, nous ajoutons quelques styles CSS spécifiques :

/* themes/YOUR_THEME/assets/css/custom.css */

.reference-not-found {
  margin-bottom: 1.5rem;
  border-radius: 4px;
  padding: 1rem;
}

@media (max-width: 767px) {
  .reference-not-found {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
}

Les avantages de cette solution

Cette amélioration apporte plusieurs bénéfices concrets à votre boutique PrestaShop :

1. Transparence accrue : Les clients sont clairement informés lorsque leur recherche par référence n'aboutit pas
2. Réduction de la confusion : Le message explicite évite les malentendus sur les résultats affichés
3. Expérience utilisateur améliorée : Les clients comprennent mieux le fonctionnement de la recherche
4. Intégration native : La solution s'intègre parfaitement au design de PrestaShop en utilisant les classes d'alerte natives
5. Responsive design : L'affichage est optimisé pour tous les appareils

Notre expertise PrestaShop au service de votre e-commerce

Chez Platane, nous avons développé une expertise approfondie dans l'optimisation des boutiques PrestaShop. Notre équipe a notamment mis en œuvre cette solution d'amélioration de recherche pour plusieurs clients, dont un site de vente de pièces détachées où la recherche par référence est cruciale.

Notre approche combine une compréhension fine des enjeux business avec une expertise technique pointue. Nous avons également appliqué cette philosophie lors du développement du site du Festival Ouaille Note, où nous avons créé une boutique Shopify headless ultra-optimisée pour le SEO et la vitesse de chargement, démontrant notre capacité à adapter nos solutions aux besoins spécifiques de chaque projet e-commerce.

Au-delà de la simple correction technique

L'amélioration de la recherche par référence n'est qu'un exemple parmi d'autres des optimisations que nous pouvons apporter à votre boutique PrestaShop. Notre vision va au-delà de la simple correction technique : nous cherchons à comprendre les parcours utilisateurs dans leur globalité pour identifier les points de friction et les transformer en opportunités d'amélioration.

Cette approche centrée sur l'utilisateur, combinée à notre maîtrise des technologies de pointe comme l'intelligence artificielle générative, nous permet de concevoir des solutions e-commerce innovantes qui répondent précisément aux attentes de vos clients.

Prêt à optimiser votre boutique PrestaShop ?

Vous rencontrez des problèmes similaires avec votre moteur de recherche PrestaShop ? Ou peut-être avez-vous d'autres défis techniques à relever pour améliorer l'expérience utilisateur de votre boutique en ligne ?

Notre équipe d'experts est prête à vous accompagner dans l'optimisation de votre plateforme e-commerce. Prenez rendez-vous via notre formulaire de contact pour échanger sur votre projet et découvrir comment Platane peut vous aider à transformer les défis techniques en avantages concurrentiels.

En collaborant avec Platane, vous bénéficiez non seulement de notre expertise technique, mais aussi de notre approche créative et orientée résultats, qui a déjà fait ses preuves auprès de nombreux clients dans des secteurs variés. Ensemble, donnons à votre boutique en ligne les outils nécessaires pour se démarquer et offrir une expérience d'achat exceptionnelle à vos clients.