Places widget with instant search

I’ve using algolia WordPress to search posts all of which contain latling information. As well as a normal search I am trying to add filter by distance using places.

I’ve worked out how to setqueryparameter around a latling that I add and I’ve added a places widget as per https://community.algolia.com/places/documentation.html#cdn-script

I can’t work out how to the the latling from the places widget into the main argument query, if someone wants to filter by distance.

The closest I’ve seen if from another formum post is

search.helper.setQueryParameter('aroundLatLng',helper.state.aroundLatLng);

Does anyone have any ideas about how I can do this?

Many thanks

Hi Mark,

You’re on the right track. There is more information about geo-search here which should be useful.

In order for us to better assist, could you share a bit more info on what you are specifically trying to accomplish, and what your code implementation currently looks like?

Best,
Sepehr

1 Like

Thankyou Sepehr

I have a test site at https://www.escistest.org/?s=school&dist=&loc=&submit=Search

I’ve added the code for the places widget:

And this is my code for instantsearch.js

What I want is that the normal state will just be an ordinary text search (ie no setQueryParameter)

Then if someone uses the places widget, I want the results to use their main text search e.g schools but around in order of distance from their location.

I am trying to work out how to get the latling from the places widget to change the query.

I hope this makes sense.

Many thanks

Mark

PS I couldn’t post the code directly.

Hi Mark,

Thanks for the clarifying info. I think it might be easiest to use a custom widget to implement this.

The custom widget will give you access to the helper instance inside both the init and render methods. You could therefore use the custom widget’s init method to register your placesAutocomplete event listener. When the onChange event fires, your listener’s callback could then trigger the setQueryParameter helper method, passing in the latlng from your Places widget.

Please let me know if this makes sense and if it was helpful in your implementation.

Best,
Sepehr

1 Like

Sorry to take a while to get back to you with this.

I’ve been working on it for a while and haven’t got any closer. Do you have an example I could look at, I am really close just missing how to at the init and onchange into a standard wordpress installation.

Any help would be appreciated. I’m a newbie but I have found the initial set up very easy.

I’ve attached an example of my places widget which is very similar to another example people were asking about.

Hi Mark,

The big thing to keep in mind with the custom widget instance methods are:

init(): called once after the initialization
render(): called every time we have new search data

In the docs, there is an “examples” tab you can click on to generally see how the code might look: https://community.algolia.com/instantsearch.js/documentation/#custom-widgets

In regards to your question:

Would it possible to describe where exactly you’re getting blocked? The more specifics, the better I can advise.

Best,
Sepehr