How to get routing integration with Instantsearch.js geosearch widget

I’m currently trying to use Algolia to replicate an existing search function we have using PostgreSQL. We are searching through a collection of products, able to refine by category, price and location. The results are displayed either in a grid view or on a Google map, and the location search can use either the user’s current location, the bounds of the map or a location typed in (using Google maps autocomplete to turn into coordinates).

So far I have managed to reimplement all the features of the existing search using Algolia’s instantsearch, although I had to create a custom geo search instantsearch widget for the mapping/gelocation part (partly due to the need to support searches that cross the 180th meridian).

However, there is one last feature that I am still struggling with. We would like all the search criteria to be reflected in the url, so that the user can navigate away and then return and have the same search re-run. I found the documentation on the routing infrastructure on the new version and have that mostly working for all the criteria except the geo search.

I know I have to implement this myself because it is a custom widget, but I haven’t been able to find any docs to help me figure out how. I created my custom widget by following the custom widget example in the guide which doesn’t include anything about the integration with the routing. And from this github issue it seems that the built in instantsearch geo search widget doesn’t do this either.

I have got it working halfway - I am able to take the geo search parameters and have them added to the URL, and I can parse them back out of the URL into a state object. But I can’t figure out how to get that state back into my custom widget, and then to set the searchParameters to use in the new search.

Are there any other docs elsewhere that I have overlooked that would help me with this implementation?
Or can someone point me to any code examples to see how it can be done?
I’m currently using instantsearch.js, but I’m open to using Vue or Angular if that would make this integration possible.

Hi @treehutvillage, first congrats because it seems like you went SUPER far in your InstantSearch integration and I would love to see it live/have a preview of it when ready or even today as it is.

Second, as for your issue, indeed we did not update the custom widget guide to include the new features of the routing system.

You can have a look at how other widgets are doing it here: https://github.com/algolia/instantsearch.js/blob/7cc82f215861ac8fbfd0c45837ea2bed133460ba/src/connectors/refinement-list/connectRefinementList.js#L400-L450

This is the RefinementList widget, you will see that this widget reads and modify a {state} property at different times to both read it from url, store it, remove it.

Let me know how it goes, good luck!

Thanks for your help with this!

That was the last bit of info I needed to get it all working together. I still need to refactor a little, but functionally it is all working and we are now live with Algolia search on https://www.treehutvillage.com.au/hire/baby-equipment.

1 Like

Really nice implementation, congrats!