Cum se implementează Algolia Search în Drupal 9 (Partea 2)

În capitolul anterior al acestei serii, v-am ghidat prin procesul de configurare a tabloului de bord Algolia și a site-ului dvs. Drupal pentru a indexa conținutul site-ului pe Algolia. În acest capitol, veți învăța cum să afișați rezultatele căutării Algolia pe site-ul dvs. web Drupal.

Pentru a afișa rezultatul căutării, va trebui să creați un bloc personalizat Drupal și să plasați blocul pe pagina /căutare . De asemenea, veți afla cum să utilizați biblioteca InstantSearch a Algolia. Rețineți că acest proces presupune că aveți o înțelegere de bază despre cum să creați module personalizate în Drupal, așa că nu ne vom aprofunda în procesul de creare a modulelor personalizate. Citiți acest articol pentru a afla cum să creați în mod programatic module personalizate în Drupal 9.

Acesta este al doilea capitol al unui articol din seria de două părți. Faceți clic aici pentru a citi prima parte în care vorbim despre cum să configurați Algolia și Drupal.

Construirea unui bloc personalizat pentru interfață

Vom folosi următoarea structură pentru a crea blocul nostru personalizat.

 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

Declararea Bibliotecilor

După cum sa explicat mai devreme, vom folosi biblioteca InstantSearch a Algolia pentru a accesa rezultatele căutării. Deci, să declarăm toate bibliotecile din algolia_search_interface.libraries.yml, așa cum se arată mai jos:

 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 }

Accesarea și setarea variabilelor

În Blocul de căutare Demo (DemoSearchBlock.php)​​, vom accesa pur și simplu variabilele Algolia din configurația Drupal și le vom atribui la drupalSettings folosind următorul cod:

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

Adăugați un șablon

Acum va trebui să adăugați un șablon pentru blocul personalizat. Deci, să definim hook_theme pentru blocul nostru personalizat în algolia_search_interface.module:

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

Definiți containerele

Acum, să definim datele șablonului nostru pentru a reda rezultatele căutării. Vom defini pur și simplu containerele în care biblioteca InstantSearch va reda rezultatele. Vom adăuga 4 containere în 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>

Afișarea rezultatelor căutării

Acum aveți toate ingredientele necesare pentru a afișa rezultatele căutării. Deci, să aruncăm o privire la cum să folosiți InstantSearch pentru a afișa rezultatele noastre.

Mai întâi, să obținem numele indexului, id-ul aplicației și cheia aplicației din variabila drupalSettings. Avem nevoie de ele să treacă la API-ul nostru Algolia în algolia.js.

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

După ce aveți cheile aplicației și numele indexului la locul lor, trebuie să inițializați și să porniți InstantSearch.

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

În acest moment, nu veți vedea nicio diferență în pagina de căutare, deoarece nu ați adăugat niciun widget la InstantSearch. Deci, să adăugăm un widget casetă de căutare la căutarea instantanee.

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

Observați că am folosit funcția addwidget() a InstantSearch pentru a adăuga un singur widget. Când utilizați mai multe widget-uri, addwidget() nu este fezabil. Va trebui să-l utilizați în felul următor:

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

Acum veți putea vedea rezultatele căutării pe pagina dvs. de căutare. Dar după cum putem vedea, rezultatul este într-un format foarte brut:

Pentru a rafina acest lucru, să formatăm rezultatul utilizând atributul șablon așa cum se arată mai jos:

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

Rețineți că, deși rezultatul arată bine, uneori trebuie să procesăm datele înainte de a le afișa pe pagină. De exemplu, în codul de mai sus, valoarea URI este în formatul „public://” . Aici putem folosi atributul transformItems pentru a modifica rezultatele conform cerințelor noastre.

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

Odată ce setul de rezultate este stabilit, acum puteți trece la afișarea datelor fațete pentru a filtra criteriile noastre de căutare. Veți folosi aceeași funcție addWidgets() pentru a afișa fațete.

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

Opțiunea de atribut definește numele câmpului față de care dorim să afișam fața. Rețineți că acest lucru trebuie, de asemenea, preconfigurat în tabloul de bord Algolia.

În cele din urmă, să adăugăm paginarea pentru a permite afișarea mai multor rezultate.

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

Și am terminat! Așa arată codul 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";}

Gânduri finale

Pe măsură ce încheiem seria noastră de articole din două părți, sperăm că ați înțeles suficient despre Algolia. Am explicat cum puteți integra căutarea Algolia cu Drupal pentru a construi o căutare puternică și de calitate pentru consumatori. De asemenea, am discutat despre utilizarea bibliotecii InstantSearch pentru a personaliza rezultatele căutării. Căutați o companie 100% concentrată pe Drupal, care să vă ajute să construiți experiențe Drupal ambițioase, folosind tot ce este mai bun de pe web? Ne-am bucura sa primim vesti de la tine!