Come implementare Algolia Search in Drupal 9 (Parte 2)

Nel capitolo precedente di questa serie, ti abbiamo guidato attraverso il processo di configurazione della dashboard di Algolia e del tuo sito Drupal per indicizzare i contenuti del sito su Algolia. In questo capitolo imparerai come visualizzare i risultati di ricerca di Algolia sul tuo sito web Drupal.

Per visualizzare il risultato della ricerca, dovrai creare un blocco personalizzato Drupal e posizionare il blocco nella pagina /search . Inoltre, scoprirai come utilizzare la libreria InstantSearch di Algolia . Nota che questo processo presuppone che tu abbia una conoscenza di base di come creare moduli personalizzati in Drupal, quindi non ci addentreremo nel processo di creazione di moduli personalizzati. Leggi questo articolo per scoprire come creare moduli personalizzati a livello di codice in Drupal 9.

Questo è il secondo capitolo di un articolo della serie in 2 parti. Clicca qui per leggere la prima parte dove si parla di come configurare Algolia e Drupal.

Creazione di un blocco personalizzato per l'interfaccia

Useremo la seguente struttura per creare il nostro blocco personalizzato.

 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

Dichiarando le biblioteche

Come spiegato in precedenza, utilizzeremo la libreria InstantSearch di Algolia per accedere ai risultati di ricerca. Dichiariamo quindi tutte le librerie in algolia_search_interface.libraries.yml come mostrato di seguito:

 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 }

Accesso e impostazione delle variabili

Nel Blocco di ricerca Demo (DemoSearchBlock.php)​​, accederemo semplicemente alle variabili Algolia dalla configurazione di Drupal e le assegneremo a drupalSettings utilizzando il seguente codice:

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

Aggiungi un modello

Ora dovrai aggiungere un modello per il blocco personalizzato. Quindi definiamo hook_theme per il nostro blocco personalizzato in algolia_search_interface.module:

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

Definisci i Contenitori

Ora definiamo i dati del nostro modello per visualizzare i risultati della ricerca. Definiremo semplicemente i contenitori in cui la libreria InstantSearch visualizzerà i risultati. Aggiungeremo 4 contenitori in 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>

Visualizzazione dei risultati della ricerca

Ora hai tutti gli ingredienti necessari per visualizzare i risultati della tua ricerca. Diamo quindi un'occhiata a come utilizzare InstantSearch per visualizzare i nostri risultati.

Per prima cosa, prendiamo il nome dell'indice, l'id dell'applicazione e la chiave dell'applicazione dalla variabile drupalSettings. Abbiamo bisogno che passino alla nostra API Algolia in algolia.js.

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

Una volta che hai le chiavi dell'applicazione e il nome dell'indice, devi inizializzare e avviare InstantSearch.

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

A questo punto, non vedrai alcuna differenza nella pagina di ricerca in quanto non hai aggiunto alcun widget a InstantSearch. Quindi, aggiungiamo un widget della casella di ricerca alla ricerca istantanea.

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

Si noti che abbiamo utilizzato la funzione addwidget() di InstantSearch per aggiungere un singolo widget. Quando si utilizzano più widget, addwidget() non è fattibile. Dovrai usarlo nel modo seguente:

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

Ora sarai in grado di vedere i risultati della ricerca nella tua pagina di ricerca. Ma come possiamo vedere, il risultato è in un formato molto grezzo:

Per perfezionare questo, formattiamo il risultato utilizzando l'attributo del modello come mostrato di seguito:

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

Nota che sebbene il risultato appaia a posto, a volte è necessario eseguire alcune elaborazioni sui dati prima di visualizzarli sulla pagina. Ad esempio, nel codice precedente, il valore dell'URI è nel formato `public://` . Qui possiamo utilizzare l'attributo transformItems per modificare i risultati in base ai nostri requisiti.

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

Una volta che il set di risultati è a posto, ora puoi passare a visualizzare i dati dei facet per filtrare i nostri criteri di ricerca. Utilizzerai la stessa funzione addWidgets() per visualizzare i facet.

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

L'opzione dell'attributo definisce il nome del campo rispetto al quale vogliamo visualizzare il facet. Ricorda che anche questo deve essere preconfigurato nella dashboard di Algolia.

Infine, aggiungiamo l'impaginazione per consentire la visualizzazione di più risultati.

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

E abbiamo finito! Ecco come appare il codice finale

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

Pensieri finali

Mentre concludiamo la nostra serie di articoli in due parti, speriamo che tu abbia acquisito una comprensione sufficiente dell'Algolia. Abbiamo spiegato come integrare la ricerca Algolia con Drupal per creare una ricerca potente e di livello consumer. Abbiamo anche discusso dell'utilizzo della libreria InstantSearch per personalizzare i risultati della ricerca. Cerchi un'azienda focalizzata al 100% su Drupal che possa aiutarti a creare esperienze Drupal ambiziose utilizzando il meglio del web? Ci piacerebbe sentirti!