How to add another index in Algolia for Shopify's autocomplete

I’ve been asked on email support how to use an external source to display results, in this specific instance the index our Zendesk extension creates.

2 Likes

Resources

Process

Basically, you’ll have to:

  • Have a snippet for a result and a snippet when there’s no result.
    A good inspiration would be those two files:

    • ​snippets/algolia_autocomplete_article.hogan.liquid
    • snippets/algolia_autocomplete_articles_empty.hogan.liquid​​​​​
  • If you plan to add new files to match those, you’ll also need to add them inside the Algolia block in the layouts file you installed Algolia into (e.g. layouts/theme.liquid)

  • Modify the main JavaScript code​ in assets/algolia_autocomplete.js.liquid to add this external source. Things to likely change or look at:

    • the function autocompleteSection

    • the main algolia.autocomplete object

    • maybe the main template with parameter to add your new source too:

      ```js 
      with: {
        articles: autocomplete.articles.enabled,
        collections: autocomplete.collections.enabled,
        poweredBy: autocomplete.poweredBy,
        products: autocomplete.products.enabled
      }
      ```
      
    • the list of sources:

      ```js
      _.compact([
        autocompleteSection('collections'),
        autocompleteSection('articles'),
        autocompleteSection('products')
      ])
      ```
      
    • the autocomplete:selected event which handles the redirection to the page when a result is selected

  • ​Modify the main template of the autocomplete menu to include this new section in snippets/algolia_autocomplete.hogan.liquid

  • ​Finally, change the CSS to match your needs in snippets/algolia_autocomplete.css.hogan.liquid

This seems like a lot, but all of those are fairly small files to make it clearer to find what you want.​
If you’re stuck anywhere, please create a new post with a shopify tag, I’d be happy to help!