algolia.js

module.exports = function () {
    var $ = require('jquery');

    $(function() {
        if($('.search-results #algolia-search-box').length > 0) {

            if (algolia.indices.searchable_posts === undefined && $('.admin-bar').length > 0) {
                alert('It looks like you haven\'t indexed the searchable posts index. Please head to the Indexing page of the Algolia Search plugin and index it.');
            }

            /* Instantiate instantsearch.js */
            var search = instantsearch({
                indexName: 'wp_searchable_posts_n2o',
                searchClient: algoliasearch( algolia.application_id, algolia.search_api_key ),
                routing: {
                    router: instantsearch.routers.history({ writeDelay: 1000 }),
                    stateMapping: {
                        stateToRoute( indexUiState ) {
                            return {
                                s: indexUiState[ 'wp_searchable_posts_n2o' ].query,
                                page: indexUiState[ 'wp_searchable_posts_n2o' ].page
                            }
                        },
                        routeToState( routeState ) {
                            const indexUiState = {};
                            indexUiState[ 'wp_searchable_posts_n2o' ] = {
                                query: routeState.s,
                                page: routeState.page
                            };
                            return indexUiState;
                        }
                    }
                }
            });

            // Reuse
            const noResultsTemplate = `
            <div class="col-xs-12">
                <div class="no-results">
                Sorry, we didn't find any results for "<span class="bold">{{query}}</span>"
                    <div class="col-xs-12 heading">Tips:</div>
                    <div class="col-xs-12">
                        <ul>
                            <li>Double-check your spelling</li>
                            <li>Try searching for a term that is less specific</li>
                            <li>Use different keywords</li>
                        </ul>
                        <div class="col-xs-12 col-lg-6 text-center">
                            <a href="javascript:void(0);" class="btn outline ais-clear-all--link">Clear Search</a>
                        </div>
                    </div>
                </div>
            </div>
            `

            const itemMarkup = `
                        <a class="{{cssClasses.link}}" href="{{url}}">
                            <span class="{{cssClasses.label}}">{{label}}</span>
                            <span class="{{cssClasses.count}}">
                            ({{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}})
                            </span>
                        </a>
                        `

            search.addWidgets([

                /* Search box widget */
                instantsearch.widgets.searchBox({
                    container: '#algolia-search-box',
                    placeholder: 'Search...',
                    showReset: true,
                    showSubmit: false,
                    showLoadingIndicator: false,
                    wrapInput: false,
                    cssClasses: {
                        resetIcon: [
                            'ais-clear-all--link'
                        ]
                    }
                }),

                /* Reset Refinements */
                instantsearch.widgets.clearRefinements({
                    container: '#clear-refinements',
                    templates: {
                        resetLabel: 'Clear Selections',
                    },
                    cssClasses: {
                        root: 'clearSelections',
                        button: [
                          'cta load-more-button',
                        ],
                      },
                }),

                /* Stats widget */
                instantsearch.widgets.stats({
                    container: '#algolia-stats',
                    autoHideContainer: true
                }),

                /* Hits widget */
                instantsearch.widgets.hits({
                    container: '#algolia-hits',
                    hitsPerPage: 20,
                    templates: {
                        empty: noResultsTemplate,
                        item: wp.template('instantsearch-hit')
                    }
                }),

                /* Pagination widget */
                instantsearch.widgets.pagination({
                    container: '#algolia-pagination'
                }),

                /* Facet: Genre */
                instantsearch.widgets.menu({
                    container: '#facet-genre',
                    attribute: 'taxonomies.genre',
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                    limit: 30,
                    templates: {
                        item: itemMarkup
                    }
                }),

                /* Facet: Industry */
                instantsearch.widgets.menu({
                    container: '#facet-industry',
                    attribute: 'taxonomies.industry',
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                    limit: 30,
                    templates: {
                        item: itemMarkup
                    }
                }),
                /* Facet: Primary Topic */
                instantsearch.widgets.menu({
                    container: '#facet-primary-topic',
                    attribute: 'taxonomies.primary_topic',
                    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
                    limit: 30,
                    templates: {
                        item: itemMarkup
                    }
                }),
                /* Facet based on child indicies: Sort By */
                instantsearch.widgets.sortBy({
                    container: '#sort-by-container',
                    items: [
                        {value: 'wp_searchable_posts_n2o', label: 'Newest to Oldest'},
                        {value: 'wp_searchable_posts', label: 'Most Relevant'}
                    ]
                }),
            ]);

            /* Start */
            search.start();

            $( '#algolia-search-box input' ).attr( 'type', 'search' ).trigger( 'select' );

            let toggles = document.querySelectorAll('[data-facet-toggle]')

            function toggleFacet(e){
                e.preventDefault();
                if(this.querySelector('.ais-body')){
                this.classList.toggle('active');
                }
            }

            toggles.forEach(function(el){
                el.addEventListener('click', toggleFacet);
            });
        }
    });
};