Drupal 9 で Algolia Search を実装する方法 (パート 2)

このシリーズの前の章では、Algolia ダッシュボードと Drupal サイトを構成して、サイトのコンテンツを Algolia でインデックス化するプロセスについて説明しました。 この章では、Drupal ウェブサイトに Algolia 検索結果を表示する方法を学びます。

検索結果を表示するには、Drupal カスタム ブロックを作成し、そのブロックを/searchページに配置する必要があります。 また、Algolia のInstantSearchライブラリを利用する方法についても説明します。 このプロセスでは、Drupal でカスタム モジュールを作成する方法について基本的な知識があることを前提としているため、カスタム モジュールの作成プロセスについては深く掘り下げません。 この記事を読んで、Drupal 9 でカスタム モジュールをプログラムで作成する方法を学んでください。

これは、2 部構成のシリーズ記事の第 2 章です。 Algolia と Drupal の構成方法について説明した最初の部分を読むには、ここをクリックしてください。

インターフェイスのカスタム ブロックの構築

次の構造を使用して、カスタム ブロックを作成します。

 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

ライブラリの宣言

前に説明したように、Algolia の InstantSearch ライブラリを使用して検索結果にアクセスします。 以下に示すように、algolia_search_interface.libraries.yml ですべてのライブラリを宣言しましょう。

 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 }

変数へのアクセスと設定

デモ検索ブロック (DemoSearchBlock.php) では、Drupal 構成から Algolia 変数にアクセスし、次のコードを使用して drupalSettings に割り当てるだけです。

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

テンプレートを追加

ここで、カスタム ブロックのテンプレートを追加する必要があります。 それでは、algolia_search_interface.module でカスタム ブロックの hook_theme を定義しましょう。

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

コンテナを定義する

次に、検索結果をレンダリングするテンプレート データを定義しましょう。 InstantSearch ライブラリが結果をレンダリングするコンテナーを定義するだけです。 algolia_search_interface-block.html.twig に 4 つのコンテナーを追加します。

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

検索結果の表示

これで、検索結果を表示するために必要なすべての要素が揃いました。 それでは、InstantSearch を使用して結果を表示する方法を見てみましょう。

まず、drupalSettings 変数からインデックス名、アプリケーション ID、アプリケーション キーを取得します。 これらを algolia.js の Algolia API に渡す必要があります。

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

アプリケーション キーとインデックス名を配置したら、InstantSearch を初期化して開始する必要があります。

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

この時点では、InstantSearch にウィジェットを追加していないため、検索ページに違いは見られません。 それでは、クイック検索に検索ボックスウィジェットを追加しましょう。

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

InstantSearchのaddwidget()関数を使用して単一のウィジェットを追加したことに注意してください。 複数のウィジェットを使用する場合、 addwidget()は実行できません。 次の方法で使用する必要があります。

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

これで、検索ページに検索結果が表示されるようになります。 しかし、ご覧のとおり、結果は非常に生の形式です。

これを改良するために、以下に示すようにtemplate属性を使用して結果をフォーマットしましょう。

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

結果は問題ないように見えますが、ページに表示する前に、データに対して何らかの処理を行う必要がある場合があることに注意してください。 たとえば、上記のコードでは、URI 値は「public://」形式になっています。 ここで、 transformItems属性を使用して、要件に従って結果を変更できます。

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

結果セットが配置されたら、ファセット データの表示に移動して、検索条件をフィルター処理できます。 同じaddWidgets()関数を使用してファセットを表示します。

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

属性オプションは、ファセットを表示するフィールド名を定義します。 これも、Algolia ダッシュボードで事前に構成する必要があることに注意してください。

最後に、ページネーションを追加して、より多くの結果を表示できるようにしましょう。

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

これで完了です。 これは、最終的なコードがどのように見えるかです

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

最終的な考え

2 部構成の記事シリーズを締めくくるにあたり、Algolia について十分に理解していただけたことを願っています。 Algolia 検索を Drupal と統合して、強力なコンシューマー グレードの検索を構築する方法について説明しました。 また、InstantSearch ライブラリを使用して検索結果をカスタマイズすることについても説明しました。 最高の Web を活用しながら野心的な Drupal エクスペリエンスを構築するのに役立つ、100% Drupal に焦点を当てた会社をお探しですか? あなたからの御一報をお待ちしています！