Como implementar o Algolia Search no Drupal 9 (Parte 2)

No capítulo anterior desta série, orientamos você no processo de configuração do painel Algolia e seu site Drupal para indexar o conteúdo do site no Algolia. Neste capítulo, você aprenderá como exibir os resultados de pesquisa do Algolia em seu site Drupal.

Para exibir o resultado da pesquisa, você precisará criar um bloco personalizado Drupal e colocar o bloco na página /search . Além disso, você descobrirá como usar a biblioteca InstantSearch da Algolia. Observe que esse processo pressupõe que você tenha um conhecimento básico de como criar módulos personalizados no Drupal, portanto, não nos aprofundaremos no processo de criação de módulos personalizados. Leia este artigo para saber como criar módulos personalizados programaticamente no Drupal 9.

Este é o segundo capítulo de um artigo da série de 2 partes. Clique aqui para ler a primeira parte onde falamos sobre como configurar Algolia e Drupal.

Criando um bloco personalizado para a interface

Usaremos a seguinte estrutura para criar nosso bloco personalizado.

 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

Declarando as Bibliotecas

Conforme explicado anteriormente, usaremos a biblioteca InstantSearch da Algolia para acessar os resultados da pesquisa. Então vamos declarar todas as bibliotecas em algolia_search_interface.libraries.yml como mostrado abaixo:

 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 }

Acessando e Configurando Variáveis

No bloco de pesquisa Demo (DemoSearchBlock.php)​​, vamos simplesmente acessar as variáveis ​​Algolia da configuração do Drupal e atribuí-las a drupalSettings usando o seguinte código:

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

Adicionar um modelo

Agora você precisará adicionar um modelo para o bloco personalizado. Então vamos definir o hook_theme para nosso bloco personalizado em algolia_search_interface.module:

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

Defina os contêineres

Agora, vamos definir nossos dados de modelo para renderizar os resultados da pesquisa. Simplesmente definiremos os contêineres onde a biblioteca InstantSearch renderizará os resultados. Vamos adicionar 4 containers em 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>

Exibindo os resultados da pesquisa

Agora você tem todos os ingredientes necessários para exibir seus resultados de pesquisa. Então, vamos dar uma olhada em como usar o InstantSearch para exibir nossos resultados.

Primeiro, vamos obter o nome do índice, o ID do aplicativo e a chave do aplicativo da variável drupalSettings. Precisamos que eles passem para nossa API Algolia em algolia.js.

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

Depois de ter as chaves do aplicativo e o nome do índice no lugar, você precisa inicializar e iniciar o InstantSearch.

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

Neste ponto, você não verá nenhuma diferença na página de pesquisa, pois não adicionou nenhum widget ao InstantSearch. Então, vamos adicionar um widget de caixa de pesquisa à pesquisa instantânea.

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

Observe que usamos a função addwidget() do InstantSearch para adicionar um único widget. Ao usar vários widgets, addwidget() não é viável. Você precisará usá-lo da seguinte maneira:

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

Agora você poderá ver os resultados da pesquisa em sua página de pesquisa. Mas como podemos ver, o resultado está em um formato muito bruto:

Para refinar isso, vamos formatar o resultado usando o atributo template conforme mostrado abaixo:

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

Observe que, embora o resultado pareça bom, às vezes precisamos fazer algum processamento nos dados antes de exibi-los na página. Por exemplo, no código acima, o valor do URI está no formato `public://` . Aqui podemos usar o atributo transformItems para alterar os resultados de acordo com nossos requisitos.

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

Uma vez que o conjunto de resultados esteja no lugar, agora você pode mover para exibir dados de facetas para filtrar nossos critérios de pesquisa. Você usará a mesma função addWidgets() para exibir facetas.

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

A opção attribute define o nome do campo no qual queremos exibir a faceta. Lembre-se que isso também precisa ser pré-configurado no painel Algolia.

Por fim, vamos adicionar paginação para permitir que mais resultados sejam exibidos.

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

E terminamos! É assim que o código final se parece

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

Pensamentos finais

Ao concluir nossa série de artigos em duas partes, esperamos que você tenha entendido o suficiente sobre Algolia. Abordamos como você pode integrar a pesquisa Algolia com Drupal para criar uma pesquisa poderosa e de nível de consumidor. Também discutimos o uso da biblioteca InstantSearch para personalizar os resultados da pesquisa. Procurando uma empresa 100% focada em Drupal que possa ajudá-lo a criar experiências ambiciosas em Drupal enquanto utiliza o melhor da web? Adoraríamos ouvir de você!