JQuery get predictive search success response not working

Highlighted
Explorer
78 7 12

I'm trying and trying and trying, to implement a JQuery get function.

Finally it's working (I get the alert after the JQuery call), but only without the success part. As soon as I implement the lines "success", it's not working anymore (no alert). 

Can anybody tell me how to manage to get the success response of the JQuery Call? The function that I should put there, how do I have to define that function before the call? 

I don't have to mention that I already read all the shopify "tutorials" and thousands of websites to find out about the JQuery get function. Sorry but I just don't get it.

    <script>
      var url = "/search/suggest.json?q="
      var a = "chair"
      var b = "&resources[type]=product"
      $.ajax({
        url,
        a,
        b
      }
      success: function() { 
    	alert("SUCCESS");
      }
      );
  </script>

Also if I just put one line to success:

      success: 	alert("SUCCESS");

 It won't work anymore.

Any ideas?

0 Likes
Highlighted
Explorer
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 = '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.
0 Likes