Jak zaimplementować Algolia Search w Drupal 9 (Część 2)

W poprzednim rozdziale tej serii przeprowadziliśmy Cię przez proces konfigurowania dashboardu Algolii i witryny Drupal do indeksowania zawartości witryny w Algolii. W tym rozdziale dowiesz się, jak wyświetlać wyniki wyszukiwania Algolii na swojej stronie Drupal.

Aby wyświetlić wynik wyszukiwania, musisz utworzyć niestandardowy blok Drupala i umieścić go na stronie /search . Dowiesz się również, jak korzystać z biblioteki InstantSearch Algolii. Pamiętaj, że ten proces zakłada, że ​​masz podstawową wiedzę na temat tworzenia niestandardowych modułów w Drupalu, więc nie będziemy zagłębiać się w proces tworzenia niestandardowych modułów. Przeczytaj ten artykuł, aby dowiedzieć się, jak programowo tworzyć niestandardowe moduły w Drupal 9.

To jest drugi rozdział dwuczęściowego artykułu z serii. Kliknij tutaj, aby przeczytać pierwszą część, w której mówimy o konfiguracji Algolii i Drupala.

Budowanie niestandardowego bloku dla interfejsu

Użyjemy następującej struktury do stworzenia naszego niestandardowego bloku.

 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

Deklarowanie bibliotek

Jak wyjaśniono wcześniej, będziemy korzystać z biblioteki InstantSearch Algolii, aby uzyskać dostęp do wyników wyszukiwania. Zadeklarujmy więc wszystkie biblioteki w algolia_search_interface.libraries.yml, jak pokazano poniżej:

 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 }

Uzyskiwanie dostępu i ustawianie zmiennych

W bloku wyszukiwania Demo (DemoSearchBlock.php)​​ po prostu uzyskamy dostęp do zmiennych Algolia z konfiguracji Drupala i przypiszemy je do drupalSettings za pomocą następującego kodu:

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

Dodaj szablon

Teraz musisz dodać szablon do niestandardowego bloku. Zdefiniujmy więc hook_theme dla naszego niestandardowego bloku w algolia_search_interface.module:

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

Zdefiniuj pojemniki

Teraz zdefiniujmy nasze dane szablonu do renderowania wyników wyszukiwania. Po prostu zdefiniujemy kontenery, w których biblioteka InstantSearch będzie renderować wyniki. Dodamy 4 kontenery w 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>

Wyświetlanie wyników wyszukiwania

Teraz masz już wszystkie składniki potrzebne do wyświetlenia wyników wyszukiwania. Przyjrzyjmy się więc, jak używać funkcji InstantSearch do wyświetlania naszych wyników.

Najpierw pobierzmy nazwę indeksu, identyfikator aplikacji i klucz aplikacji ze zmiennej drupalSettings. Potrzebujemy ich do przekazania do naszego Algolia API w algolia.js.

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

Gdy masz już klucze aplikacji i nazwę indeksu, musisz zainicjować i uruchomić wyszukiwanie błyskawiczne.

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

W tym momencie nie zobaczysz żadnej różnicy na stronie wyszukiwania, ponieważ nie dodałeś żadnego widżetu do wyszukiwania błyskawicznego. Dodajmy więc widżet pola wyszukiwania do wyszukiwania błyskawicznego.

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

Zauważ, że użyliśmy funkcji addwidget() z InstantSearch , aby dodać pojedynczy widżet. W przypadku korzystania z wielu widżetów addwidget() jest niewykonalne. Będziesz musiał go użyć w następujący sposób:

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

Teraz będziesz mógł zobaczyć wyniki wyszukiwania na swojej stronie wyszukiwania. Ale jak widzimy, wynik jest w bardzo surowym formacie:

Aby to doprecyzować, sformatujmy wynik za pomocą atrybutu szablonu, jak pokazano poniżej:

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

Zauważ, że chociaż wynik wygląda dobrze, czasami musimy trochę przetworzyć dane przed wyświetleniem ich na stronie. Na przykład w powyższym kodzie wartość URI jest w formacie `public://` . Tutaj możemy użyć atrybutu transformItems , aby zmienić wyniki zgodnie z naszymi wymaganiami.

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

Po utworzeniu zestawu wyników możesz teraz przejść do wyświetlania danych aspektów, aby filtrować nasze kryteria wyszukiwania. Do wyświetlania aspektów użyjesz tej samej funkcji addWidgets() .

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

Opcja atrybutu określa nazwę pola, względem którego chcemy wyświetlić aspekt. Pamiętaj, że to również musi być wstępnie skonfigurowane w panelu Algolia.

Na koniec dodajmy paginację, aby umożliwić wyświetlanie większej liczby wyników.

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

I gotowe! Tak wygląda ostateczny kod

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

Końcowe przemyślenia

Gdy kończymy naszą dwuczęściową serię artykułów, mamy nadzieję, że zrozumieliście Państwo Algolię w wystarczającym stopniu. Omówiliśmy, w jaki sposób można zintegrować wyszukiwanie Algolia z Drupalem, aby zbudować potężne wyszukiwanie na poziomie konsumenckim. Omówiliśmy również wykorzystanie biblioteki InstantSearch do dostosowania wyników wyszukiwania. Szukasz firmy w 100% skoncentrowanej na Drupalu, która pomoże Ci zbudować ambitne doświadczenia związane z Drupalem, wykorzystując jednocześnie to, co najlepsze w sieci? Chcielibyśmy usłyszeć od Ciebie!