I’m a huge Etsy fan and would like to add an Etsy search box to my Web site. Is that possible?
Well, there’s a little bit of HTML coding involved, but yes, you can definitely add a search box to your site, though it won’t have all the fancy bells and whistles (read “suggested searches”) that you’d see on the home page of the Etsy site, because that’s a considerably more complicated coding task.
Thing is, most search systems on sites are really easy to duplicate because they use the same “method=GET” style of query, so you don’t even need to look at the source code to the page to know how it’s done. You can tell because, as we’ll see in a moment, the URL of the search results page includes your actual search pattern as one of the variables.
But let’s start at the beginning with the Etsy search box itself.
Go on the site and you’ll see this along the top:
Type in a search term and press “Search”.
Now in the address bar of your Web browser you’ll see a URL like this one I got for a search for ‘nose ring’:
Why “nose ring”? Why not? 🙂
Looking closely at the URL and armed with the knowledge that everything after the “?” are name=value arguments, we can disassemble the search into:
- http://www.etsy.com/search
- q=nose%20ring
- view_type=gallery
- ship_to=US
Those are the default values, a gallery view and vendors that ship to the US.
With a tiny bit of experimentation, it becomes clear that the view_type and ship_to values are unneeded and that the URL below produces exactly the same search results:
This means that in the language of HTML, we have the following simple form:
<input type=”text” name=”q” />
<input type=”submit” value=”search Etsy” />
</form>
Simple enough, and if you look, you can see how the “q” shows up as the search variable name and the Etsy search URL shows up as the action in the form tag.
Here’s how it looks:
Try it, though you might search for something other than nose rings.
So that’s it. Simply copy and paste the above code and add it to your site. There are, of course, a zillion different ways you can tweak and tune the search box, particularly using CSS, but that’s your functional starting point and I’ll let you experiment from this point.