Integrate the Algolia search into your Drupal website

Digital
Avatar
Author

A Strategic Step to Improve User Experience

In the realm of web development, ensuring a seamless user experience is paramount, especially for Drupal-powered websites. A crucial component that significantly enhances user interaction is an efficient, fast, and responsive search functionality. Algolia Search stands out as a superior choice over the default Drupal Search API, offering unmatched speed, precision, and a host of customizable features that can transform your site’s user experience.

Why Choose Algolia Search for Your Drupal Site?

Unmatched Speed and Performance: Algolia delivers near-instantaneous search results, crucial for maintaining user engagement in an era of short attention spans.

Superior Search Relevance and Precision: With advanced algorithms, Algolia ensures that search results are not only fast but also highly relevant, improving your site’s usability.

Real-Time Search Experience: Algolia’s “search-as-you-type” feature offers instant feedback, mirroring the responsiveness users expect from modern web applications.

Scalability and Reliability: Algolia’s infrastructure is built to handle growth effortlessly, ensuring your search functionality scales with your site without compromising performance.

Enhanced Customization and Control: With Algolia, you have extensive control over the search experience, from custom ranking formulas to personalized results based on user behavior.

Integrating Algolia Search into Your Drupal Website

The integration process involves several key steps, which we’ll detail below, including code examples and insights to facilitate a smooth setup.

Step 1: Sign Up for Algolia

Start by creating an Algolia account. Choose a plan that aligns with your site’s size and search needs, keeping in mind that Algolia offers a free tier for smaller projects.

Step 2: Create an Algolia application

To be able to send your data to Algolia, you need to Create An Application. Then you will be able to access all Api Keys.

Step 3: Install and enable Drupal Algolia Search Api module

To integrate Algolia’s capabilities into Drupal, you’ll need specific modules. The “Search API Algolia” module is a popular choice.

Install it using Composer:

composer require 'drupal/search_api_algolia:^3.0@beta'

Enable it using Drupal’s interface or Drush:

drush en search_api_algolia -y

Step 4: Create Algolia Server

Now you need to add server based on algolia with adding api keys provided in Step 2.
You will be asked to fill the asked to fill the Application ID and the api key, Fill them and save.


Step 5: Create Algolia Search Index
So far so good , now you are able to create an index related to your Algolia Server created previously. You can define which field need to be indexed, then you are ready and you could index it. Let’s create in our example an index called algolia_index.

Step 6: Create a Custom module providing a route for the frontend

Now it come last step to make the search available in frontend , we need to provide a route and template to show the search results. Let’s create a custom module called algolia_search.

algolia_search/gc_search.info.yml

name: Algolia Search
type: module
description: Provide custom functionalities for search using algolia
core_version_requirement: ^8 || ^9 || ^10
package: Custom
dependencies:
  - search_api
  - search_api_algolia

algolia_search/algolia_search.routing.yml

algolia_search.page:
  path: '/suche'
  defaults:
    _controller: '\Drupal\algolia_search\Controller\AlgoliaSearchController::content'
    _title: 'Suche'
  requirements:
    _permission: 'access content'

algolia_search/src/Controller/AlgoliaSearchController.php

<?php

namespace Drupal\algolia_search\Controller;

use Drupal\Core\Controller\ControllerBase;


/**
 * A Search controller.
 */
class AlgoliaSearchController extends ControllerBase {

  /**
   * Returns a render-able array for a search page.
   */
  public function content() {

    $config = \Drupal::config('search_api.index.algolia_index');

    $build = [
      '#theme' => 'algolia_search_app',
      '#context' => $config->get('options')['algolia_index_name'],
    ];


    return $build;
  }

}

algolia_search/src/Controller/AlgoliaSearchController.php

<?php

/**
 * Implements hook_theme().
 */
function algolia_search_theme($existing, $type, $theme, $path) {

    return [
        'algolia_search_app' => [
            'render element' => 'children',
            'template' => 'algolia-search-app',
            'variables' => [
                'context' => '',
            ],
            'path' => $path . '/templates',
        ],
    ];

}

algolia_search/templates/algolia-search-app.html.twig

<div class="search-app" data-context="{{ context }}"></div>

Step 7: Create your frontend application
Now we are able to use the class to render a frontend application, Algolia support a various javascript libraries like vue.js and react you can refer here : https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/ for starting point.


In our example we are going to add an example using vue.js. You can check all requirements to be installed for vue.js.
https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue/

You install the vue instant search plugin and modify the structure of your vue js application.

npm install algoliasearch vue-instantsearch


algolia_search/js/main.js

import InstantSearch from 'vue-instantsearch/vue3/es';

const apps = [...document.querySelectorAll(`.search-app`)]
if (apps.length) {
    let id = 0
    // eslint-disable-next-line no-inner-declarations
    async function importVue() {
        const Vue = await import(/* webpackChunkName: 'vue' */ `vue`)
        const { default: App } = await import(/* webpackChunkName: 'vue-search-app' */ `./app.vue`)

        return [
            Vue,
            App,
        ]
    }

    importVue().then(([Vue, App]) => {
        apps.forEach((app) => {
            const $el = $$(app)
            const index_name = $el.data(`context`)
            Vue.createApp(App, {
                index_name,
                id,
            }).use(VueObserveVisibility).use(InstantSearch).mount($el.selector)
        })
    })
}

algolia_search/js/app.vue

<template>
  <ais-instant-search
    :index-name=index_name
    :search-client="searchClient"
  >
  </ais-instant-search>
</template>

<script>
  export default {
    data() {
      return {
        searchClient: algoliasearch(
          'app-id',
          'api-key'
        ),
      };
    },
  };
</script>


Then we need to add the generated vue js file to library :
algolia_search/algolia_search.libraries.yml

vue-search:
  version: 1.x
  js:
    js/public/dist/app.js: { minified: true, preprocess: false, weight: -100000003 }
  dependencies:
    - core/drupal
    - core/drupalSettings

and modify the template to have this library attached and make frontend app able to run properly.
algolia_search/templates/algolia-search-app.html.twig

{{ attach_library('algolia_search/vue-search') }}
<div class="search-app" data-context="{{ context }}"></div>

Conclusion

Integrating Algolia Search into your Drupal website can significantly enhance the user experience by providing fast, relevant, and intuitive search functionality. The steps outlined above, complemented by code examples and configuration insights, provide a robust guide for leveraging Algolia’s powerful features. Remember, an efficient and user-friendly search function is crucial for retaining users and driving engagement on your digital platform.

Related Tags: