So implementieren Sie die Algolia-Suche in Drupal 9 (Teil 2)

Im vorherigen Kapitel dieser Serie haben wir Sie durch den Prozess der Konfiguration des Algolia-Dashboards und Ihrer Drupal-Site geführt, um den Inhalt der Site auf Algolia zu indizieren. In diesem Kapitel erfahren Sie, wie Sie die Algolia-Suchergebnisse auf Ihrer Drupal-Website anzeigen können.

Um das Suchergebnis anzuzeigen, müssen Sie einen benutzerdefinierten Drupal-Block erstellen und den Block auf der /search- Seite platzieren. Außerdem erfahren Sie, wie Sie die InstantSearch -Bibliothek von Algolia nutzen können. Beachten Sie, dass dieser Prozess davon ausgeht, dass Sie ein grundlegendes Verständnis dafür haben, wie benutzerdefinierte Module in Drupal erstellt werden, daher werden wir nicht tief in den Prozess der Erstellung benutzerdefinierter Module eintauchen. Lesen Sie diesen Artikel, um zu erfahren, wie Sie benutzerdefinierte Module in Drupal 9 programmgesteuert erstellen.

Dies ist das zweite Kapitel einer zweiteiligen Artikelserie. Klicken Sie hier, um den ersten Teil zu lesen, in dem wir über die Konfiguration von Algolia und Drupal sprechen.

Erstellen eines benutzerdefinierten Blocks für die Schnittstelle

Wir werden die folgende Struktur verwenden, um unseren benutzerdefinierten Block zu erstellen.

 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

Deklarieren der Bibliotheken

Wie bereits erläutert, verwenden wir die InstantSearch-Bibliothek von Algolia, um auf Suchergebnisse zuzugreifen. Lassen Sie uns also alle Bibliotheken in algolia_search_interface.libraries.yml deklarieren, wie unten gezeigt:

 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 }

Zugriff auf und Setzen von Variablen

Im Demo-Suchblock (DemoSearchBlock.php) greifen wir einfach auf Algolia-Variablen aus der Drupal-Konfiguration zu und weisen sie mit dem folgenden Code drupalSettings zu:

 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', ], ], ]; }

Fügen Sie eine Vorlage hinzu

Jetzt müssen Sie eine Vorlage für den benutzerdefinierten Block hinzufügen. Definieren wir also das hook_theme für unseren benutzerdefinierten Block in algolia_search_interface.module:

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

Definieren Sie die Container

Lassen Sie uns nun unsere Vorlagendaten zum Rendern der Suchergebnisse definieren. Wir definieren einfach die Container, in denen die InstantSearch-Bibliothek die Ergebnisse rendert. Wir werden 4 Container in algolia_search_interface-block.html.twig hinzufügen:

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

Anzeigen der Suchergebnisse

Jetzt haben Sie alle notwendigen Zutaten, um Ihre Suchergebnisse anzuzeigen. Schauen wir uns also an, wie Sie InstantSearch verwenden, um unsere Ergebnisse anzuzeigen.

Lassen Sie uns zunächst den Indexnamen, die Anwendungs-ID und den Anwendungsschlüssel aus der Variablen drupalSettings abrufen. Wir brauchen sie, um sie an unsere Algolia-API in algolia.js weiterzugeben.

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

Sobald Sie die Anwendungsschlüssel und den Indexnamen eingerichtet haben, müssen Sie die InstantSearch initialisieren und starten.

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

An dieser Stelle sehen Sie keinen Unterschied auf der Suchseite, da Sie der InstantSearch kein Widget hinzugefügt haben. Also fügen wir der Sofortsuche ein Suchfeld-Widget hinzu.

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

Beachten Sie, dass wir die Funktion addwidget() von InstantSearch verwendet haben, um ein einzelnes Widget hinzuzufügen. Bei Verwendung mehrerer Widgets ist addwidget() nicht möglich. Sie müssen es auf folgende Weise verwenden:

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

Jetzt können Sie die Suchergebnisse auf Ihrer Suchseite sehen. Aber wie wir sehen können, liegt das Ergebnis in einem sehr rohen Format vor:

Um dies zu verfeinern, formatieren wir das Ergebnis mit dem Template -Attribut wie unten gezeigt:

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

Beachten Sie, dass wir, obwohl das Ergebnis gut aussieht, manchmal etwas an den Daten verarbeiten müssen, bevor wir sie auf der Seite anzeigen. Im obigen Code hat der URI-Wert beispielsweise das Format „public://“ . Hier können wir das Attribut transformItems verwenden, um die Ergebnisse gemäß unseren Anforderungen zu ändern.

 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> `, }, })

Sobald der Ergebnissatz vorhanden ist, können Sie nun Facettendaten anzeigen, um unsere Suchkriterien zu filtern. Sie verwenden dieselbe addWidgets()- Funktion, um Facetten anzuzeigen.

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

Die Attributoption definiert den Feldnamen, für den wir die Facette anzeigen möchten. Denken Sie daran, dass dies auch im Algolia-Dashboard vorkonfiguriert werden muss.

Schließlich fügen wir eine Paginierung hinzu, damit mehr Ergebnisse angezeigt werden können.

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

Und wir sind fertig! So sieht der endgültige Code aus

 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";}

Abschließende Gedanken

Zum Abschluss unserer zweiteiligen Artikelserie hoffen wir, dass Sie Algolia ausreichend verstanden haben. Wir haben behandelt, wie Sie die Algolia-Suche mit Drupal integrieren können, um eine leistungsstarke und verbrauchergerechte Suche aufzubauen. Wir haben auch die Verwendung der InstantSearch-Bibliothek zum Anpassen der Suchergebnisse besprochen. Suchen Sie nach einem Unternehmen, das sich zu 100 % auf Drupal konzentriert und Ihnen dabei helfen kann, ehrgeizige Drupal-Erlebnisse aufzubauen und gleichzeitig das Beste aus dem Internet zu nutzen? Wir würden uns freuen, von Ihnen zu hören!