Instant Search Work after refreshing Page

I am Working in a Shopify Store, Search is Working Correctly when when we put Query in Search Box but after that when we go to any other page, put query in Search box its not showing drop down results. but when we refresh page again with Ctrl+f5, its working again. How can i solve it?

Hi,

Would you mind giving here the link of your website ?

My first guess would be that when you change page, the instantsearch is not initiated. Looking at the console in developer tool should be helpful !

[I don’t work @Algolia]

Thanks Brother for replying me Quickly.
We are using Shopify Turbo Theme.
I just debug complete Situation, Algolia Search Only work when we do it Ctrl+F5.
The Problem is that, Algolia files not start automatically on all pages.
I am trying to remove password from store but i need my boss permission first.
Any help, any suggestion.

Thanks a lot @pierre.aurele.martin for jumping in here!
If you can share your storefront password publicly or remove it during the time of the investigation, this would indeed be perfect!

Otherwise, if you don’t want to share the storefront password publicly, you can also send an email to support@algolia.com with a link to this topic and the password. :slight_smile:

Here is the Store link


storefront password is: yawshu
Check this please

I don’t know Shopify enough but there is a lot of errors in the console…

On first load (search functionning), Algolia try to load on jQuery($) and underscore(_). Can’t you deactivate underscore ? Cause it seems that only jQuery is used in the end…

But, when you change page, we don’t get always those errors anymore. It’s like some other $ errors are blocking further JS execution including algolia init.

I don’t know how that’s possible in Shopify but my first try would be to :

  • use document ready instead of (function(){my_init…())()); to be sure everything is loaded before executing ;
  • put all JS loader at the end of the body instead of the beginning to be sure you don’t bind events on DOM that’s not existing yet…

But again, never used Shopify so @Jerska will be more helpful !

PS : It seems also that a lot of xhr GET call fails when you put your mouse on a product miniature. Might be worth a fix even if it doesn’t seems related.

1 Like

I think the main issue here is that Algolia is called in two places.

Actually, all of your recommendations are definitely relevant @pierre.aurele.martin , but are concerning the code we’re providing with our Shopify integration.

  • The reason why the code is in the head is that all other Shopify scripts are loaded in the head and was hence easier to localize for users.
  • Also, we’re using lodash (_) in quite a few places in our code, hence its loading. With ES6 being more and more generalized, I’m thinking about removing it pretty soon.
  • Finally, DOM loading is handled, but only where relevant. We use .ready() before actually loading the autocomplete and the instantsearch.

The XHR issue on mousehover is indeed something worth investigating. :slight_smile:

@chabdulrehman4u , Could you:

  1. Create a new copy of your main theme (which doesn’t have Algolia) and use this one live
  2. Use the “Install in a new theme” function in our app for this new theme
  3. Tell us when you’ve done that?
1 Like