Algolia instantsearch.js URLs not working

The instantsearch.js URL generated after you filter into some facets returns a blank page.

It only works on the initial search. If you copy and paste the URL generated into a new tab, it doesn’t work at all… like this for example (https://chuubie.com/search?q=&hPP=12&idx=shopify_products&p=0&fR[named_tags.People][0]=Sagotsky&fR[named_tags.People][1]=Turtle%20Bugg&is_v=1)

Does anyone have a fix?

You have an error in your console. It seems like you’ve changed a template to remove the search box, which explains your issue.

What I’d recommend you to do if you haven’t done any modifications to our files would be to reinstall Algolia in your theme.

Based on @Jerska finding, I can tell you that when the query is not empty everything works properly (links and everything). When it is empty it doesn’t work and the error that @Jerska found only appears in this case.

As @Bobylito pointed out, this fails only with an empty query, it works as soon as you have a letter https://chuubie.com/search?q=a&hPP=12&idx=shopify_products&p=0&fR[named_tags.People][0]=Sagotsky&fR[named_tags.People][1]=Ben%20Gleitzman&is_v=1 .

My bet is that you have some liquid code that will display a different layout when the query is empty, and that the CSS selector you’ve used doesn’t match anything there.

Can you try with CSS selector: “.main-content” (without the quotes)?

Got it! Thank you @Jerska & @Bobylito!

For anyone reading this and modifying your #shopify theme, as addressed above your search template includes some conditions… including what to do if “no search is performed”, which interferes with Algolia.
See image:

So what I did was:

  1. I copied the original search.liquid into another file,

  2. Pared it down to this static code which you can copy and paste to use (I’m using the #VentureTheme in Shopify / this code will work for any theme on Timber Framework.) – that way we preserve some of the original page formatting,

    {{ 'general.search.title' | t }}

     <h2 class="h4 small--text-center">{{ 'general.search.products' | t }}</h2>
    
     <div class="grid grid--no-gutters grid--uniform">
       <div id="search-results">
       </div>
     </div>
    
  3. Created the custom div (as you see above in #2)
    <div id="search-results"></div>

  4. Set my Algolia settings to look for #search-results

and all the search URLs work again!

1 Like

Great summary, thanks a lot for this!

@work I’m super happy that you managed to fix your issue :smiley: and thanks for sharing back your findings :smiley: #community