Import Hosted Search Experience Into Drupal

Updated

Import a Hosted Search Experience from SearchStax Site Search into your Drupal site. You'll create a custom Drupal module to do this.

Prerequisites

Before you start, you'll need:

  • A Drupal site (version 8 or higher)
  • Access to your Drupal file system
  • A SearchStax Site Search account with a configured search app
  • Basic understanding of Drupal module development
  • Drush command-line tool installed (used to clear Drupal cache)

Step 1: Create and Enable a Custom Module for SearchStax Site Search

  1. Go to web/modules.
  2. Create a new folder called custom.
  3. Create a folder called sitesearch in the web/modules/custom folder.

  4. Create a new file in this folder called sitesearch.info.yml with the following content:

    name: SearchStax Site Search
description: Custom module for SearchStax Site Search Hosted Search Experience
type: module
core_version_requirement: ^8 || ^9 || ^10 || ^11 || ^12
  5. Go to the admin panel of your Drupal site and click Extend.
  6. Find the Sitesearch module, select it, and click Install.

Step 2: Create a Route and a Controller

  1. Create a new file called sitesearch.routing.yml in web/modules/custom/sitesearch.

  2. Define your path and controller class name in this file, with proper indents and case-sensitive names:

    sitesearch.search_page:
  path: '/home/sitesearch'
  defaults:
    _controller: '\Drupal\sitesearch\Controller\SitesearchController::searchPage'
  requirements:
    _permission: 'access content'
  3. Create a folder called src in web/modules/custom/sitesearch.
  4. Create a folder called Controller in web/modules/custom/sitesearch/src.

  5. Create a controller file with the same name as the one defined in the route (SitesearchController.php):

     'sitesearch',
    ];
  }
}

Step 3: Create a Twig Template

  1. Create a module file in web/modules/custom/sitesearch named sitesearch.module.

  2. You need to implement the hook_theme method in this file:

     [
      'render element' => 'children',
      'template' => 'sitesearch',
      'path' => $path . '/templates'
    ],
  ];
}
  3. Create a templates folder in web/modules/custom/sitesearch.
  4. Create a file in the templates folder that will host the search page code: sitesearch.html.twig.

  5. Enter some demo text in it to test:

    Site Search page
Hello!

Step 4: Inject Site Search Libraries

  1. Create a file called sitesearch.libraries.yml in web/modules/custom/sitesearch.

  2. Define Site Search JS libraries in this file:

    sitesearch-app:
  header: true
  version: 4.0
  js:
    https://static.searchstax.com/studio-js/v4.1.9/js/feedbackWidget.mjs: {
      external: true,
      attributes: {
        defer: true,
        async: true } }
    https://static.searchstax.com/studio-js/v4.1.9/js/search-ux.js: {
      external: true,
      attributes: {
        defer: true,
        async: true } }
  css:
    theme:
      https://static.searchstax.com/studio-js/v4.1.9/css/search-ux.css: {
        external: true, attributes: { defer: true, async: true } }
      https://static.searchstax.com/studio-js/v4.1.9/css/feedbackWidget.css: {
        external: true, attributes: { defer: true, async: true } }
  3. You can get the latest version number from the Site Search changelog.

  4. Go to the sitesearch.module file. Add the following preprocess hook to load the libraries:

    /**
 * Implements hook_preprocess_page()
 */
function sitesearch_preprocess_page(&$variables) {
  $variables['#attached']['library'][] =
    'sitesearch/sitesearch-app';
}
  5. Your folder structure will look like this at this point:
    Drupal sitesearch module folder structure with templates, controllers, and configuration files

Step 5: Clear the Cache and Test

  1. You can either clear the cache through the Drupal admin panel or by running the following commands:

    drush cc theme-registry && drush cc router && drush cr
  2. Now, go to the /home/sitesearch page, and you'll see the empty page that was created earlier.

Step 6: Get the Template Code from Site Search

Now you can get the search page code from SearchStax Site Search and paste it into the twig template.

  1. Log into the SearchStax Site Search dashboard.
  2. Select the Account App.
  3. Go to Hosted Search Experience under Search UI on the left, and click View.
    SearchStax Site Search Hosted Search Experience screen with View button to access a sharable search page..
  4. Right-click and select View page source.
  5. Copy everything into the twig file created above.
  6. Escape the double curly brackets so Twig doesn't treat them as variable syntax:
    • Replace all {{ with {{ '{{
    • Replace all }} with }}' }}

  7. All the variables will now look like this:

    "{{'{{ searchStore.searchTerm }}'}}"
  8. Clear the cache and open the search page.

You now have a fully working search page in Drupal. Customize the page to match your site's design and requirements.

Next Steps

Now that you've imported your Hosted Search Experience, here are some helpful resources:

Articles in this section