Implement Predictive Search with Shopify Ajax API

simonski
Shopify Partner
145 11 55

Hey community,

 

as I'm pretty surprised there is obviously no good and easy to understand tutorial on how to implement predictive search with Shopify Ajax API (available since 06/2019), this should be a collection of ideas to support all of us in order to implement this smart search. 

Please post your knowledge here!

 

I start with these shopify links, which should give an overview. Unfortunately I don't understand where to implement what in order to get results and give it back to the search field.

 

https://shopify.dev/tutorials/add-predictive-search-to-your-shopify-theme#requesting-predictive-sear...

https://shopify.dev/docs/themes/ajax-api/reference/predictive-search

https://shopify.dev/docs/themes/ajax-api

https://shopify.dev/docs/themes/ajax-api/getting-started

 

Thank you all!!!

Simonski

Replies 8 (8)

simonski
Shopify Partner
145 11 55

I found an interesting tutorial about implementing jQuery in a shopify theme and how to make an ajax call, with an explanation where to paste code for what:

http://www.codeshopify.com/blog_posts/adding-to-cart-with-ajax

kichik
Visitor
2 0 0

Aren't there a few apps that already do this? Are they not good enough?

https://apps.shopify.com/search?q=predictive+search

simonski
Shopify Partner
145 11 55

Well, the reason of this thread is to implement this manually, and not to just pay 15 USD or more every month because there is no tutorial.

Once understood, I'm sure it's copy and paste code. What else should it be?

simonski
Shopify Partner
145 11 55

To start understanding how to work with Ajax, I found a very nice tutorial on how to implement an ajax shopping cart.

Maybe you want to try, the result is very nice and it's a start to understand how to implement a function in the Shopify Code:

 

https://code.tutsplus.com/tutorials/display-your-shopify-products-in-a-list-with-a-ajax-add-to-cart-...

simonski
Shopify Partner
145 11 55

Finally I got my first successful response of my JQuery. This was a hard fight.

I'm honestly disappointed of the shopify tutorials and the support here. I don't understand why you guys post a "tutorial" of the Predictive Search and API reference and tell people "Here you can implement Predictive Search, where it doesn't explain anything how to implement that. It would need just a few more explanations and code!!! I know I'm a beginner, but many of your customers are! And giving hope that it would be easy to implement Predictive Search without explaining how is not the way to do. 

I'm talking about this

https://shopify.dev/tutorials/add-predictive-search-to-your-shopify-theme

https://shopify.dev/docs/themes/ajax-api/reference/predictive-search

 

For all the others, not to go almost mad as I did:

In your theme.liquid file, just above your closing body tag </body>, paste this:

<script>
      var q = 'goki'
      var b = '&resources[type]=product'
      $.ajax('/search/suggest.json?q=' + q + b,{
        type: 'GET',
        dataType: 'json', // added data type
        success: function(response) {
            console.log(response);
          	var productSuggestions = response.resources.results.products;
          	if (productSuggestions.length > 0) {
    			var firstProductSuggestion = productSuggestions[0];
            	alert(firstProductSuggestion.body);
          	}
      	}
      });
</script>

If it's not working, check if your JQuery is loaded correctly:

<script> 
   if (window.jQuery) {  
        // jQuery is loaded  
        alert("Yeah!");
    } else {
        // jQuery is not loaded
        alert("Doesn't Work");
    }
</script>
Put all the scripts above your closing body tag.
MinuSak
Excursionist
28 0 9

Could you please help me with predictive search.

do we add only this code in theme.liquid file?

can you please explain. 

Thanks in advance 

BrianVPS
Excursionist
13 0 9

Thank you for taking some time and making an effort to bring information to the developers...at least you're trying...more than we can say for Shopify Plus Support 😕

Sadly, I'm still stuck.  I am trying to use the non-authenticated AJAX API to use the Predictive Search logic to get product information.  This does not appear to be working, and no one at Shopify wants to offer any help.

I have tried both with Postman and on a storefront page, neither return any results, however they DO return a valid 200 OK response.

https://mydomain.com/search/suggest.json?q=searchstring&resources[type]=product&options[unavailable_products]=show&options[fields]=title 

This returns the following:

{
    "resources": {
        "results": {
            "products": []
        }
    }
}

 

HOWEVER....

If I send the following URL instead, it returns an HTML document full of results:

https://mydomain.com/search?view=ajax&q=searchstring&options[prefix]=none&type=product

 So, clearly, there are results and it does work.  But either I'm doing something wrong or the JSON version is busted.

Anyone got any ideas?

 

nathanshanahan
Visitor
1 0 0

Found this tutorial to be helpful: https://www.youtube.com/watch?v=Eo-Id-mpRuM 

Uses theme predictive search shopify package which you can find by searching (not allowed to link it here even though its a shopify package?)  (/package/@shopify/theme-predictive-search) 
and pretty much covers all you'll need to do to implement a working example.