Getting started with the Javascript API

Following the example, you have stated on your page, I tried to follow but kept getting the following error, see screenshot attached and code so far. Pleas assist.

/** Algolia JS **/

import algoliasearch from ‘algoliasearch/lite’;
import instantsearch from ‘instantsearch.js’;
// import {
// searchBox,
// hits
// } from ‘instantsearch.js/es/widgets’;

const client = algoliasearch(‘O966BSY3LD’, ‘withheld’);

const index = client.initIndex(‘TheContacts’);
const contactsJSON = require(’…/json/contacts.json’);

index.saveObjects(contactsJSON, {
autoGenerateObjectIDIfNotExist: true
}).then(({ objectIDs }) => {
console.log(objectIDs);
});

index.setSettings({
‘customRanking’: [‘desc(followers)’]
}).then(() => {
// done
});

index.setSettings({
searchableAttributes: [
‘lastname’,
‘firstname’,
‘company’,
‘email’,
‘city’,
‘address’
]
}).then(() => {
// done
});

// Search for a first name
index.search(‘jimmie’).then(({ hits }) => {
console.log(hits);
});

// Search for a first name with typo
index.search(‘jimie’).then(({ hits }) => {
console.log(hits);
});

// Search for a company
index.search(‘california paint’).then(({ hits }) => {
console.log(hits);
});

// Search for a first name and a company
index.search(‘jimmie paint’).then(({ hits }) => {
console.log(hits);
});

search.addWidgets([
instantsearch.widgets.configure({
hitsPerPage: 10
})
]);

search.addWidgets([
instantsearch.widgets.searchBox({
container: “#search-box”,
placeholder: ‘Search for contacts’
}),
]);

search.addWidgets([
instantsearch.widgets.hits({
container: “#hits”,
templates: {
item: document.getElementById(‘hit-template’).innerHTML,
empty: We didn't find any results for the search <em>"{{query}}</em?>
}
})
]);

search.start();

HI @jgacuca,

It appears you are using algoliasearch/lite which is for search only. You will need to use the default version as seen in our docs here.

Hi, @cindy.cullen, I was able to partially get it to work, however, I would like to know how to install widgets, because I keep getting the error. See the screenshot attached.

It seems like you instantiate the widgets with instantsearcch.widgets.searchBox() instead of searchBox() (available from your import).

@cindy.cullen @francoischalifour, this is not working, what am I doing wrong, I have reattached my whole file as-is.

/** Algolia JS **/
import algoliasearch from 'algoliasearch';

/** InstantsearchJS */
import instantsearch from 'instantsearch.js';
//import instantsearchcss from 'instantsearch.css/themes/algolia-min.css';

/** Instantsearch JS Widgets */
import { searchBox } from 'instantsearch.js/es/widgets';
import { hits } from 'instantsearch.js/es/widgets';

// Replace with your own values
const searchClient = algoliasearch(
    'hidden',
    'hidden' // search only API key, not admin API key
);

const search = instantsearch({
    indexName: 'TheContacts',
    searchClient,
    routing: true,
});

search.addWidgets([
    instantsearch.widgets.configure({
        hitsPerPage: 10
    })
]);

search.addWidgets([
    instantsearch.widgets.searchBox({
        container: '#search-box',
        placeholder: 'Search for contacts',
    })
]);

search.addWidgets([
    instantsearch.widgets.hits({
        container: '#hits',
        templates: {
            item: document.getElementById('hit-template').innerHTML,
            empty: `We didn't find any results for the search <em>"{{query}}"</em>`,
        },
    })
]);

search.start();

What is the right way to import widgets?

The way you import widgets is correct, but not the way you use them:

search.addWidgets([
    configure({
        hitsPerPage: 10
    }),
    searchBox({
        container: '#search-box',
        placeholder: 'Search for contacts',
    }),
    hits({
        container: '#hits',
        templates: {
            item: document.getElementById('hit-template').innerHTML,
            empty: `We didn't find any results for the search <em>"{{query}}"</em>`,
        },
    })
]);

Notice that we don’t use instantsearch.widgets.

@francoischalifour I am following the example given from your link - https://www.algolia.com/doc/integration/wordpress/search/building-search-ui/?language=php and it shows using instantsearch.widgets

Hello @jgacuca ,
When you import InstantSearch.js like

<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js" integrity="sha256-6S7q0JJs/Kx4kb/fv0oMjS855QTz5Rc2hh9AkIUjUsk=" crossorigin="anonymous"></script>

Then, you need to access widgets via instantsearch.widgets.xxx, but when you import widgets like

import { searchBox } from 'instantsearch.js/es/widgets';

you just use searchBox without the prefix.

You can check this example.

@francoischalifour @eunjae.lee, the. demo works however when testing locally, I keep getting the instantsearch widgets are not available for the ES Build. I am currently using webpack and the import function. Is this the right way to set it up locally?