d
Topic
Posts:
5
February 19, 2016

Shopping Cart Custom Field + jQuery Autocomplete This post is outdated

I'm hoping someone can help me with my issue I'm having, assuming it can be done.

On my Shopify shopping cart page, I want to add a custom field BUT I want the custom field to be a jQuery Autocomplete field - read about that here.  I've successfully added custom fields in Shopify but the Autocomplete function isn't working.  I've even tried doing the Autocomplete on a non-Shopify field (ex. <input id="tags">) on the shopping cart page to test but it doesn't work.  I am able to get the Autocomplete function working on a basic HTML webpage I created, but it doesn't seem to work when I try to implement it within Shopify.  I've also tested it with the jQuery links in the HEAD and without them but still same issue - the Autocomplete field doesn't work (the items don't appear when I begin typing).

Thoughts or suggestions on what to test next?

i
Replies
Posts:
1135
February 19, 2016

To see if there are any errors or missing dependencies that lead to this please give us a live URL. Debugging is impossible without.

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
5
February 19, 2016

Hi Mircea,

Here is the link to our Store for testing - https://saferetrieve.myshopify.com

The code I am currently using for this jQuery Autocomplete is from the website I referenced in my original post - https://jqueryui.com/autocomplete

Posts:
1135
February 19, 2016

You need to place the jQuery scripts above the autocomplet scripts.

Take

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

and put before

  <script src="//cdn.shopify.com/s/files/1/1072/8150/t/1/assets/breed-autocomplete.js?16510344523081660089" type="text/javascript"></script>
  <script src="//cdn.shopify.com/s/files/1/1072/8150/t/1/assets/breed-autocomplete-min.js?16510344523081660089" type="text/javascript"></script>

 

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
5
February 19, 2016

Hi Mircea,

I removed those two .js files (breed-autocomplete.js) since those weren't needed anymore - I used them earlier for testing another autocomplete field.  The autocomplete still doesn't work.

Posts:
1135
February 19, 2016

OK,

The error now is "autocomplete is not a function". This function needs this selector to run: "#tags". On your page there is not an element with the ID tags. Did you add the markup for this?

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
5
February 19, 2016

Yes, as I copied all the code from the jQuery Autocomplete webpage - https://jqueryui.com/autocomplete/ (click view source link they have provided)

Attached is pic of both snippets of code from Shopify shopping cart page.

Screen shot 2016 02 19 at 11.59.42 am thumb
Posts:
1135
February 19, 2016

The markup is not on that product page, maybe you've added in another template.

You can click right, select 'view page source' and search for  id="tags". It is not there.

That is the issue.

Got an interesting project or just want to say hi? mircea@typefolly.com
Posts:
5
February 19, 2016

Problem solved.  What I did to fix it was put the all javascript code directly before the </head>, I had it placed in the middle of the HEAD.