Implement Predictive Search with Shopify Ajax API

Highlighted
Explorer
80 7 14

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

0 Likes
Highlighted
Explorer
80 7 14

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

0 Likes
Highlighted
New Member
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

0 Likes
Highlighted
Explorer
80 7 14

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?

0 Likes
Highlighted
Explorer
80 7 14

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-...

0 Likes
Highlighted
Explorer
80 7 14

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.
1 Like