Algolia integration #490

amrutadotorg · 2024-07-07T22:04:59Z

amrutadotorg
Jul 7, 2024

Hi I was wondering how to implement Algolia search into SQLPage.

This code below provides a basic implementation of Algolia search in an HTML file. Here's a breakdown of what you need to do:

Replace 'YOUR_APP_ID' and 'YOUR_SEARCH_API_KEY' with your actual Algolia App ID and Search API Key.
Modify the 'YourIndexName' in the instantsearch configuration.

The search results will display the post title and excerpt.
This implementation uses Algolia's InstantSearch.js library, which provides a quick way to add search functionality to your web app.

To integrate this into your existing app:

Include the necessary Algolia scripts and CSS in your HTML file's section. (This we can do via the shell component)
Add the HTML elements (#searchbox and #hits) where you want the search interface to appear in your app.
Include the JavaScript code in a <script> tag at the end of your or in a separate JS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Algolia Search Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css">
</head>
<body>
    <div class="container">
        <h1>Algolia Search</h1>
        <div id="searchbox"></div>
        <div id="hits"></div>
    </div>

    <script>
        const searchClient = algoliasearch('YOUR_APP_ID', 'YOUR_SEARCH_API_KEY');

        const search = instantsearch({
            indexName: 'YourIndexName',
            searchClient,
        });

        search.addWidgets([
            instantsearch.widgets.searchBox({
                container: '#searchbox',
            }),

            instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                    item: (hit) => `
                        <div>
                            <h2>${instantsearch.highlight({ attribute: 'post_title', hit })}</h2>
                            <p>${instantsearch.highlight({ attribute: 'post_excerpt', hit })}</p>
                        </div>
                    `,
                },
            })
        ]);

        search.start();
    </script>
</body>
</html>

amrutadotorg · 2025-07-01T00:27:54Z

amrutadotorg
Jul 1, 2025
Author

just finished integration with Algolia, sharing sample code
algolia.sql

SET spoken_languages_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='meta.spoken_languages' AND language_code=$lang), 'Spoken Language');
SET content_language_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='search.text_language' AND language_code=$lang), 'Content Language');
SET live_translation_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='search.live_translation' AND language_code=$lang), 'Live Translation');
SET event_type_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='meta.category' AND language_code=$lang), 'Event Type');
SET transcript_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='meta.text_status' AND language_code=$lang), 'Transcript');
SET subtitles_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='search.subtitles' AND language_code=$lang), 'Subtitles');
SET location_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='meta.location' AND language_code=$lang), 'Location');
SET year_title = COALESCE((SELECT translation_value FROM language WHERE translation_key='table.date.header' AND language_code=$lang), 'Year');

SELECT
    'html' as component,
    '
    <div id="search-box" data-app-id="' || sqlpage.environment_variable('ALGOLIA_APP_ID') || '" data-search-key="' || sqlpage.environment_variable('ALGOLIA_SEARCH_KEY') || '" data-search-query="' || $search || '"></div>
    
    <!-- Clear filters button -->
    <div style="margin: 15px 0;">
        <div id="clear-filters"></div>
    </div>
    
    <!-- Filter containers -->
    <div style="display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;">
        <div style="min-width: 150px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $spoken_languages_title || '</h4>
            <div id="spoken-language-filter"></div>
        </div>
        
        <div style="min-width: 150px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $content_language_title || '</h4>
            <div id="content-language-filter"></div>
        </div>
        
        <div style="min-width: 150px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $live_translation_title || '</h4>
            <div id="live-translation-filter"></div>
        </div>
        
        <div style="min-width: 120px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $event_type_title || '</h4>
            <div id="recorded-event-filter"></div>
        </div>
        
        <div style="min-width: 150px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $transcript_title || '</h4>
            <div id="transcript-filter"></div>
        </div>
        
        <div style="min-width: 150px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $subtitles_title || '</h4>
            <div id="subtitles-filter"></div>
        </div>
        
        <div style="min-width: 200px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $location_title || '</h4>
            <div id="location-filter"></div>
        </div>
        
        <div style="min-width: 100px;">
            <h4 style="margin: 0 0 10px 0; font-size: 14px;">' || $year_title || '</h4>
            <div id="year-filter"></div>
        </div>
    </div>

    <!-- Results container -->
    <div id="hits"></div>
    
    <!-- Pagination -->
    <div id="pagination" style="margin: 20px 0;"></div>
    ' as html;

algolia.js:

// JavaScript part - updated to include showMore functionality
document.addEventListener('DOMContentLoaded', function() {
    const searchBox = document.getElementById('search-box');
    
    if (!searchBox) {
        console.log('No search box found - skipping search initialization');
        return;
    }
    
    console.log('Search box found, initializing search...');
    
    const appId = searchBox.dataset.appId;
    const searchKey = searchBox.dataset.searchKey;
    const searchQuery = searchBox.dataset.searchQuery;
    
    if (!appId || !searchKey) {
        console.error('Missing required data attributes (app-id or search-key)');
        return;
    }
    
    const searchClient = algoliasearch(appId, searchKey);
    
    const search = instantsearch({
        indexName: 'your_index_name',
        searchClient,
        initialUiState: {
            wp_angolia_searchable_posts: {
                query: searchQuery || '',
            },
        },
    });
    
    search.addWidgets([
        instantsearch.widgets.configure({
            numericFilters: ['lsy>0'],
            hitsPerPage: 10, // Set pagination size
        }),
        instantsearch.widgets.searchBox({
            container: '#search-box',
            placeholder: 'Search for ' + (searchQuery || 'content') + '...', 
        }),
        
        // Clear filters button
        instantsearch.widgets.clearRefinements({
            container: '#clear-filters',
            templates: {
                resetLabel: 'Clear all filters',
            },
        }),
        
        // Facet filters - with showMore functionality restored
        instantsearch.widgets.refinementList({
            container: '#spoken-language-filter',
            attribute: 'taxonomies.spoken-language',
            limit: 500, // Display all items
        }),
        
        // Content language filter using wpml.native_name
        instantsearch.widgets.refinementList({
            container: '#content-language-filter',
            attribute: 'wpml.native_name',
            limit: 5,
            showMore: true,
            showMoreLimit: 20,
        }),

        instantsearch.widgets.refinementList({
            container: '#live-translation-filter',
            attribute: 'taxonomies.live-translation',
            limit: 5,
            showMore: true,
            showMoreLimit: 15,
        }),
        
        instantsearch.widgets.refinementList({
            container: '#recorded-event-filter',
            attribute: 'taxonomies.recorded-event',
            limit: 5,
            showMore: true,
            showMoreLimit: 20,
        }),
        
        instantsearch.widgets.refinementList({
            container: '#transcript-filter',
            attribute: 'taxonomies.transcript-en',
            limit: 500, // Display all items
        }),
        
        instantsearch.widgets.refinementList({
            container: '#subtitles-filter',
            attribute: 'taxonomies.subtitles',
            limit: 5,
            showMore: true,
            showMoreLimit: 25,
            templates: {
                item(item, { html }) {
                    const languages = {
                        en: 'English', es: 'Español', de: 'Deutsch', fr: 'Français', ar: 'العربية',
                        bs: 'Bosanski', bg: 'Български', ca: 'Català', cs: 'Čeština', sla: 'Slavonic',
                        cy: 'Cymraeg', da: 'Dansk', el: 'Ελληνικά', eo: 'Esperanto', et: 'Eesti',
                        eu: 'Euskara', fa: 'فارسی', fi: 'Suomi', ga: 'Gaeilge', he: 'עברית',
                        iw: 'עברית', hi: 'हिन्दी', hr: 'Hrvatski', hu: 'Magyar', hy: 'Հայերén',
                        id: 'Bahasa Indonesia', is: 'Íslenska', it: 'Italiano', ja: '日本語', ko: '한국어',
                        ku: 'Kurdî', la: 'Latina', lv: 'Latviešu', lt: 'Lietuvių', mk: 'Македонски',
                        mt: 'Malti', mo: 'Moldovenească', mn: 'Монгол', ne: 'नेपाली', nl: 'Nederlands',
                        nb: 'Norsk Bokmål', pa: 'ਪੰਜਾਬੀ', pl: 'polski', pt: 'Português', qu: 'Runa Simi',
                        ro: 'Română', ru: 'Русский', sl: 'Slovenščina', so: 'Soomaali', sq: 'Shqip',
                        sr: 'Српски', sv: 'Svenska', ta: 'தமிழ்', th: 'ไทย', tr: 'Türkçe',
                        uk: 'Українська', ur: 'اردو', uz: 'O\'zbek', vi: 'Tiếng Việt', yi: 'ייִדיש',
                        zhHans: '简体中文', zu: 'isiZulu', zhHant: '繁體中文', ms: 'Bahasa Melayu',
                        mr: 'मराठी', sk: 'Slovenčina', te: 'తెలుగు', ep: 'English for Publishing'
                    };
                    const code = item.label.replace('CC ', '').toLowerCase();
                    const displayLabel = languages[code] || item.label; // Fallback to original label if not found

                    return html`
                        <label class="ais-RefinementList-label">
                            <input
                                type="checkbox"
                                class="ais-RefinementList-checkbox"
                                value="${item.value}"
                                ${item.isRefined ? 'checked' : ''}
                            />
                            <span class="ais-RefinementList-labelText">${displayLabel}</span>
                            <span class="ais-RefinementList-count">${item.count}</span>
                        </label>
                    `;
                },
            },
        }),
        
        instantsearch.widgets.hierarchicalMenu({
            container: '#location-filter',
            attributes: [
                'taxonomies_hierarchical.location.lvl0',
                'taxonomies_hierarchical.location.lvl1',
                'taxonomies_hierarchical.location.lvl2',
            ],
            limit: 5,
            showMore: true,
            showMoreLimit: 20,
        }),
        
        instantsearch.widgets.refinementList({
            container: '#year-filter',
            attribute: 'post_year',
            sortBy: ['name:desc'],
            limit: 5,
            showMore: true,
            showMoreLimit: 15,
        }),
        
        // Pagination widget
        instantsearch.widgets.pagination({
            container: '#pagination',
            padding: 2, // Show 2 pages on each side of current page
        }),
        
        instantsearch.widgets.hits({
            container: '#hits',
            templates: {
                item: function(hit, { html }) {
                    // Get current search query
                    const currentQuery = search.helper.state.query || searchQuery || '';
                    const encodedQuery = encodeURIComponent(currentQuery);
                    
                    // Get the formatted date
                    const postDate = hit.post_dates && hit.post_dates.d3 ? hit.post_dates.d3 : '';
                    
                    // Get thumbnail image
                    const thumbnailUrl = hit.images && hit.images.thumbnail && hit.images.thumbnail.url ? hit.images.thumbnail.url : '';
                    
                    return `
                        <div style="display: flex; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;">
                            ${thumbnailUrl ? `
                                <div style="flex-shrink: 0; margin-right: 15px;">
                                    <img src="${thumbnailUrl}" alt="Thumbnail" style="width: 120px; height: auto; border-radius: 4px;">
                                </div>
                            ` : ''}
                            <div style="flex-grow: 1;">
                                <div class="hit-name" style="margin-bottom: 8px;">
                                    <a href="https://learnsahajayoga.org/post?id=${hit.post_id}&highlight=${encodedQuery}" style="font-weight: bold; font-size: 16px; text-decoration: none;">
                                        ${hit._highlightResult.post_title.value}${postDate ? ' (' + postDate + ')' : ''}
                                    </a>
                                </div>
                                <div class="hit-description" style="margin-bottom: 5px;">
                                    <strong>Highlight:</strong> ${hit._highlightResult.content ? hit._highlightResult.content.value : 'No content highlight available'}
                                </div>
                                <div class="hit-snippet">
                                    <strong>Snippet:</strong> ${hit._snippetResult.content ? hit._snippetResult.content.value : 'No content snippet available'}
                                </div>
                            </div>
                        </div>
                    `;
                },
            },
        }),
    ]);
    
    search.start();
    console.log('Search initialized successfully');
});

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Algolia integration #490

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Algolia integration #490

Uh oh!

Uh oh!

amrutadotorg Jul 7, 2024

Replies: 1 comment

Uh oh!

Uh oh!

amrutadotorg Jul 1, 2025 Author

amrutadotorg
Jul 7, 2024

amrutadotorg
Jul 1, 2025
Author