I love Etsy, and so do my visitors. Instead of just pointing to the site, however, I’d like to embed a search box so people could do an Etsy search directly. How do I do that?
Of course you can embed a search box on your site!
In fact, I don’t understand why sites like Etsy don’t make it easier for people to do this sort of thing: after all, the searches are of Etsy vendors and the more ways potential customers can search Etsy, the more products will be sold. Right?
While we can crack open the source to a page from Etsy, that’s going to be complicated, so instead let’s reverse engineer the search on the site itself. I think it’s a lot easier this way and the URL itself will tell us everything we need to know.
Let me show you what I mean…
If I go to Etsy.com and search for “doctor who scarf”, say, the results show up with this as the URL on the search results page:
http://www.etsy.com/search?q=doctor%20who%20scarf&view_type=gallery&ship_to=US
Unwrapping everything after the “?”, we see this:
q=doctor%20who%20scarf
view_type=gallery
ship_to=US
My guess is that most of these will default to rational values, so let’s just try an experiment with this URL:
http://www.etsy.com/search?q=doctor%20who%20scarf
(the “%20” is how a space is encoded in a URL, by the way).
Click on it above to see what happens.
Works just fine. So once we know this, it’s really easy to turn this into a search box. We need two items: the program on the server that receives the query, and the name of the variable that’s going to identify the search pattern. The former is “http://www.etsy.com/search” and the latter “q”.
This turns into HTML like this:
<form action="http://www.etsy.com/search" method="get">
<input type="text" name="q" />
<input type="submit" />
</form>
Before I embed it, a slight tweak: add a “target” attribute to the “form” tag and you can have the results open in a new page, ideal for something you add to your own page. It’s target=”_blank” to get a new window.
Which, if I embed it on this very page, ends up looking like this:
Go ahead, try it!
Great, so we have a form that works. it’s just not very attractive, so let’s clean things up and make it look a bit more cool. How’s this:
Nice? Here’s the HTML you’ll need, just copy and paste it onto your own page in “raw”, “text” or “source” mode:
<form style=”border: 2px solid #666; border-radius: 4px; padding: 10px;” action=”http://www.etsy.com/search” method=”get” target=”_blank”>
What do you seek? <input type=”text” name=”q” />
<input style=”font-size: 80%;” type=”submit” value=”Search Etsy” />
</form>
Hope that helps you out. Now about that Doctor Who scarf…
