ajaxshopify

Shopify Predictive Search Ajax Call


I'm quite new to shopify, liquid and all that comes with it.
I try to implement predective search on shopify and I just don't know why I'm not even getting the alert of the Ajax call that is in the following code. I put it in my "theme.liquid" file right above the closing body tag. I assume if it would work, there should be the alert right when opening the page, no? Goki is a vendor, many products are shown when I search for it on my page. My code looks like this:

<script>
jQuery.getJSON("/search/suggest.json", {
  "q": "goki",
  "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);
  }
});
</script>


Any help would be very very much appreciated! Thank you!


Solution

  • I solved it. I created an own variable AjaxData with all the 'resources' parameter before entering the JQuery call. There I don't use the variable to create the url, it's just used to define param in the call, not to change the url. -that's the trick