Comment implémenter Algolia Search dans Drupal 9 (Partie 2)

Dans le chapitre précédent de cette série, nous vous avons expliqué le processus de configuration du tableau de bord Algolia et de votre site Drupal pour indexer le contenu du site sur Algolia. Dans ce chapitre, vous apprendrez comment afficher les résultats de recherche Algolia sur votre site Drupal.

Pour afficher le résultat de la recherche, vous devrez créer un bloc personnalisé Drupal et placer le bloc sur la page /search . De plus, vous découvrirez comment utiliser la bibliothèque InstantSearch d'Algolia. Notez que ce processus suppose que vous ayez une compréhension de base de la création de modules personnalisés dans Drupal, nous n'allons donc pas plonger dans le processus de création de modules personnalisés. Lisez cet article pour savoir comment créer par programmation des modules personnalisés dans Drupal 9.

Ceci est le deuxième chapitre d'un article de la série 2-Part. Cliquez ici pour lire la première partie où nous expliquons comment configurer Algolia et Drupal.

Construire un bloc personnalisé pour l'interface

Nous utiliserons la structure suivante pour créer notre bloc personnalisé.

 algolia_search_interface - js/ - algolia.js - src/ - Plugin - Block - DemoSearchBlock.php - templates/ - algolia_search_interface-block.html.twig - algolia_search_interface.info.yml - algolia_search_interface.libraries.yml - algolia_search_interface.module

Déclaration des bibliothèques

Comme expliqué précédemment, nous utiliserons la bibliothèque InstantSearch d'Algolia pour accéder aux résultats de la recherche. Déclarons donc toutes les bibliothèques dans algolia_search_interface.libraries.yml comme indiqué ci-dessous :

 algolia-javascript: js: https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js : { type: external } https://cdn.jsdelivr.net/npm/[email protected] : { type: external } js/algolia.js: {preprocess: false} dependencies: - core/drupalSettings css: theme: https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia-min.css: { type: external, minified : true }

Accès et définition des variables

Dans le bloc de recherche Demo (DemoSearchBlock.php)​​, nous allons simplement accéder aux variables Algolia de la configuration Drupal et les affecter à drupalSettings en utilisant le code suivant :

 public function build() { // Get Algolia config. $config = $this->configFactory->get('search_api.server.algolia_search'); $app_id = $config->get('backend_config.application_id'); $api_key = $config->get('backend_config.api_key'); $index_name = $this->configFactory->get('search_api.index.vehicles_data')->get('options.algolia_index_name'); return [ '#theme' => 'demo_search_block', '#attached' => [ 'library' => 'algolia_search_interface/algolia-javascript', 'drupalSettings' => [ 'app_id' => $app_id, 'index_name' => $index_name, 'api_key' => $api_key, ], ], '#cache' => [ 'contexts' => [ 'url.path', 'url.query_args', ], ], ]; }

Ajouter un modèle

Vous devez maintenant ajouter un modèle pour le bloc personnalisé. Définissons donc le hook_theme pour notre bloc personnalisé dans algolia_search_interface.module :

 /** * Implements hook_theme(). */ function algolia_search_interface_theme($existing, $type, $theme, $path) { return [ 'demo_search_block' => [], ]; }

Définir les conteneurs

Maintenant, définissons nos données de modèle pour afficher les résultats de la recherche. Nous définirons simplement les conteneurs où la bibliothèque InstantSearch rendra les résultats. Nous allons ajouter 4 conteneurs dans algolia_search_interface-block.html.twig :

 - Searchbox (#searchbox) - Search results (#hits) - Facets (#filter-widget) - Pagination (#pagination)

 <div class="demo-instant-search"> <div class="algolia-searchbox"></div> <div class="align-left"> <div class="filter-header">{{ 'Manufacturer'|t }}</div> <div></div> </div> <div class="right-col"> <div></div> </div> </div> <div></div>

Affichage des résultats de la recherche

Vous avez maintenant tous les ingrédients nécessaires pour afficher vos résultats de recherche. Voyons donc comment utiliser InstantSearch pour afficher nos résultats.

Tout d'abord, récupérons le nom de l'index, l'identifiant de l'application et la clé de l'application à partir de la variable drupalSettings. Nous en avons besoin pour passer à notre API Algolia dans algolia.js.

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key;

Une fois que vous avez les clés d'application et le nom d'index en place, vous devez initialiser et démarrer InstantSearch.

 const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.start();

À ce stade, vous ne verrez aucune différence dans la page de recherche car vous n'avez ajouté aucun widget à InstantSearch. Alors, ajoutons un widget searchbox à la recherche instantanée.

 search.addWidget( instantsearch.widgets.searchBox({ container: '#searchbox', }) );

Notez que nous avons utilisé la fonction addwidget() d' InstantSearch pour ajouter un seul widget. Lors de l'utilisation de plusieurs widgets, addwidget() n'est pas possible. Vous devrez l'utiliser de la manière suivante :

 search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits' }), ]);

Vous pourrez maintenant voir les résultats de la recherche sur votre page de recherche. Mais comme on peut le voir, le résultat est dans un format très brut :

Afin d'affiner cela, formatons le résultat à l'aide de l'attribut template comme indiqué ci-dessous :

 instantsearch.widgets.hits({ container: '#hits', templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer}}} </p> <p class="uri">{{{uri}}} </p> `, }, }),

Notez que même si le résultat semble correct, nous devons parfois effectuer un traitement sur les données avant de les afficher sur la page. Par exemple, dans le code ci-dessus, la valeur URI est au format "public://" . Ici, nous pouvons utiliser l'attribut transformItems pour modifier les résultats selon nos besoins.

 instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', /sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{title.value}}}</h3> <p class="detail"> {{{field_manufacturer }}} </p> <p class="uri">{{{url}}} </p> `, }, })

Une fois l'ensemble de résultats en place, vous pouvez maintenant passer à l'affichage des données de facettes pour filtrer nos critères de recherche. Vous utiliserez la même fonction addWidgets() pour afficher les facettes.

 search.addWidgets([ instantsearch.widgets. refinementList({ container: '#filter-widget, attribute: 'field_manufacturer', }), ]);

L'option d'attribut définit le nom du champ par rapport auquel nous voulons afficher la facette. N'oubliez pas que cela doit également être préconfiguré dans le tableau de bord Algolia.

Enfin, ajoutons la pagination pour permettre l'affichage de plus de résultats.

 search.addWidgets([ instantsearch.widgets. pagination({ container: '#pagination, }), ]);

Et nous avons terminé ! Voici à quoi ressemble le code final

 const index_name = drupalSettings.index_name; const app_id = drupalSettings.app_id; const api_key = drupalSettings.api_key; if(index_name && app_id && api_key) { const search = instantsearch({ indexName: index_name, searchClient: algoliasearch(app_id, api_key), }); search.addWidgets([ instantsearch.widgets.searchBox({ container: '#searchbox', }), instantsearch.widgets.hits({ container: '#hits', transformItems(items) { return items.map(item => ({ ...item, url: item.uri.replace('public://', '/sites/default/files/'), })); }, templates: { item: ` <h3 class="title">{{{_highlightResult.title.value}}}</h3> <p class="detail"> {{{_highlightResult.field_manufacturer.value}}} </p> <p class="uri"><img src="{{{url}}}" /></p>`, }, }), instantsearch.widgets.refinementList({ container: '#filter-widget', attribute: 'field_manufacturer', }), instantsearch.widgets.pagination({ container: '#pagination', }) ]); search.start(); } else { throw "Algolia settings missing";}

Dernières pensées

Alors que nous concluons notre série d'articles en deux parties, nous espérons que vous avez acquis une compréhension suffisante d'Algolia. Nous avons expliqué comment vous pouvez intégrer la recherche Algolia à Drupal pour créer une recherche puissante et de qualité grand public. Nous avons également discuté de l'utilisation de la bibliothèque InstantSearch pour personnaliser les résultats de la recherche. Vous recherchez une entreprise 100 % axée sur Drupal qui peut vous aider à créer des expériences Drupal ambitieuses tout en utilisant le meilleur du Web ? Nous aimerions recevoir de vos nouvelles!