For this tutorial, we shall initiate a single-category keyword search (though, specifying a category is optional for Amazon). Searching by category will allow a demonstration of Amazon’s search features such as sorting. The search form will include a text input, drop down select box, a hidden input and send button. The text input contains the keyword to be searched, the select input, the item category in which to search and the hidden input contains the default (or updated) sort value for the results.
</pre> <form style="margin: 0px; padding: 0px;" action="" onsubmit="return false;"><input type="hidden" name="sort" value="salesrank" /> <input id="asch" onkeypress="if(event.keyCode==13){amazonSearch(this.value, getEl('sort').value, getEl('SearchIndex').value)}" type="text" name="field-keywords" value="" /> <select name="SearchIndex"> <option value="Classical">Classical</option> <option value="DVD">DVD</option> <option value="DigitalMusic">Digital Music</option> <option value="Electronics">Electronics</option> <option value="GourmetFood">Gourmet Food</option> <option value="Grocery">Grocery</option> <option value="HealthPersonalCare">Health Personal Care</option> <option value="HomeGarden">Home Garden</option> <option value="Industrial">Industrial</option> <option value="Jewelry">Jewelry</option> <option value="KindleStore">Kindle Store</option> <option value="Kitchen">Kitchen</option> <option value="MP3Downloads">MP3Downloads</option> <option value="Magazines">Magazines</option> <option value="Marketplace">Marketplace</option> <option value="Merchants">Merchants</option> <option value="Miscellaneous">Miscellaneous</option> <option value="Music">Music</option> <option value="MusicTracks">Music Tracks</option> <option value="MusicalInstruments">Musical Instruments</option> <option value="OfficeProducts">Office Products</option> <option value="OutdoorLiving">Outdoor Living</option> <option value="PCHardware">PC Hardware</option> <option value="PetSupplies">Pet Supplies</option> <option value="Photo">Photo</option> <option value="SilverMerchants">Silver Merchants</option> <option value="Software">Software</option> <option value="SportingGoods">Sporting Goods</option> <option value="Tools">Tools</option> <option value="Toys">Toys</option> <option value="UnboxVideo">Unbox Video</option> <option value="VHS">VHS</option> <option value="Video">Video</option> <option value="VideoGames">Video Games</option> <option value="Watches">Watches</option> <option value="Wireless">Wireless</option> <option value="WirelessAccessories">Wireless Accessories</option> </select> <input onclick="amazonSearch(getEl('asch').value, getEl('sort').value, getEl('SearchIndex').value);" type="button" value="search" /></form> <pre>
The above code snippet should produce a form that looks like this.
To illustrate what the output would be without the JSON/XSL transformation, the above search form will return the raw XML response to a keyword search.
Go ahead and try a search in the above form to view what the XML output looks like.
This is the original output from which we will extract and manipulate the information we need using our XSLT stylesheet, JSON and the DOM functions.