Playing around t with Etsy API. Here’s a working example of how to make a simple search request to the Etsy API with jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<html> <head> <title>Etsy Search</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> (function($){ $(document).ready(function(){ $('#etsy-search').bind('submit', function() { api_key = "mwj5r3fjh7qfignyned2qmmx"; terms = $('#etsy-terms').val(); etsyURL = "https://openapi.etsy.com/v2/listings/active.js?keywords="+ terms+"&limit=12&includes=Images:1&api_key="+api_key; $('#etsy-images').empty(); $('<p></p>').text('Searching for '+terms).appendTo('#etsy-images'); $.ajax({ url: etsyURL, dataType: 'jsonp', success: function(data) { if (data.ok) { $('#etsy-images').empty(); if (data.count > 0) { $.each(data.results, function(i,item) { $("<img/>").attr("src", item.Images[0].url_75x75).appendTo("#etsy-images").wrap( "<a href='" + item.url + "'></a>" ); if (i%4 == 3) { $('<br/>').appendTo('#etsy-images'); } }); } else { $('<p>No results.</p>').appendTo('#etsy-images'); } } else { $('#etsy-images').empty(); alert(data.error); } } }); return false; }) }); })(jQuery); </script> </head> <body> <form id="etsy-search"> <input id="etsy-terms" size="32"> <button>Search!</button> </form> <div id="etsy-images"></div> </body> </html> |
Preview and Edit on Codepen.io
