Graffiti does eBay

I’ve been jammed up with a lot of work recently, but I still make some time to play with one of my new favorite toys, Graffiti.

After my ecommerce site built on Graffiti I tend to look for new, interesting and different things that I can do with Graffiti both for the personal fun and challenge and to help showcase the power that Graffiti wields.

I came across a post a while back that I found interesting that I bookmarked for future reference. In it the author provided an idea to setup mini sites geared towards niche products that works as affiliate sales tools for referring people to eBay. He also laid out a decent step-by-step tutorial for doing so that involved Wordpress and a bunch of plug-ins. As a web developer I was mostly interested in the technology behind the site. I’ve worked with eBay’s web services in the past (on the WIWM project) and I really have an interest in web services that sites like Amazon, eBay, Yahoo, etc. offer. I don’t know why, but I really get geeked up by them. Maybe because they combine two of my favorite things - using 3rd party web services and search.

A few weeks ago I began thinking about that post again and wondered if you could do the same sort of thing with Graffiti instead of Wordpress. For those looking for the short story, the answer is “Yes, you can!” Building off my previous example, BuyWoodToys.com, I put together a wood toys comparison shopping site using a stock Graffiti installation, the eBay shopping web services, and a few custom Chalk extensions. If you’re itching to take look at the site, here’s the URL: http://compare.buywoodtoys.com.

The How-To

The toughest part was finding the category ids for all the products I wanted to display on the site and categorizing them. After browsing the eBay site for an hour or so (maybe longer, I tend to get lost in all that cool stuff) I had it figured out.

The URL in the image above is for the category “Toys & Hobbies > Educational”. Do you see the part of the URL that starts with “catZ” followed by a number? That number, 11731, is the ID for that category. If I remember correctly there is another way to determine the category id, but just browsing through the site and pulling it from the URL worked best for me.

I then created a category in Graffiti for each of the eBay categories I wanted to highlight: Building Toys, Characters (Movies / TV), Handcrafted, Puzzles, etc. No real magic here - the categories simply serve as containers. My goal was to use the categories as a navigation and hierarchy tool. The category page would just display a list of product categories (Graffiti posts) that fell under it like the image below (the results after clicking on the category “Building Toys”).

All that was required for this was a change to the index.view to display only the post image and title. This was very similar to my category pages that I was already using for the BuyWoodToys site, so little change was required.

The real meat of the work was done on the post page (or the post.view). I wanted to display a list of matching eBay products on the post page. For instance, if the user clicked “Lincoln Logs” post on the screen shown above, they would then be shown something similar to the following on the post page:

To tell the post what eBay products to display I made use of Graffiti’s support for Custom Fields. After groking custom fields I’ve found that I use them all the time. They really offer a great way to extend Graffiti easily, quickly and without touching any code. I added two fields, EbayCategoryID and EbaySearchTerm to the posts. Below you can see that the category ID is set to 19013, which is the category for Lincoln Logs.

By now I knew what I wanted to display and I told Graffiti what I wanted to display, but Graffiti has no built in knowledge of eBay or the eBay web services. I needed a way to help Graffiti out a bit. I created a custom Chalk extension (see this page for a quick explanation/example of creating a chalk extension) that would take an eBay category id and a search string as input parameters, call the eBay Shopping Web service with those parameters, loop through the returned results building the HTML necessary to display those results and then return that HTML as a string to display on the post page. The method takes either the category ID, the search term, or both as input and uses those to query the eBay service. I won’t go into code details here for the Chalk extension, but if you’re interested hit me up and I’ll give you a sample or I’ll write another post with more details.

Finally, I just needed to edit my post.view page to display the results of the eBay search. Using my new Chalk extension it was easy and the entire markup for the post.view page looks like this:

EbaySearchResults is the name I’ve given my custom Chalk class and HTML() is the name of the method to return the search results HTML. The method takes 3 parameters: search term, category id, and number of results to return. I told you the markup was simple. You can see that I just pass in my custom fields that I created in the Graffiti control panel, using post.Custom(“EbaySearchTerm”) and post.Custom(“EbayCategory”), and the Chalk extension does the rest. The HTML returned by the chalk extension is clean standards-based HTML that can easily be styled via CSS.

The Wrap

I don’t know that what I’ve done here has far reaching interest, other than to do exactly what I’ve demonstrated: building a little niche site to serve as an affiliate sales tool. I could see it as being more useful for someone who has a product-based blog (or theme-based blog) and wanted to have one category or post that listed out specific products available on eBay. One example comes to mind: a person who has a blog about cross country skiing may have a category or page that lists out ski equipment available on eBay. Alternately, you could list out a couple of eBay items at the end of any blog post that has the eBay category or search strings set for it. One similar idea that I’ve been playing around with is to implement this as a sidebar widget instead that shows items from Amazon or eBay if someone comes to the site via a search engine. For instance, if someone came to the site from Google by doing a search for “ASP.NET AJAX error ‘xyz’” then they might be shown a list of AJAX books from Amazon.

I hope I’ve been able to demonstrate the flexibility and power of Graffiti. I know that not everyone has the ability to fire up Visual Studio and build their own Chalk extensions, but at least you might now realize what is possible. If nothing else I hope you come away thinking, “that Graffiti is pretty cool”. And maybe even “that Dan is pretty cool, too”.