Template Tags

The actual front-end implementation of Search Plus is relatively simple from the Craft perspective. There are just a few tags to worry about.

Most of the work isn't done here Remember, the actual search interactions aren't happening on the Craft install, but directly on the Algolia search servers. Our front-end tags here are just enough to connect to Algolia

Tags / Variables

craft.searchPlus.searchApiKey
The search api key for the currently connected Algolia account
craft.searchPlus.applicationId
The application id for the currently connected Algolia account
craft.searchPlus.index( handle ) eg: {{ craft.searchPlus.index('testindex') }}, required
The index name for the index with the matching handle.

Why not hardcode the index name? Hardcoding the index name will work (instead of using the index() method) but will limit you in the future when additional index features for multi-enviroment and per-index settings are enabled

Example Usage using the included SearchPlus.js

If you're using the included Search Plus js, you can set your api key, application id, and index name in the following way on your search form :

<form id="searchform"
         data-applicationId="{{ craft.searchPlus.applicationId }}"
         data-searchApiKey="{{ craft.searchPlus.searchApiKey }}"
         data-index="{{ craft.searchPlus.index('demo_products') }}">
    <input type="search" name="keywords" placeholder="Search.." value="" id="searchinput">
</form>

Example Usage using native AlgoliaSearch.js

Of course, you don't have to use our bundled js. For more direct control you might be using the algolia search js directly. In that case, the setup might be something like this : 

<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script>
  var client = algoliasearch('{{ craft.searchPlus.applicationId }}', '{{ craft.searchPlus.searchApiKey }}'); 
  var index = client.initIndex('{{ craft.searchPlus.index('demo_products') }}');
</script>