Accéder au contenu principal

Arrêtez de chercher, commencez à filtrer!

Avez-vous déjà souhaité pouvoir utiliser un filtre pour affiner vos résultats de recherche? Nadja Lamisch partage avec nous comment le faire avec juste le cœur de Joomla. Aucune extension n'est nécessaire!

La fonction de recherche de Joomla, Smart Search, est un élément central depuis plusieurs années. Vous pouvez le trouver sous Composants -> Recherche intelligente. Beaucoup d'entre vous l'ont probablement déjà utilisé.

Aujourd'hui, je voudrais vous montrer comment étendre la recherche avec des options supplémentaires: filtres.

Pour ce faire, nous allons d'abord créer un groupe de champs. Je l’ai appelé «mes filtres».

Créer un groupe de champs appelé 'mes filtres'

Groupe de terrain

Nous créons ensuite nos champs définis par l'utilisateur sous forme de cases à cocher. Définissez les champs dans la zone «Indice de recherche» sur «Rendre consultable et ajouter en tant que taxonomie» dans les options en bas. De cette façon, nous pouvons également créer des filtres pour ces champs.

Rendre le champ consultable et l'ajouter en tant que taxonomie

Options de champ pour la recherche

Nous enregistrons nos valeurs pour chaque case à cocher dans les «Valeurs de la case à cocher».

Valeurs de la case à cocher

Champ personnalisé

Sélectionnez notre groupe précédemment créé comme groupe de champs (dans mon cas, il s’agit de «mes filtres»).

Maintenant, nous créons un nouvel article. Je peux voir mes cases à cocher dans l’onglet «Mes filtres» et les sélectionner en conséquence.

Article avec champ


Tab avec champ dans l'article

Nous pouvons maintenant créer les filtres souhaités sous Composants -> Recherche intelligente -> Filtres.

Filtrer dans Smart Search

Filtrer dans Smart Search

S'il vous plaît ne soyez pas surpris, vos champs des cases à cocher n'apparaîtront pour la sélection que si vous les avez déjà sélectionnés dans un article. Je n’ai sélectionné que la «farine» dans mon article, c’est pourquoi je n’ai sélectionné que la «farine» comme filtre. Dès que j'aurai créé d'autres articles avec les autres options, je les verrai également ici dans les filtres.

Pour utiliser les filtres sur la page, nous avons besoin d'une entrée de menu appropriée.

Nous créons un nouvel élément de menu «Filtre». Nous définissons cela comme index de recherche - Recherche.

Élément de menu pour Smart Search

Élément de menu pour Smart Search

Dans l’onglet «Avancé», nous définissons «Autoriser la recherche vide» sur oui.

Définir Autoriser la recherche vide à oui

Sélectionner un filtre

L'étape suivante consiste à créer un module. Après tout, nous voulons afficher et utiliser nos filtres sur le site Web.

Pour ce faire, nous passerons aux modules Content -> Site et créerons un nouveau module «Smart Search».

Nous définissons notre élément de menu «Filtre» comme ItemID et définissons la «Recherche avancée» sur «Affichage».

Module

Module

Sur notre site Web, il ressemblera à ceci:

Filtres vue frontale

Frontend

Comme vous pouvez le voir, nous avons maintenant aussi d'autres types de filtres tels que la langue, l'auteur, les catégories... Mais nous ne voulons pas les afficher du tout.

Pour modifier ces paramètres, nous revenons au backend et allons à System -> Plugins. Là, nous entrons «recherche» dans la barre de recherche en haut.

Nous voyons une liste des plugins qui affectent l'index de recherche.

Liste des plugins de recherche

Plugins de recherche

Nous ouvrons le plugin «Smart Search - Content» et pouvons définir des paramètres pour les taxonomies. Dans notre cas, nous désactivons toutes les cases à cocher.

Modifier les paramètres dans le plugin Smart Search

Options dans la recherche intelligente - Plugin de contenu

Et nous faisons la même chose dans le plugin Smart Search - Categories.

Si nous retournons maintenant à notre page et rechargeons la page, nous ne voyons toujours aucune différence dans notre module. Comme notre contenu était déjà indexé, nous devons recréer l'index de recherche.

Pour ce faire, nous revenons à Components -> Smart Search -> Index et recréons l'index.

Si nous revenons maintenant à notre site Web, nous n'avons que notre filtre sélectionné.

Frontend avec filtre

Frontend avec filtre

J’ai ajouté quelques autres articles avec différents «ingrédients» et je les ai affichés en tant que blog sur mon site. J’ai maintenant mon filtre «Ingrédients» à gauche et je peux faire une sélection.

Étant donné que nous avons autorisé la recherche vide dans notre élément de menu «Recherche», nous pouvons désormais simplement sélectionner l’une de nos options de filtrage.

Frontend avec filtre sélectionné

Filtre sélectionné

Et c'est tout! Vous avez amélioré l'expérience de recherche de vos utilisateurs avec juste le noyau Joomla!

Article en allemand

Certains articles publiés sur le Joomla Community Magazine représentent l'opinion personnelle ou l'expérience de l'auteur sur le sujet spécifique et peuvent ne pas être alignés sur la position officielle du projet Joomla.

1
2
3
4
5
6
7
EventSchedule
February Customize Backend
February Email Template
February Joomla Academy
February Mywoodlot
February Recover Article
February Web Development II
February Write Tutorial
February JQuery 2
Gets SiteView
JCB
JCB1 Custom Admin View
JCB2 Basis
January Components
January Connecting Third Party Libraries
January Floating Labels
January Happy 2025
January Web Development
March Blog Joomla
March Case Study
March Disaster
MySqlTab
SitViewCodeSuggestions
TutorialKing
Admin Tabs Custom Code
Article Menu Item
ClassDescriptionGitea
Diagram Selection Process
Joomla Extension Changlog View
Menu Templates
Selection Process Current
Starttime
EventSchedule3
Chrome OvkmdodwV6
Dashboard 01 Custom Css Example
Dashboard 02 Disable Core Extensions
Dashboard 03 Edit Layout
Dashboard 04 Images
Dashboard 05 User Dashboard
Dashboard 06 Custom Quick Icons
Dashboard 07 Admin Checklist
Fimage1
Fimage10
Fimage11
Fimage12
Fimage13
Fimage2
Fimage3
Fimage4
Fimage5
Fimage6
Fimage7
Fimage8
Fimage9
Image 20250114112645473
Image1
Image10
Image11
Image12
Image13
Image1a
Image2
Image3
Image4
Image4a
Image5 1
Image5
Image5a
Image6
Image6a
Image7
Image8
Image9
Junction Table