Filtres de catalogue : conserver le choix dans l’URL et le retour arrière
Un catalogue filtré doit pouvoir être retrouvé après un rechargement, un partage de lien ou un retour depuis une fiche produit. Définissez les choix qui doivent figurer dans l’URL et ceux qui restent temporaires. Une interface rapide perd de son intérêt si le visiteur doit reconstruire sa sélection à chaque retour.
Définir l’état à conserver
Listez les filtres, le tri, la page et la recherche saisie. Précisez les combinaisons valides et la manière de représenter un choix multiple. Ne placez pas de données personnelles ou de secrets dans une URL destinée à être partagée.
Préparez quelques exemples attendus : une couleur et une taille, plusieurs usages, un tri par prix ou une recherche par référence. Ces cas servent de base au développement et à la recette.
Faire correspondre URL et interface
À l’ouverture d’un lien, les contrôles sélectionnés doivent refléter le résultat affiché. Après modification, l’URL doit décrire le nouvel état selon les règles retenues. Si un filtre n’existe plus, prévoyez un comportement explicite plutôt qu’un écran incohérent.
La documentation MDN de l’History API distingue notamment l’ajout et le remplacement d’entrées dans l’historique. Le choix technique doit préserver une navigation compréhensible : chaque interaction mineure ne mérite pas forcément une nouvelle étape de retour arrière.
Rejouer les parcours importants
Testez le rechargement d’une sélection, l’ouverture du lien dans un nouvel onglet et le retour depuis une fiche. Vérifiez aussi le bouton Suivant du navigateur et un lien contenant un filtre inconnu. Le résultat ne doit pas dépendre uniquement d’une session restée ouverte.
Sur mobile, contrôlez l’ouverture et la fermeture du panneau de filtres, le nombre de résultats annoncé et le maintien de la sélection. L’application des filtres ne doit pas faire perdre le contexte sans nécessité.
Séparer usage et indexation
Une URL utile au partage n’est pas automatiquement une page à indexer. Les combinaisons peuvent créer de nombreuses variantes proches. Le guide des filtres e-commerce aide à définir les pages utiles pour la recherche et celles qui servent seulement à la navigation.
Documentez enfin les règles retenues avec les scénarios de test. Vous pourrez vérifier une refonte du catalogue sans dépendre de la mémoire d’un utilisateur ou d’un développeur. La bonne conservation de l’état se mesure dans ces parcours reproduits, pas dans le seul mouvement du panneau de filtres.
Questions fréquentes
Pourquoi conserver les filtres de catalogue dans l’URL ?
Le visiteur peut partager ou retrouver sa sélection et utiliser le retour navigateur. Définissez précisément quels choix doivent pouvoir être reconstruits depuis l’adresse.
Le retour arrière doit-il rétablir tous les filtres ?
Il doit retrouver un état cohérent avec l’historique présenté au visiteur. Testez les changements successifs pour éviter une URL qui ne correspond plus aux produits affichés.
Que faire si une ancienne combinaison de filtres devient impossible ?
Rendez la situation compréhensible et proposez une correction de sélection. N’affichez pas silencieusement une autre liste en laissant croire que les critères ont été respectés.
Conserver un filtre dans l’URL signifie-t-il qu’il faut l’indexer ?
Non. Le besoin de navigation et le choix d’indexation sont distincts. Définissez les combinaisons utiles aux moteurs et le traitement des nombreuses variantes sans valeur propre.
Quels appareils utiliser pour réceptionner les filtres et l’historique ?
Ceux qui représentent les parcours du site, avec une attention au mobile. Testez la fermeture du panneau, l’ouverture d’un produit et le retour à la sélection.
Sources
Documentation consultée le 23 octobre 2026.