Update browser URL with search parameters in WordPress (urlSync / routing)

I am using your WordPress plugin to display my search and I want the browser URL to update based on the current search (refinements, search keywords, etc).

This allows you to use the next/back browser buttons and also share entire searches by copying the browser URL.

After digging around I found out that previously I could activate this with urlSync, mapping, and trackedParameters. But you have discontinued using those and have replaced them with routing and stateMapping.

Unfortunately, your WordPress plugin has not been updated to reflect this change, which is why the browser URL was not updating based on the search parameters.

Here is the instantsearch.js that you are using inside the instantsearch.php template of your WordPress plugin.

/* Instantiate instantsearch.js */
var search = instantsearch({
	appId: algolia.application_id,
	apiKey: algolia.search_api_key,
	indexName: algolia.indices.searchable_posts.name,
	urlSync: {
		mapping: {'q': 's'},
		trackedParameters: ['query']
		},
	searchParameters: {
	facetingAfterDistinct: true,
	highlightPreTag: '__ais-highlight__',
	highlightPostTag: '__/ais-highlight__'
}
});

How can I change this so it uses routing and stateMapping to update the browser URL based on the current search parameters?

Just wondering if anyone has an update for this?

I can’t get it working :frowning:

Seems like the plugin needs to be updated for the new URL routing you are using.

Hey there,

The wordpress plugin has not been updated to InstantSearch.js v2. Therefore, the urlSync option is still the way to go.

Maybe I missed something, could you send us a link to the page where we can see the issue?

Cheers,

Hi @Bobylito,

Thanks for the help and the info, but now I’m even more confused why my URL is not updating.

The only thing that changes is is_v=1 which appears on the first filter or search. Nothing else in the URL updates after that. It just always shows is_v=1 and nothing else, no matter what is searched or refined.

Here is a live link. The page design is still under development so it looks horrible, but you can click around and see the problem with the URL not updating.

http://datafreedoms.com/?s=

I’ve tested on firefox and chrome, it seems to work as expected which is:

  • when I update the query in the search box, the url parameter s is updated with the value after a short delay
  • when refining anything else, the url does not update

Which browser are you testing with?

Oh I see. I have same result as you (on both Firefox and Chrome) but I thought the refinements would also show in the URL, that’s why I thought it was broken.

The site is going to be a list of products which people can filter down. So I’m primarily using the filters, and text search will be a much smaller part.

How can I get the refinements to update the URL also?

This is controlled using the trackedParameters. If you want to add all the refinements, you can add attribute:*. If you want only specific ones you can replace the * with the facet / attribute.

Let me add the meaningful piece of doc for trackedParameters (which is not linkable):

Parameters that will be synchronized in the URL. Default value is [‘query’, 'attribute:’, ‘index’, ‘page’, ‘hitsPerPage’]. attribute: means all the faceting attributes will be tracked. You can track only some of them by using […, ‘attribute:color’, ‘attribute:categories’]. All other possible values are all the attributes of the Helper SearchParameters. There’s a special is_v parameter that will get added everytime, it tracks the version of instantsearch.js linked to the url.

Source: https://community.algolia.com/instantsearch.js/v1/documentation/

Hope this helps.

Thanks that’s working now!

Although, the URL could do with some tidying up to make it human readable.

Here is an example search URL: http://datafreedoms.com/?s=&fR[taxonomies.feature][0]=Kill%20Switch&fR[taxonomies.speed_test][0]=anonymous-payment&fR[taxonomies.speed_test][1]=safe-company-location&is_v=1

So for instance, how do I change the &fR[taxtonomies.speed_test][0]=anonymous-payment into something cleaner like &speed_test=anonymous-payment?