Predictive search API

Highlighted
Excursionist
78 7 12

Dear community,

I hope someone can help me here how to start with implementing the predictive search.

I'm not sure how and where to implement the JQuery call. I use minimal theme, the code in my search-bar.liquid looks like this

{% if search-bar == 'header' %}
  <form action="{{ routes.search_url }}" method="get" class="header-bar__search-form clearfix" role="search">
    {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
    <button type="submit" class="btn btn--search icon-fallback-text header-bar__search-submit">
      <span class="icon icon-search" aria-hidden="true"></span>
      <span class="fallback-text">{{ 'general.search.submit' | t }}</span>
    </button>
    <input type="search" name="q" value="{{ search.terms | escape }}" aria-label="{{ 'general.search.placeholder' | t }}" class="header-bar__search-input" placeholder="{{ 'general.search.placeholder' | t }}">
  </form>

I want to start implementing this code of the shopify Predictive Search API reference

jQuery.getJSON("/search/suggest.json", {
  "q": "jacket",
  "resources": {
    "type": "product",
    "limit": 4,
    "options": {
      "unavailable_products": "last",
      "fields": "title,product_type,variants.title"
    }
  }
}).done(function(response) {
  var productSuggestions = response.resources.results.products;

  if (productSuggestions.length > 0) {
    var firstProductSuggestion = productSuggestions[0];

    alert("The title of the first product suggestion is: " + firstProductSuggestion.title);
  }
});

do I have to replace the form? As I understood, what is new since June 2019, is that the API can be connected with storefront search, so I can implement the JQuery call in the existing header search-bar, right?

I'd be very happy for some input here.

Thank you!

Simonski

0 Likes
Highlighted
Excursionist
78 7 12

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 = 'YOUR_SEARCH_EXPRESSION'
      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.
0 Likes
Highlighted
New Member
4 0 0

Hey @simonski , I'm still struggling to get this working. It's maddening that Shopify does not provide noob friendly tutorials. Could you please paste the relevant area of your theme.liquid so that I can see the context of what you did?

Also: Does the predictive search work for you the moment you enter something in the search field? I got it to work for me when I submitted the search, but that is not exactly the idea behind predictive search :-/

0 Likes
Highlighted
Excursionist
78 7 12

Howdy Django!

Basically what I did, I used the code for autocomplete search of this dude here:

https://www.huratips.com/tech-tips/how-to-add-autocomplete-for-search-boxes-to-your-shopify-store.ht...

After the line "What's the search term"

var term = $(this).val();

.. you put in my JQuery call of my last post. You have the search input in Huratips code. So you start typing "f" in your search box, the code executes and "term" is "f". You continue with "o", the code executes again, "term" is "fo" and so on. So you replace 

var q = 'YOUR_SEARCH_EXPRESSION'

 of my code with his line "var term...", but replace it with 

var q = $(this).val();

My code is meanwhile wrapped in lots of stuff with classes and css which won't work on your shop.

But my success answer looks like this:

'success': function(data) {
            var productSuggestions = data.resources.results.products;
            }

and to integrate in Huratips code, I use

 // If we have results.
            $.each(data.resources.results.products, function(index, item) {

You can check whats happening in "data" with console.log(data) to get all the results and write it in the results list, basically what Huratips is doing.

Hope this helps! It took me a really long time to find out this stuff. 

0 Likes