Popup menu don't work when you reload after search

I found this issue when I try to search then reload and clicking menu don’t work. And I got this error in console which is Algolia related error:

Uncaught Error: Syntax error, unrecognized expression: [href=#q=Hva%20s%C3%B8ker%20du%20etter&idx=magento1_default_products&is_v=1]
at Function.m.error (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11914)
at Function.m.filter (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11914)
at m (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11914)
at Function.m [as find] (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11914)
at init.find (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11914)
at HTMLUListElement. (3563372b4dc1ffdad457c90b45432354.js?t1578478812:28158)
at Function.each (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11913)
at init.each (3563372b4dc1ffdad457c90b45432354.js?t1578478812:11913)
at init.mobilemenu (3563372b4dc1ffdad457c90b45432354.js?t1578478812:28116)
at HTMLDocument. (3563372b4dc1ffdad457c90b45432354.js?t1578478812:28194)

Please help. Thanks!

Hi @nino.riconalla, Do you have a link to a website where this is happening? If so, can you provide the exact steps to duplicate this issue on that website?

Hello @cindy.cullen, Thank you for your response. Here is how to reproduce the issue.

  1. Go to https://seatronic.no
  2. Type in the search box and then algolia search overlay will show up for the results.
  3. Reload the page and then click the menu like “Velg vare”,“Velg merke”,etc.

Expected result:
Menu should work fine.

Result:
Menu not working.

Can you check please?

Thanks!

Hi @nino.riconalla, Have you made any customizations to the instantSearch with the routing? It appears that some of the URL is being left out which is causing the javascript error. If you’ve made customizations, could you provide a codesandbox that demonstrates the issue? We have some starter templates here.

Hey @cindy.cullen. I am using this module for Magento 1: https://marketplace.magento.com/algolia-algoliasearch.html

And here is the sandbox for the JS files: https://codesandbox.io/s/m1-algoliasearch-js-ektuw

I added some js file for the empty result page using jQuery. Can you check what causes the issue?

Thank you!

Hi,

I’ve looked at the error, it looks like there is a conflict between InstantSearch.js and another third party library. Internally we’ve an URLSync feature that leverages the hash to store the URL. The hash isn’t the only possibilities, query parameters are also an option. I’ve tried on your website it looks like it’s working.

You can configure the URLSync to use query parameters rather than hash with the option useHash: false. With Magento an extra step is required to configure the option. You have to use the hook called beforeInstantsearchInit to craft the options and return them. Here is an example:

algolia.registerHook('beforeInstantsearchInit', function(instantsearchOptions) {
  instantsearchOptions.urlSync.useHash = false;

  return instantsearchOptions;
});

Hope that helps!

I saw this in instantsearch.js file.

var instantsearchOptions = {
			appId: algoliaConfig.applicationId,
			apiKey: algoliaConfig.instant.apiKey,
			indexName: algoliaConfig.indexName + '_products',
			urlSync: {
				useHash: true,
				trackedParameters: algoliaConfig.urlTrackedParameters
			},
			searchParameters: {
				hitsPerPage: algoliaConfig.hitsPerPage,
				ruleContexts: ['magento_filters', ''] // Empty context to keep BC for already create rules in dashboard
			}
		};

I just replace “useHash” from “true” to “false” and it works.

Thank you very much!