All things Shopify and commerce
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/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
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
Aren't there a few apps that already do this? Are they not good enough?
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?
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:
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>
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
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?
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024