Customizing Graffiti The Amazon aStore Chalk Extension

In my last post, Customizing Graffiti: Chalk GetQuerystringValue, I promised that I was brewing up a really good Graffiti example/tip that would combine a lot of the customizations that I’ve written about recently. Are you ready for this? This one will knock your socks off and it alone is worth the price of admission. It’s the Amazon aStore Chalk extension. No “oohs and ahhs” yet? Pessimists, huh? Just wait.

Historically (if you can call 3 previous posts “historically”) I disclose the what, how, etc. details first and then show an example. This time I’m going to do it a bit differently and tell you the back story behind the creation of the extension, show you an example, and then I’ll provide you with the code and usage details.

What is Amazon aStore?

I’ve looked at Amazon’s aStore offering before, but I never really had a reason to set one up or use one, until now.  The aStore is an Amazon hosted, personally branded ecommerce tool that allows you to sell any of Amazon’s products from your own site.  Notice that I wrote “Amazon hosted”. The Url for your Amazon store will look something like this: http://astore.amazon.com/netbookroundup-20. To include your aStore as part of your own site Amazon suggests that you either link directly to it, embed it in an IFrame in your site, or include it in your site using frames (pictures courtesy of the Amazon Associates web site):

I haven’t built anything with framesets in years and I wanted to make the store look as much a natural part of the site as possible so I took the IFrame route. Amazon suggests using the below code for your IFrame markup:

<iframe src="http://astore.amazon.com/netbookroundup-20"
  width="90%" height="4000" frameborder="0"
  scrolling="no"></iframe>

To me that looked like something I should create a Graffiti Chalk extension for, so that is exactly what I did!

The Story

NetbookRoundup.com is a site that I decided to put together over the holidays. I really wanted to get one of the new handy little laptops but I couldn’t make up my mind which make or model to get. I also had trouble keeping track of the current prices and sales/deals. I decided I could probably put together a nice little Graffiti site where I could do all that and then some. Plus the term “netbook” is still fairly new so I thought I might be able to find a few good domain names still available and stash them away as an investment. I’ll post more details about the Netbook Roundup site soon, but one of the things I decided to include was my a own online store with the help of Amazon aStore.

Below is a screenshot of what the NetbookRoundup integrated aStore looks like when you click on the “Shop” link in the primary navigation. If you want to see it live then here’s the link: http://netbookroundup.com/store/

This is a great start but I also wanted to be able to provide links directly to specific products. For example, on the page where I review the Lenovo Ideapad S10 (http://netbookroundup.com/models/lenovo/ideapad-s10/) I want to have a link that says “Buy the Lenovo Ideapad S10 in the Netbook Roundup Store” and have that link directly to that product’s page in the aStore. 

By reviewing the structure of the aStore site I was able to determine that the Url for a specific product followed the pattern: http://astore.amazon.com/yourstoreid/detail/ASID, where ASID is the Amazon product id. So all I had to do was figure out how to get that product id into the Iframe’s src tag. I could have used some javascript but I instead opted to just include the ASID as a querystring key/value paramater in the Graffiti post’s Url. The chalk code checks to see if the ASID is present, if it is then it sets the source of the iframe accordingly, if not then it just uses the base aStore Url. 

Okay, enough story time, here’s the code…

What does this Chalk Extension do?

You use it to display an Amazon aStore as part of your Graffiti site.

The Code

using Graffiti.Core;

namespace DanHounshell.Graffiti.Chalk
{
  [Chalk("AmazonAStore")]
  public class AmazonAStore
  {
    public string HTML(string AStoreUrl)
    {
      return HTML(AStoreUrl, "");
    }  

    public string HTML(string AStoreUrl, string ASID)
    {
      if (!string.IsNullOrEmpty(ASID))
      {
        AStoreUrl += "/detail/" \+ ASID;
      }
      return string.Format("<iframe src=\"{0}\"
        width=\"100%\" height=\"4000\"
        frameborder=\"0\" scrolling=\"no\"></iframe>",
        AStoreUrl);
    }
  }
}

Usage

Just place the following code into the proper view for wherever you want your aStore displayed in your Graffiti site:

$AmazonAStore.HTML("http://astore.amazon.com/YourAStoreId")

This will display the aStore homepage like I have pictured in the screenshot above.

For including the aStore in the Netbook Roundup site, I created a new uncategorized post called “Store” and then created a new custom view called store.view, based on post.view. The new view, store.view, is what is displayed when a user is looking at the “Store” post. I then pasted just the AStore chalk markup into that custom view. YMMV – you may have other markup that you want to include in the custom view, I didn’t. The rendered HTML of the aStore is about 800px wide so you might need to consider creating a new custom layout for your post that doesn’t display any sidebars or other items included on your other pages. I’d suggest creating a copy of your layout.view called store.layout.view and stripping out anything you don’t need. If you follow the same setup that I did, don’t forget to create a custom navigation item for your main nav that points to the Url of your store post.

If you want to allow for direct linking to products then you can do something similar to the following and just include “?ASIN=AmazonProductId” in any Urls to your Graffiti store post when you want to link to a specific product (ex: http://netbookroundup.com/store/?ASIN=B001GNBD8I):

$AmazonAStore.HTML(
  "http://astore.amazon.com/YourAStoreId",
  $QueryStringHelper.GetQueryStringValue("ASIN"))

Notice the use of the QueryStringHelper.GetQueryStringValue chalk extension in the code above. I told you I’d show you a useful real-world example!

Finally, if you want to store your aStore’s url in your web.config file rather than hard code it into the view you can use the ConfigurationAppSettings.GetAppSetting chalk extension:

$AmazonAStore.HTML(
  $ConfigurationAppSettings.GetAppSetting("Amazon.AStoreUrl"),
  $QueryStringHelper.GetQueryStringValue("ASIN"))

Notes

Of course you could just hard-code the Amazon aStore IFrame HTML code into a Graffiti post and instantly add a store to your Graffiti site, but what fun is that?!?! Also, you won’t get the ability to link directly to a product page without adding some of your own NVelocity markup.

Not everyone can (or should) use an Amazon aStore in their Graffiti site. It doesn’t make sense for my personal blog and it probably doesn’t make sense for yours either. But if you have a product-based blog, do software reviews, or even a lot of book reviews then including a store in your site might be fun and maybe even put a few extra dollars in your pocket. 

In future posts I’ll discuss some of the other Graffiti custom widgets and chalk extensions that created for the Netbook Roundup site, including displaying ebay auctions that match the content (which I’ve discussed in the past for a different Graffiti site), writing chalk extension that pulls data from various web services to provide price comparison shopping links, and more. See the MSI Wind page on the Netbook Roundup site for examples of ebay and price comparisons. Notice the “Buy the MSI Wind U100 in the Netbook Roundup Store” link? That’s something that you can do now, too! 

I hope you find this Graffiti Chalk extension tip useful. Please leave a comment if you have any suggestions or questions.