How to add smart search to Drupal Commerce

Prepare the catalog and code#

1. 1

   Connect your product feed in Indexa and wait for the catalog to load.

2. 2

   In “Widget → Integration”, enter the website URL and copy the universal code.

Add the search code to Drupal Commerce#

1. 1

   If your theme or a module provides a global head-code field, use it.

2. 2

   Otherwise, ask your maintainer to add the complete script before </head> in html.html.twig in your custom theme.

3. 3

   Back up the file and retain Drupal's existing placeholders and theme code. Do not replace the complete template with this fragment.

4. 4

   Apply the changes to the active theme and clear the Drupal cache.

Example for html.html.twig#

<head>
  <!-- Existing Drupal theme code and placeholders -->
  <script async src="INDEXA_LOADER_URL_FROM_DASHBOARD"></script>
</head>

Check search after installation#

Open your store, then use “Check installation” in Indexa. Select the desktop and mobile search elements and save.

Search for a product, follow its link and close the widget. Repeat on the home, category and product pages.

Drupal Commerce uses the Drupal site theme. Test search on product pages and after navigation, including dynamically updated pages.