Algolia Settings

Algolia Install

Single click installation of the Algolia node modules. This will install the latest versions of Algolia search from Github

Algolia Setup

Create an Algolia account and copy your application ID, admin API key and index name into YouDoCMS settings - search. In addition for compatibility with JSON-LD structured data include the URL of your target search page. This can be any page that includes the search input box. Test your settings and if okay create the index.

Algolia Index

The simplest way to implement Algolia is the start with an existing page that shows a list from a blog or a category. Using a listing page as a template follow the instructions below to create a version of the page which incorporates Algolia search.

Template Search Box

The simplest way to implement Algolia is the start with an existing page that shows a list from a blog or a category. Using a listing page as a template follow the instructions below to create a version of the page. Algolia instant search hooks require 2 empty div's within your template to insert the search results and paginate. Plus we also need the ID of the div to insert the search box. From your existing html copy the divs for the search box. In our example The Algolia instant search box replaces the content inside the <form> tag. In the search.js file we include the  classes from the div we have replaced.

          <aside class="col-lg-4 sidebar"> <!-- The div from your existing HTML search box -->
            <form class="search-form">
              <div class="form-floating mb-0">
                <input id="search-form" type="text" class="form-control" placeholder="Search">
                <label for="search-form">Search</label>
              </div>
            </form>
            <!-- /.search-form -->
          </aside>

Replace with 

              <aside class="col-lg-4 sidebar">
                  
                      <div id="search-form">
                          <!-- agoloia box here -->                            
                      </div>
                  
                  <!-- /.search-form -->
              </aside>

Copy the classes above to the search.js file

cssClasses: {
            root: 'form-floating mb-0',  // the class of the root div you are replacing
            form: [
                'search-form',                // the class of the form element
            ],
            input: [
                'form-control',            // the class for the search input box
            ]
        }

Template Search Results

To include the search results you need to embed to div's where the IDs match those in the search.js file. In this case we are using #hitlist for the results and #pagination. Place the div's where you would like the search results to appear in the page.

<div class="col-xl-10 order-xl-2">

          <div id="hitlist"></div>  <!-- div to insert search results -->   
          <div id="pagination"></div> <!--  div for pagination of results -->

          <!--#4DHTML page_o.category.description-->  

Search JavaScript

To enable Algolia search on the site you need to create an include a JavaScript file. This is quite straightforward please see the example below which you can copy and paste after updating your API key.

const searchClient = algoliasearch('YOUR APPLICATION ID', 'YOUR PUBLIC KEY');

const search = instantsearch({
    indexName: 'youdocms',
    routing: true,
    searchClient,
    searchFunction(helper) {

        const container = document.querySelector('#hitlist');
        const article = document.querySelector('#articles');

        container.style.display = helper.state.query === '' ? 'none' : '';
        article.style.display = helper.state.query === '' ? 'block' : '';
        
        article.style.display = helper.state.query  ? 'none' : '';

            helper.search();

    },

});

search.addWidgets([
    instantsearch.widgets.searchBox({
        container: '#search-form',
        placeholder: 'Search',
        showReset: false,
        showSubmit: false,
        cssClasses: {
            root: 'form-floating mb-0',
            form: [
                'search-form',
            ],
            input: [
                'form-control',
            ]
        }
    }),

    instantsearch.widgets.hits({
        container: '#hitlist',
        templates: {
            empty: 'No results for <q>{{ query }}</q>',
            /*  item:document.getElementById('test123').style.display = 'none', */
            item: `
            <article class="item post">
            <div class="card">
                <div class="card-body">
                    <div class="post-header">
                        <div class="post-category text-line">
                            <a href="#" class="hover" rel="category">
                                <!--#4DTEXT page_o.category.title--></a>
                        </div>
                        <!-- /.post-category -->
                        <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark"
                            href="{{path}}">
                            {{title}}</a></h2>
                    </div>
                    <!-- /.post-header -->
                    <div class="post-content">
                        {{ metadesc }}
                    </div>
                    <!-- /.post-content -->
                </div>
                <!--/.card-body -->
                <div class="card-footer">
                    <ul class="post-meta d-flex mb-0">
                        <li class="post-date"><i class="uil uil-calendar-alt"></i><span>
                                <!--#4DTEXT $post.publish_up--></span></li>
                        <li class="post-comments"><a href="#"><i
                                    class="uil uil-comment"></i>4</a></li>
                        <li class="post-likes ms-auto"><a href="#"><i
                                    class="uil uil-heart-alt"></i>5</a></li>
                    </ul>
                    <!-- /.post-meta -->
                </div>
                <!-- /.card-footer -->
            </div>
            <!-- /.card -->
        </article>
            `,
            submit: 'submit',
        },
    }),
]);

search.start();